En el anterior artículo, “Data Binding en SAPUI5 (1 / 2)”, ya hablabamos de Data Binding en SAPUI5 y aprendimos a crear un modelo para asignar valores a los controles de forma dinámica.

En el artículo de hoy, os enseñamos a enlazar el modelo creado a los controles de nuestra aplicación SAPUI5.

Data Binding en SAPUI5

Una vez creado el modelo SAPUI5 es momento de enlazar el modelo a los controles correspondientes. La forma de hacer Data Binding depende del lenguaje de programación que se esté usando.

Data Binding en SAPUI5 usando JavaScript

Podemos realizarlo de forma enlazada, directamente al inicializar un control, asignando la propiedad del modelo entre paréntesis “{modelProperty}” o asignando la propiedad del modelo a la propiedad path del control.

var oItems = new sap.ui.core.Item({

key: "{id}",

text: {path: “nombre”},

});

Otra forma, es hacer el Data Binding, es posteriormente usando el método Javascript bindProperty:

oLabel.bindProperty(“text”,”nombre”);

Data Binding en SAPUI5 usando XML

En XML es posible usar las notaciones de inicialización anteriormente comentadas para Javascript, pero como atributos de XML de la siguiente manera:

<Button type="Accept" text="{/nombre}" ></Button>

<Text text="{path: 'nombre'}" wrapping="false"/>

Aggregation Binding en SAPUI5     

Ya comentamos en el artículo anterior que hay controles SAPUI5 que disponen de agregaciones: propiedades complejas a las cuales se pueden asignar otros controles más sencillos.

A las agregaciones también se les pueden enlazar datos procedentes de modelos, esto es lo que se conoce como Aggregation Binding.

Este tipo de binding se debe realizar en dos niveles. A continuación, lo explicamos siguiendo el ejemplo del ComboBox con el que hemos comenzado este artículo.

  • Enlazar la colección: En primer lugar, es necesario enlazar la agregación a una colección del modelo. En el ejemplo del ComboBox, se enlaza la agregación items con la colección temario del modelo, indicando la ruta absoluta de la colección en el modelo.
  • Enlazar cada propiedad: En el ejemplo, cada elemento del ComboBox se corresponde con un control de tipo Item con dos propiedades: key y A estas propiedades se les hace un binding con propiedades del modelo dentro de la colección temario referenciada en la agregación.

En este caso, la ruta a la propiedad es relativa a la de la agregación, por tanto “{nombre}” se corresponderá con cada elemento de la colección temario:  /temario[1]/nombre, /temario[2]/nombre, etc.

<ComboBox selectionChange="onChange"

items="{ path: 'tm>/temario'}">

<core:Item key="{tm>/key}" text="{tm>/nombre}" />

</ComboBox>

Sin duda, aplicando el Data Binding a nuestras aplicaciones SAPUI5 conseguiremos la potencia que realmente necesitamos para desarrollar aplicaciones móviles de negocio SAP.