✒️SAP Fiori La utilización de los controles en la UI

• 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 conectadas por ID en lugar de referencia. Los eventos están relacionados con el propósito y la funcionalidad del control.

Además de los controles, existen elementos que son partes de controles y se utilizan como configuración. Los métodos son funciones públicas utilizadas para obtener o establecer valores y se generan automáticamente para las propiedades.

Los controles en SAPUI5 son clases definidas por SAP que representan los elementos que se muestran en las vistas. Hay diferentes librerías de SAPUI5, como sap.ui.commons y sap.m, que contienen controles específicos para aplicaciones de escritorio y aplicaciones multiplataforma, respectivamente. Estas librerías proporcionan controles responsivos que se adaptan a diferentes dispositivos.

SAPUI5 también ofrece herramientas para ayudar a las personas con discapacidad visual, basadas en el estándar ARIA (Accessible Rich Internet Applications).

• La creación de una tabla usando un control de SAPUI5

El texto se refiere a la creación de una tabla utilizando un control de SAPUI5. Se menciona que se agregará un control Table para mostrar datos de un archivo JSON cargado en la aplicación. Se indica que el control Table tiene propiedades y agregaciones, y se menciona la agregación "columns" que define la cantidad de columnas de la tabla. Se sugiere utilizar el control "sap.m.Table" en lugar del control "sap.ui.table.Table" debido a que el primero es responsivo.

Además, se introduce el concepto de Data Binding, que se ilustra en la imagen proporcionada. Se explica que el Data Binding es importante en el desarrollo de aplicaciones SAPUI5 y se muestra un ejemplo en el que se enlaza la agregación "items" con un modelo.

• La creación de un modelo con un archivo JSON local

El texto habla sobre la creación y uso de un modelo JSON en una aplicación SAPUI5. Se carga un archivo JSON local y se vincula con la vista utilizando el enlace de datos. El modelo JSON se utiliza para vincular controles con datos y se recomienda para conjuntos de datos pequeños. Se mencionan dos formas de usar el modelo en la vista: mediante un archivo manifest.json o cargando los datos JSON de una URL. La vinculación del modelo a la vista se realiza a través del enlace de datos, que permite enlazar datos procedentes del modelo con propiedades de los controles SAPUI5. Se explica cómo asignar el modelo a nivel de aplicación, vista o control. También se menciona la carga del modelo y cómo detectar cuando se ha cargado completamente. Se muestra un ejemplo de cómo asociar el modelo a un control de tipo Table en la vista mediante un binding. SAPUI5 utiliza el binding de datos para mantener sincronizadas dos fuentes de datos.

• La creación de controles de entrada

El texto habla sobre la creación de controles de entrada en una interfaz de usuario. Se mencionan varios tipos de controles, como Input (campo de entrada), Select (menú de opciones), Label (etiqueta) y Button (botón). Se explican las propiedades y atributos de cada control, como el id (identificación única), value (valor del elemento), maxLength (longitud máxima del campo de entrada), class (clase para dar estilo), placeholder (texto informativo), showSuggestion (sugerencias basadas en la entrada), suggestionItems (valores sugeridos), selectedKey (valor seleccionado en el menú de opciones), items (valores del combo), forceSelection (restricción de selección), visible (visibilidad del control) y labelFor (asociación entre etiqueta y control). También se menciona la necesidad de cargar referencias y se muestra un ejemplo de cómo se relacionan las propiedades del control Select con un modelo JSON. Además, se menciona la programación de eventos en el controlador de la vista.

• Los eventos

El texto habla sobre eventos y filtros en el contexto de desarrollo de software. Aquí está un resumen en conceptos:

• Evento: Es la ejecución de una función en respuesta a una acción y se utiliza para notificar al código de eventos importantes. Puede haber oyentes (listeners) o manejadores (handlers) que responden a eventos.
• Filtros: Se utilizan para realizar búsquedas o filtrar datos. En este caso, se emplean dos librerías (sap.ui.model.Filter y sap.ui.model.FilterOperator) para implementar filtros en un proyecto de desarrollo.
• Implementación de filtros: Se obtienen los datos del modelo, se definen los criterios de filtrado (por ejemplo, igualdad o contenido), y se aplican los filtros a una tabla u otra estructura de datos utilizando el método oBinding.filter(filters).
• Eliminación de filtros: Se utiliza un evento press en un botón para limpiar los filtros. En este caso, se utiliza el método setProperty para establecer los campos vinculados al modelo en blanco y así limpiar la vista.
• El contexto y los mensajes

El texto habla sobre el contexto y los mensajes en un modelo de datos. Se menciona que el alcance y el contexto están asociados a las invocaciones de funciones. El alcance se refiere al acceso a las variables de una función, mientras que el contexto se refiere al objeto que posee el código en ejecución. Se menciona que el método getBindingContext() devuelve el contexto de enlace aplicado a un control y que se puede utilizar para obtener detalles de contexto y datos en un control. Se menciona también el uso de la librería sap.m.MessageToast para mostrar mensajes emergentes no disruptivos con datos específicos. Se muestra una imagen de ejemplo de cómo se ve el mensaje al hacer clic en una fila de una tabla.