✒️SAP BTPFIORI / La utilización de los controles en la UI Por Roberto Santucho
SAP BTPFIORI La utilización de los controles en la UI
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. sap.ui.commons :
b. sap.m:
2. LA CREACION DE UNA TABLA USANDO UN CONTROL DE SAPUI5
- sap.m.Table
- agregaciones: coleccion de valores o de otros controles SAPUI5.
- DATA BINDING: VINCULAR O ENLAZAR CONTROLES CON DATOS. ESTE EJEMPLO TABLE ES UN UN CASO CUANDO SE ENLAZA LA AGREGACION ITEMS CON UN MODELO.
- 3. LA CREACION DE UN MODELO CON UN ARCHIVO JSON LOCAL
- cargar el modelo JSON y asociarlo a la vista. Para lo cual dentro del controlador de la vista en el metodo init() vamos a instanciar un modelo JSON con los datos de un archivo products.json
- agregamos el archivo .json a la carpeta mockdata
- para usar el modelo en la vista hay 2 opciones:
- usando el archivo manifest.json
- usando la instruccion loadData.
- optamos por editar el archivo manifest.json para que el modelo se carge de forma automatica y no implementarlo en forma explicita
- en el archivo manifest.json, creamos la configuracion para el modelo, completando 2 propiedades
- crecion de la fuente de datos (dataSource): EN EL APARTADO dataSources: en este caso la llamamos productos, y propiedades
- uri: "./mockdata/products.json"
- type: "JSON"
- creacion del modelo: en el apartado models, agregamos "products_json" en este caso, y como propiedad datarource "productos"
- crecion de la fuente de datos (dataSource): EN EL APARTADO dataSources: en este caso la llamamos productos, y propiedades
3.1. Una vez creado el modelo, podemos asignar el modelo al Core o a controles especificos con el metodo setModel, en alguno de los niveles posibles:
- A NIVEL APLICACION (CORE):
- sap.ui.getCore().setModel(model);
- A NIVEL VISTA: solo disponible para los controles DENTRO DE UNA VISTA SAPUI5
- miVista.setModel(model);
- A NIVEL CONTROL: por ejemplo a una tabla
- sap.ui.getCore().byId("___xmlvie0--Tabla1").setModel(model);
Como obtener el modelo dentro de una vista con la funcion this.getOwnerComponent().getModel(" Nombredemimodelo")
dentro del View1.controller.js
onInit: funcion() {
var dataModel = this.getOwnerComponent().getModel("products_json");
this.getView().seModel(dataModel);
}
este metodo extrael el modelo directamente del component.js
La carga del modelo: usar el metodo attachRequestCompleted : con este evento, sabremos cuando el modelo ha sido cargado en su totalidad.
Binding a una vista
<Table id="idxxxx" items="{proucts_json>Productos}" > donde Productos es una entidad dentro del archivo JSON
...
<Label id="_IDGenLabelxx" text="{products_json>ProductId}" />
<Label id="_IDGenLabelxx" text="{products_json>Description}" />
<Label id="_IDGenLabelxx" text="{products_json>CurrencyCode}" />
<Label id="_IDGenLabelxx" text="{products_json>Price}" />
4. LA CREACION DE CONTROLES DE ENTRADA
https://sapui5.hana.ondemand.com/sdk/#/api/sap.m.Input
para este ejemplo creamos 1 imput textboxe y un select para ingresar producto y moneda. Atributos que ingresamos
- id
- value
- maxLength
- class
- placeholder
- showSuggestion: si ponemos true, VA A IR ACOMPANADO DEL ATRIBUTO suggestionItems
4.2 CREACION DEL CONTROL SELECT
class sap.m.Select
propiedades que seteamos en el ejemplo:
- selectedKey: guarda el valor del item selecionado. En nuestro caso CurrencyCode
- items: valores que vamos a mostrar en el combo, agregacion: Se debe agregar la librerira sap.ui.core.Item que tiene 2 prop importantes
- propiedad key: clave de campo
- propiedad text: descripcon del cambpo
4.3 La creacion del control Label
https://sapui5.hana.ondemand.com/sdk/#/api/sap.m.Label
creacion del boton:
sap.m.Button para atribut press va el evento a lanzar al presionar
5. LOS EVENTOS
listener o handler
6. EL COTEXTO Y LOS MENSAJES
el alcance se basa en funciones
el contexto es un puntero a un objeto en los datos del modelo.
Escanear / Compartir
Sobre el autor
Publicación académica de Roberto Hernan Santucho, en su ámbito de estudios para la Carrera Consultor SAP BTP Fiori.
Roberto Hernan Santucho
Profesión: Ingeniero en Sistemas - Mexico - Legajo: VA51C
✒️Autor de: 43 Publicaciones Académicas
🎓Egresado del módulo:
Certificación Académica de Roberto Santucho
Disponibilidad Laboral: FullTime 
