✒️SAP BTPFIORI / La utilización de los controles en la UI Por Jose Baz Suarez

Selector Alummnos / Empresas

SAP BTPFIORI La utilización de los controles en la UI

SAP BTPFIORI La utilización de los controles en la UILa utilización de los controles en la UI
1. Introducción

En SAPUI5, la utilización de los controles en la interfaz de usuario representa uno de los pilares fundamentales del diseño y la construcción de aplicaciones SAP Fiori.
Cada control cumple una función específica dentro de la UI y debe ser implementado siguiendo las guías de diseño Fiori para garantizar uniformidad, usabilidad y coherencia visual.
El desarrollador o consultor Fiori debe conocer los diferentes tipos de controles disponibles y aplicar buenas prácticas para mantener una interfaz limpia, intuitiva y adaptable a distintos dispositivos.

2. Clasificación de los controles según su función

Los controles SAPUI5 se agrupan según el tipo de tarea que cumplen dentro de la aplicación.

Controles de entrada: permiten al usuario ingresar información. Algunos ejemplos son sap.m.Input, sap.m.Select, sap.m.DatePicker y sap.m.CheckBox.

Controles de salida: se utilizan para mostrar información proveniente del modelo de datos. Ejemplos: sap.m.Text, sap.m.ObjectStatus, sap.m.Label.

Controles de acción: ejecutan operaciones o eventos. Ejemplos: sap.m.Button, sap.m.Link, sap.m.MenuButton.

Controles de contenedor: agrupan y organizan otros controles dentro de una misma estructura. Ejemplos: sap.m.Page, sap.m.Panel, sap.m.Dialog, sap.m.Table, sap.m.List.

Controles de navegación: permiten desplazarse entre vistas o secciones de la aplicación. Ejemplos: sap.m.NavContainer, sap.m.IconTabBar.

Cada tipo de control debe seleccionarse en función del propósito de la interacción y del flujo del usuario.

3. Implementación en la vista

Los controles pueden declararse directamente en las vistas XML o crearse de manera programática desde el controlador.

Ejemplo en XML:

<Button text="Enviar" press=".onEnviar"/>

Ejemplo en JavaScript:

var oButton = new sap.m.Button({ text: "Enviar", press: this.onEnviar }); this.getView().byId("panelAcciones").addContent(oButton);

Cuando los controles se vinculan con modelos de datos, utilizan el mecanismo de “data binding”, lo que garantiza que los valores de la interfaz se actualicen automáticamente al modificarse los datos en el modelo.

4. Densidades de contenido

SAPUI5 ofrece distintas densidades de contenido para adaptar el espacio visual de los controles según el tipo de dispositivo.

La densidad Cozy presenta un diseño amplio, ideal para dispositivos móviles y pantallas táctiles.

La densidad Compact utiliza un diseño más reducido, apropiado para aplicaciones de escritorio donde se requiere aprovechar mejor el espacio.

La densidad Condensed es una variante más comprimida que se emplea generalmente en aplicaciones analíticas o de reportes con alta densidad de información.

Seleccionar la densidad adecuada garantiza legibilidad, comodidad de uso y coherencia visual.

5. Propiedades y agregaciones

Los controles SAPUI5 tienen propiedades simples, como text, visible o value, y propiedades complejas denominadas “agregaciones”.
Las agregaciones permiten que un control contenga a otros controles dentro de su estructura, formando una jerarquía visual coherente.

Ejemplo:

<List items="{/Clientes}"> <items> <StandardListItem title="{nombre}" description="{ciudad}"/> </items> </List>

En este caso, el control List contiene una agregación de StandardListItem, que se repite automáticamente para cada elemento del modelo de datos.

6. Reutilización y consistencia

El uso adecuado de los controles busca lograr tres objetivos principales:

Reutilización: los controles pueden implementarse en diferentes partes del sistema o en distintas aplicaciones, reduciendo tiempos de desarrollo.

Consistencia: la utilización de controles estándar garantiza que todas las aplicaciones Fiori mantengan la misma apariencia y comportamiento.

Adaptabilidad: los controles se ajustan automáticamente al tipo de dispositivo y tamaño de pantalla, garantizando una experiencia de usuario uniforme.

El respeto por estas reglas de diseño asegura la escalabilidad de las aplicaciones y su compatibilidad futura.

7. Ejemplo práctico de utilización de controles

Ejemplo de vista XML:

<Page title="Datos del Cliente"> <content> <VBox> <Label text="Nombre"/> <Input value="{/Cliente/Nombre}" /> <Label text="Correo Electrónico"/> <Input value="{/Cliente/Email}" type="Email"/> <Button text="Guardar" press=".onGuardar"/> </VBox> </content> </Page>

En este ejemplo se emplean los controles Label, Input y Button dentro de un contenedor VBox.
Los campos están vinculados mediante data binding al modelo de datos del cliente, y el botón ejecuta una acción definida en el controlador.

8. Buenas prácticas

  • Utilizar siempre controles estándar de la librería sap.m.

  • Evitar controles personalizados salvo que sea estrictamente necesario.

  • Definir la densidad visual adecuada según el dispositivo destino.

  • Centralizar todos los textos y etiquetas en archivos i18n.properties para facilitar la traducción.

  • Asignar identificadores únicos a los controles para evitar conflictos.

  • Mantener la jerarquía visual ordenada y lógica en las vistas.

  • Probar las interfaces en diferentes dispositivos y navegadores para asegurar compatibilidad.

9. Conclusión

El dominio en la utilización de los controles SAPUI5 permite desarrollar aplicaciones Fiori coherentes, adaptables y centradas en el usuario.
Un consultor SAP Fiori debe comprender las propiedades, eventos y agregaciones de cada control, así como aplicar las buenas prácticas de diseño y selección de densidades visuales.
El uso correcto de los controles asegura que las aplicaciones mantengan la calidad y la coherencia establecidas por los lineamientos oficiales de SAP.

Preguntas de repaso con respuestas

  1. ¿Cuál es el propósito principal de los controles SAPUI5 en la interfaz de usuario?
    Permiten construir componentes visuales reutilizables que posibilitan la interacción del usuario con la aplicación.

  2. ¿Qué tipos de controles existen en SAPUI5 según su función?
    Existen controles de entrada, salida, acción, contenedor y navegación.

  3. ¿Qué es una agregación dentro de un control SAPUI5?
    Es una propiedad compleja que permite contener uno o varios controles dentro de otro, generando una estructura jerárquica.

  4. ¿Qué densidades de contenido existen y cuál se utiliza para entornos de escritorio?
    Las densidades son Cozy, Compact y Condensed. La densidad Compact es la utilizada en entornos de escritorio.

  5. ¿Qué ventajas aporta la reutilización de controles?
    Permite reducir tiempos de desarrollo, mejorar la consistencia visual y facilitar el mantenimiento del código.

  6. ¿Cuál es la diferencia entre implementar un control en XML y en JavaScript?
    En XML los controles se definen de forma declarativa dentro de la vista, mientras que en JavaScript se crean dinámicamente desde el controlador cuando su estructura depende de condiciones lógicas o datos de ejecución.

 

Escanear / Compartir

 

 

Sobre el autor

Publicación académica de Jose Rodrigo Baz Suarez, en su ámbito de estudios para la Carrera Consultor SAP BTP Fiori.

SAP SemiSenior

Jose Rodrigo Baz Suarez

Profesión: Analista de Inventarios y Auditoria - Uruguay - Legajo: WX92M

✒️Autor de: 47 Publicaciones Académicas

🎓Cursando Actualmente: Carrera Consultor SAP MM Nivel Avanzado

🎓Egresado del módulo:

Disponibilidad Laboral: FullTime

Presentación:

Analista con experiencia en sap, contabilidad, inventarios y costos. manejo de cierres, balances, reportes y mejoras de procesos administrativos.

Certificación Académica de Jose Baz

✒️+Comunidad Académica CVOSOFT

Continúe aprendiendo sobre el tema "La utilización de los controles en la UI" de la mano de nuestros alumnos.

SAP SemiSenior

La utilización de los controles en la UI 1. Introducción En SAPUI5, la utilización de los controles en la interfaz de usuario representa uno de los pilares fundamentales del diseño y la construcción de aplicaciones SAP Fiori. Cada control cumple una función específica dentro de la UI y debe ser implementado siguiendo las guías de diseño Fiori para garantizar uniformidad, usabilidad y coherencia visual. El desarrollador o consultor Fiori debe conocer los diferentes tipos de controles disponibles y aplicar buenas prácticas para mantener una interfaz limpia, intuitiva y adaptable a distintos dispositivos. 2. Clasificación de los controles según su función...

Acceder a esta publicación

Creado y Compartido por: Jose Rodrigo Baz Suarez / Disponibilidad Laboral: FullTime + Carta Presentación

*** CVOSOFT - Nuestros Alumnos - Nuestro Mayor Orgullo como Academia ***

SAP Master

La utilizacion de los controles UI Tipos de controles de interfaz de usuario Simple Controls Value Holders Layouts Complex Controls UX3 Controls Controles para escritorio sap.ui-namespace El nombre de control: sap.m.Table El control de metadatos: Es un objeto interno que define las propiedades, agregaciones, asociaciones y eventos del control. Esto permite al framework (y a ti como desarrolladora) saber cómo usar el control, qué atributos tiene, cómo se renderiza y cómo interactúa con otros controles. Los elementos: sap.ui.core.Element es la clase base de sap.ui.core.Control Los metodos: en los controles SAPUI5 son funciones que te permiten interactuar, modificar o recuperar...

Acceder a esta publicación

Creado y Compartido por: Claudia Bibiana Monsalve Lopez

*** CVOSOFT - Nuestros Alumnos - Nuestro Mayor Orgullo como Academia ***

1. LOS CONTROLES DE UI Tipos de controles SAPUI5 Simple Controls Value Holders Layouts Complex Controls Dialos UX3 Controls > Se recomienda usar controles de interfaz de usuario movil en lugar de los de escritorio Los controles consisten en: nombre del control: nombre_de_biblioteca.nombre_control metadatos de control: Los controles estan definidos por los metadatos de control, que es la API publica del control. propiedades eventos agregaciones asociaciones Los elementos: partes o paquetes de configuracoin para parte de controles. los metodos CLASE BASE DE TODOS LOS CONTROLES es sap.ui.core.Control Dos de las librerias mas usadas en SAPUI5 a....

Acceder a esta publicación

Creado y Compartido por: Roberto Hernan Santucho

*** CVOSOFT - Nuestros Alumnos - Nuestro Mayor Orgullo como Academia ***

SAP Expert


Las aplicaciones desarrolladas con SAP GUI 5 presentan una experiencia de usuario consistente y responden a navegadores de cualquier dispositivo móvil los controles de interfaz de usuario se adaptan automáticamente a las capacidades de cada dispositivo. SAP GUI 5 usa el databinding para unir dos fuentes de datos o fuentes de información para mantener la sincronía, todos los cambios de una fuente también se reflejan en la otra, para el enlace de datos necesitamos un modelo y una instancia de enlace. La instancia del modelo contiene los datos y proporciona métodos para establecer los datos o para recuperarlos de un servidor.

Acceder a esta publicación

Creado y Compartido por: Jose Medina / Disponibilidad Laboral: FullTime + Carta Presentación

*** CVOSOFT - Nuestros Alumnos - Nuestro Mayor Orgullo como Academia ***

SAP Expert


1 | SAPUI5 UI Controls What are SAPUI5 Controls? SAPUI5 controls are user interface elements used for interactive operations, either passively or actively. Each control defines how a specific area of the screen appears and behaves. Overview of SAPUI5 Controls In SAPUI5, controls are categorized into mobile-focused UI controls and desktop-centric UI controls. It's recommended to use mobile-focused controls as desktop controls in the sap.ui namespace are deprecated. Key Components of Controls: Control Name: Each control has a name consisting of a library name and control name, like sap.m.Table for creating a table. Control Metadata: Defines properties, events, aggregations, and associations of a control. Properties modify appearance or...

Acceder a esta publicación

Creado y Compartido por: Jaime Eduardo Gomez Arango / Disponibilidad Laboral: FullTime + Carta Presentación

*** CVOSOFT - Nuestros Alumnos - Nuestro Mayor Orgullo como Academia ***

SAP Senior

DATA BINDING En SAPUI5, el concepto de data binding (vinculación de datos) es fundamental para conectar y sincronizar los datos entre el modelo de datos y la interfaz de usuario. La vinculación de datos permite actualizar automáticamente la interfaz de usuario cuando los datos subyacentes cambian, y viceversa. Esto facilita la creación de aplicaciones web dinámicas y reactivas. A continuación, se describen los aspectos clave de la vinculación de datos en SAPUI5: Modelo de Datos: SAPUI5 sigue el patrón de diseño MVC (Modelo-Vista-Controlador), donde el modelo de datos representa la capa de datos de la aplicación. Puedes utilizar...

Acceder a esta publicación

Creado y Compartido por: Claudio Marcelo Hermann / Disponibilidad Laboral: FullTime

*** CVOSOFT - Nuestros Alumnos - Nuestro Mayor Orgullo como Academia ***

SAP Senior

Los controles de UI El texto habla sobre los controles de UI en SAPUI5, que son elementos de interfaz de usuario utilizados para definir la apariencia y el comportamiento de las áreas en la pantalla. Los controles tienen propiedades como texto o ancho que modifican la apariencia o se relacionan con los datos mostrados. SAPUI5 proporciona diferentes tipos de controles de interfaz de usuario, y se recomienda utilizar los controles móviles en lugar de los centrados en el escritorio. Los controles constan de un nombre y metadatos que definen sus propiedades, eventos, agregaciones y asociaciones. Los controles pueden tener agregaciones, que son controles secundarios que se agregan al control principal, y asociaciones, que están...

Acceder a esta publicación

Creado y Compartido por: Nilson Parra Martinez / Disponibilidad Laboral: PartTime

*** CVOSOFT - Nuestros Alumnos - Nuestro Mayor Orgullo como Academia ***

SAP SemiSenior

Resumen Unidad 3 capitulo 5 1. Ejemplo de generacion de una fuente de datos Databinding: asociar dos instancias de información, un modelo y una vista de modo tal que queden sincronizados Ejemplo: a. Crear un archivo products.json y agregarlo a la carpeta mockdata del proyecto b. Modificar manifest.json. 2.1 En la sección "dataSources", agregar "productos": { "uri": "./mockdata/products.json", "type" : "JSON" } 2.1 En la sección "models", agregar "products_json": { "type": "sap.ui.model.json.JSONModel", "dataSource": "productos" } c. En return Controller.extend("ns.controles.controller.View1",...

Acceder a esta publicación

Creado y Compartido por: Cristian Cash

*** CVOSOFT - Nuestros Alumnos - Nuestro Mayor Orgullo como Academia ***

SAP Senior

Apunte Creado OK - Iniciar Edición Los controles UI: son los elementos de interfaz de usuario con los que se va llevar a cabo la interacción Los controles consisten de: Nombre del control El control de metadatos Los elementos Los métodos Los controles son clases definidas por SAP que representan definición de los elementos que se mostraran en las vistas Data Binding: enlaza la agregación item con un modelo Modelo con Json : es un modelo del lado del cliente que se recomienda para conjunto de datos pequeños

Acceder a esta publicación

Creado y Compartido por: Detriana Barrios / Disponibilidad Laboral: FullTime + Carta Presentación

*** CVOSOFT - Nuestros Alumnos - Nuestro Mayor Orgullo como Academia ***

SAP Master


Los controles de UI Los controles se utilizan para definir la apariencia y el comportamiento de las áreas en la pantalla. Normalmente los controles tienen propiedades como texto o ancho que modifican la apariencia o se relacionan con los datos mostrados por el control. SAPUI5 proporciona diferentes tipos de controles de interfaz de usuario. Hay más controles de interfaz de usuario centrados en el escritorio en el framework SAPUI5. Lo recomendable es utilizar los controles de la interfaz de usuario móvil. Los controles centrados en el escritorio de sap.ui-namespace están en desuso. Los controles consisten en: El nombre de control: es una cadena que consta del nombre de la biblioteca y el nombre del control, separados...

Acceder a esta publicación

Creado y Compartido por: Gerber Geovanni Lopez Hernandez / Disponibilidad Laboral: FullTime

 

 

👌Genial!, estos fueron los últimos artículos sobre más de 99.000 publicaciones académicas abiertas, libres y gratuitas compartidas con la comunidad, para acceder a ellas le dejamos el enlace a CVOPEN ACADEMY.

🔎Buscador de Publicaciones:

 

 

No sea Juan... Solo podrá llegar alto si realiza su formación con los mejores!