Data Binding en SAPUI5 (1 / 2)

Después de conocer algunos controles SAPUI5  y ver qué posibilidades nos ofrecen, vamos a hablar del Data Binding en SAPUI5. Pero… ¿Qué es el Data Binding?

Si conoces Web Dynpro ABAP, el Data Binding te resultará familiar y es que el Data Binding en SAPUI5, al igual que en WebDynpro, consiste en la capacidad de poder enlazar datos procedentes de un modelo a valores o propiedades de controles SAPUI5 permitiendo la asignación dinámica en nuestras aplicaciones.

En el anterior artículo vimos ejemplos de controles SAPUI5 como por ejemplo un ComboBox al que le asignamos los posibles valores directamente.

<ComboBox selectionChange="onChange">
<items>
<core:Item key="Fiori" text="Fiori"/>
<core:Item key="UI5" text="UI5"/>
<core:Item key="GW" text="Gateway"/>
</items>
</ComboBox>

¿Pero cómo podríamos obtener estos valores dinamicamente?

Modelos SAPUI5

Creación del modelo SAPUI5

El origen de los datos que enlazaremos a nuestros controles UI5 será uno o varios modelos SAPUI5. Existen 3 tipos de modelos:

• Modelo JSON: Modelo de lado cliente basado en el formato JavaScript Object Notation y que permite Data Binding bidireccional. Permite realizar filtrado en la propia aplicación cliente.

var data = {"temario": [{
"id": "UI5",
"nombre": "SAPUI5"
}, {
"id": "FIO",
"nombre": "Fiori"
}, {
"id": "GW",
"nombre": "Gateway"
}]};
var model = new sap.ui.model.json.JSONModel(data);

• Modelo XML: Modelo de lado cliente basado en el formato XML y que permite Data Binding bidireccional. Permite realizar filtrado en la propia aplicación cliente.

var xml = “<?xml version=\”1.0\”?><temario><item><id>UI5</id><nombre>SAPUI5</nombre></item><item><id>FIO</id><nombre>Fiori</nombre></item><item><id>GW</id><nombre>Gateway</nombre></item></temario>”;
var model = new sap.ui.model.xml.XMLModel();
model.setXml(xml);

• Modelo OData: Modelo de lado servidor basado en formato OData. Soporta Data Binding bidireccional en modo experimental. No permite filtrar los datos en la propia aplicación cliente, se debe implementar el filtrado en el servidor y se utilizan query options para utilizar estos filtros.

var url = “http://services.odata.org/northwind/northwind.svc/”;
var model = new sap.ui.model.odata.ODataModel(url);

Asignación del modelo SAPUI5

Una vez que se crea un modelo SAPUI5, sea del tipo que sea, para posteriormente utilizarlo y realizar Data Binding es necesario asignarlo a la aplicación SAPUI5 en alguno de los niveles posibles:

• Aplicación (core): El modelo estará disponible desde cualquier punto de la aplicación

sap.ui.getCore().setModel(model);

• Vista: Sólo disponible para controles dentro de una vista SAPUI5 determinada.

miVista.setModel(model);

• Control: Se asigna de manera exclusiva a un control concreto, por ejemplo a una tabla.

sap.ui.getCore().byId("__xmlview0--Tabla1").setModel(model);

En el siguiente artículo aprenderemos a enlazar el modelo Data Binding en SAPUI5 a los controles correspondientes.