Data Binding en SAPUI5 (2 / 2)

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.

Esta entrada fue publicada en SAP España, SAPUI5, SAPUI5. Guarda el enlace permanente.
Si te ha gustado...Compártelo!

2 respuestas a Data Binding en SAPUI5 (2 / 2)

  1. MOROJAN dijo:

    buen dia, si quisiera leer datos de sap ERP ? por ejemplo la tabla de maestro de materiales MARA. Cuales serian los pasos ?

    • Lara Regidor dijo:

      Hola,

      el método para traspasar datos desde SAP a las aplicaciones SAPUI5 es utilizando servicios OData.

      Por lo que, si lo que quieres es mostrar o grabar datos de la tabla MARA, necesitas desarrollar un servicio OData con un EntitySet que tenga los campos de esta tabla y con la lógica para obtener o grabar datos de esa tabla. Puede que este otro artículo te interese: http://orekait.com/blog/que-es-sap-netweaver-gateway/

      Muchas gracias.

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *