✒️SAP BTPFIORI / Los conceptos de enlace de datos en SAPUI5 Por Roberto Santucho
Los conceptos de enlace de datos en SAPUI5

1. EL CONCEPTO DE DATA BINDING
- NOS PERMITE AUTOMATIZAR EL MOVIMIENTO DE DATOS DE LA VISTA AL MODELO Y VECEVERSA.
- coniste en la capacidad de enlazar datos de un modelo A VALORE O PROPIEDADES DE CONTROLES SAPUI5
- BENEFICIA EN QUE NO NECESITAMOS ESCRIBIR CODIGO EXPLICITAMENTE PARA DICHO CRUD
SAPUI5 adminte 4 modelos de binding
- modelo JSON
- modelo XML
- modelo de recursos
- modelo OData
independientemente, los pasos para el binding son los mismos
- definicion de datos
- crear una instancia del modelo de enlace de datos
- Vincular un modelo al control de la interfaz de usuario
1.1 LOS TIPOS DE BINDING
- One-way binding: los cambio en el modelo se transportan a la UI vinculada a los controles, Y NO EN VICEVERSA.
- Two-way binding: bidireccional
- One time binding: adecuado para datos que rara vez cambian mientras se ejecuta a aplicacion: POR EJEMPLO, PARA TEXTOS TRADUCIBLES A CONTROLES SAPUI5.
- Aggregation Binding: para los controles que tienen varios controles secundarios, por ejemplo, tablas, campos desplegables y listas. Este tipo de binding se debe realizar en dos niveles
- Enlazar la coleccion
- Enlazar cada propiedad
2. LA CREACION DE UN PROYECTO Y EL BINDING
- Crear desde template > freestyle
- editar webap/view/View1.view.xml: creamos 3 textboxes con sus ids, el modelo tiene los valores para los 2 primeros, 3ro concatenara los 2 primeros
- en el archivo del controlador de la vista:
- en la funcion init
- se crea el modelo JSON y
- se le asigna al contenido de textboxes 1 y 2.
- Ademas, si se cambia el contenido de los nombre o apellido, se dispara el evento change que es procesado por la funcion processFullName que tambien la incluimos en este archivo controlador
- en la funcion init
2.1 LA TECNICA DE VINCULACION DE ELEMENTOS: podemos vincular las diversas propiedades de control SAPUI5 a los datos del modelo. Son 2 pasos
- Establecer el modelo en el control (o en cualquiera de sus controles principales)
- Asociar la propiedad del control SAPUI5 con un valor en el modelo: PODEMOS NOTAR QUE LOS CONTROLES DE LA VISTA YA NO TIENE QUE USAR LOS METODOS PARA ACTUALIZAR LOS DATOS EN EL CONTROLADOR (REMARCADO EN NARANJA) DEBIDO AL ENLACE BIDIRECCIONAL PREDETERMINADO DEL MODELO JSON.
2.2 EL ENLACE DE AGREGACION: Relevante para los controles que tienen varios controles secundarios, como listas, tabla y campos desplegables.
<List
id="list"
...
items={
path: '/SalesOrderSet',
...


BINDING


<items>
<ObjectListItem
type="Navigation"
press=".onSelectionChange"
title="{SalesOrderID}"
..
numberUnit = "{CurrencyCode}">
</ObjectListItem>
</items>
El elemento Lista tiene un atributo de elementos y un elemento de elementos anidados:
- el atributo items vincula los elementos secundarios de la matriz ordenes de venta de nuestro modelo OData a la lista: establece la ruta principal para el enlace de todos los elementos de la lista CONTENIDOS Y SUS DESCENDIENTES. Ademas, debe declarar un elemento anidado.
- El elemento de elementos anidados en nuestro caso contiene un OBjectListItem, esto sirve como plantilla para crar filas de lista individuales.
3. LA TECNICA DE VINCULACION o ENLACE DE ELEMENTOS: nos permite vincular los controles SAPUI5 a un elemento de datos en un modelo para que se cree un contexto de enlace PARA EL CONTROL Y TODOS SUS HIJOS.
- RELACIONADO AL MODELO MAESTRO-DETALLE
- se realiza generalmente en la parte del controlador en los controladores de eventos para establecer nuevos contextos vinculantes.
4. COMO REALIZAR OPERACIONES AVANZADAS COMO FILTRADO, CLASIFICACION Y AGRUPACION
- FILTROS el filter se aplica al binding entre el model y la vista (ejemplo, filtros para buscar datos. Clase sap.ui.model.Filter y sap.ui.model.FilterOperator
- ORDENAR Y AGRUPAR DATOS: sap.ui.model.Sorter
5. LA HERENCIA DEL MODELO: no se recomienda asignar un modelo al nucleo en una aplicacion de produccion por motivos de rendimiento.
Especificar un nombre al configurar un modelo explicitamento:
var oView = this.getView();
oView.setModelo(oModel, "mainModel")
en el manifest tambien se pueden espicificar los modelos ahi
5.2 EL MODELO DE RECURSO
la instancia del modelo de recurso
oResourceModel = new sap.ui.model.resource.ResourceModel({
bundleName="localizationDemo,i,18n.i18n", locale:"en"}
Setear el modelo en el controlador SAPUI5
oView.setModel (oResourceModel, "i18n");
 
 
 
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


















