
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
<mvc:View controllerName="ns.project1.controller.View1" xmlns:mvc="sap.ui.core.mvc" xmlns="sap.m">
<Page id="page" title="{i18n>title}">
<content>
<HBox id="hbox0" width="100%">
<items>
<VBox id="vbox0" width="100%" direction="Column">
<items>
<Label text="Nombre" width="100%" id="label1" />
<Input id="Nombre" change="processFullName" />
</items>
</VBox>
<VBox id="vbox1" width="100%">
<items>
<Label text="Apellido" width="100%" id="label2" />
<Input id="Apellido" change="processFullName" />
</items>
</VBox>
</items>
</HBox>
<VBox id="vbox3" width="100%" direction="Column">
<items>
<Label text="Nombre y Apellido" width="100%" id="label0" />
<Input id="FullName" editable="false" />
</items>
</VBox>
</content>
</Page>
</mvc:View>
- 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
sap.ui.define([
"sap/ui/core/mvc/Controller",
"sap/ui/model/json/JSONModel"
],
function(Controller, JSONModel) {
"use strict";
return Controller.extend("ns.project1.controller.View1", {
onInit: function() {
var oModel = new JSONModel(
{"FirstName": "Roberto",
"LastName": "Santucho"
});
//Obtenemos los valores del modelo
var oFirstName = oModel.getProperty("/FirstName");
var oLastName = oModel.getProperty("/LastName");
//Seteamos esos valores al modelo
this.getView().byId("Nombre").setValue(oFirstName);
this.getView().byId("Apellido").setValue(oLastName);
this.getView().byId("FullName").setValue(oFirstName + "" + oLastName );
},
processFullName: function(){
var oFirstName = this.getView().byId("Nombre").getValue(oFirstName);
var oLastName = this.getView().byId("Apellido").getValue(oLastName);
this.getView().byId("FullName").setValue(oFirstName + "" + oLastName );
}
});
});
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)
sap.ui.define([
"sap/ui/core/mvc/Controller",
"sap/ui/model/json/JSONModel"
],
function(Controller, JSONModel) {
"use strict";
return Controller.extend("ns.project1.controller.View1", {
onInit: function() {
var oModel = new JSONModel(
{"FirstName": "Roberto",
"LastName": "Santucho"
});
// ------BORRAMOS LO REMARCADO EN NARANJA: LOS PASOS PARA OBTENER DATOS DEL MODELO Y LOS PASOS
PARA ESTABLECER ESTOS VALORES DE EN LOS CONTROLES SAPUI5--------------------------------------
//Obtenemos los valores del modelo
var oFirstName = oModel.getProperty("/FirstName");
var oLastName = oModel.getProperty("/LastName");
//Seteamos esos valores al modelo
this.getView().byId("Nombre").setValue(oFirstName);
this.getView().byId("Apellido").setValue(oLastName);
this.getView().byId("FullName").setValue(oFirstName + "" + oLastName );
this.getView().setModel(oModel); <--se crea una instancia y se establece el modelo a la vista
},
processFullName: function(){
var oFirstName = this.getView().byId("Nombre").getValue(oFirstName);
var oLastName = this.getView().byId("Apellido").getValue(oLastName);
this.getView().byId("FullName").setValue(oFirstName + "" + oLastName );
}
});
});
- 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.
<mvc:View controllerName="ns.project1.controller.View1" xmlns:mvc="sap.ui.core.mvc" xmlns="sap.m">
<Page id="page" title="{i18n>title}">
<content>
<HBox id="hbox0" width="100%">
<items>
<VBox id="vbox0" width="100%" direction="Column">
<items>
<Label text="Nombre" width="100%" id="label1" />
<Input id="Nombre" change="processFullName" value="{/FirstName}" />
</items>
</VBox>
<VBox id="vbox1" width="100%">
<items>
<Label text="Apellido" width="100%" id="label2" />
<Input id="Apellido" change="processFullName" value="{/LastName}"/>
</items>
</VBox>
</items>
</HBox>
<VBox id="vbox3" width="100%" direction="Column">
<items>
<Label text="Nombre y Apellido" width="100%" id="label0" />
<Input id="FullName" value="{/FirstName} {/LastName} " editable="false" />
</items>
</VBox>
</content>
</Page>
</mvc:View>
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");