Qué es el concepto de binding ?
Hace unos años, en la programación de aplicaciones visuales, debíamos asignar a cada control de nuestro formulario su correspondiente valor, o asignar el valor de dicho control a una variable o propiedad de objeto en el caso de que el control permitiera la edición de datos por parte del usuario.
Esta asignación podía resultar tediosa en formularios que requirieran la presentación/edición de muchos datos, y en el caso de que cambiara nuestro modelo de negocio, requería bastante trabajo de programación. Además, cualquier cambio de valores en nuestro modelo, requería ‘refrescar’ dicha asignación de valores.
Con la llegada del concepto de ‘Binding’, toda la tarea de interrelación de nuestro modelo de datos con la ‘vista’ de datos del usuario, se agiliza enormemente, delegando parte de la gestión (asignación de datos bidireccional, refresco al cambiar el modelo, etc…).
No es el objetivo de este post profundizar más en el concepto de binding, para ello encontrareismuchas referencias en internet. Nuestro objetivo es el de mostraros la potencia del binding con un ejemplo en SAPUI5.
A continuación, mostramos un esquema, donde de una manera conceptual, nos da una primera aproximación al concepto de binding.
Ejemplo de Binding: Rellenar una tabla a partir de un modelo.
Independientemente de cual sea el lenguaje y/o plataforma con el que estemos habituados a trabajar, en algún momento todos hemos tenido que generar una tabla o matriz de datos en disposición de columnas y filas, para presentar una información en forma de colección al usuario.
El procedimiento siempre es el mismo, crear las columnas, asginándoles un título, y crear una fila para cada elemento de la colección, asociándo cada campo a su columna.
A continuación, procederemos a hacer ‘magia’, y veremos como desde SAPUI5, con muy poco código, construiremos una tabla de forma dinámica, ahorrándonos los famosas ‘iteraciones’ por cada una de las filas.
Consideraciones previas:
Para construir dicho ejemplo, utilizaremos la librería sap.ui.table, la cual deberemos indicar que cargue al cargar nuestro ejemplo. En nuestro index.html tendremos:
Pasemos a continuación a mostrar el código de creación de la tabla. Para este ejemplo no hemos sido ‘puristas’ y hemos puesto todo el código en el método createContent de la vista. No sería correcto siguiendo el patrón MVVM, pero es solo a modo de ejemplo.
Hemos añadido comentarios en aquellos puntos del código que consideramos importantes:
public createContent(mainController: any) {
//Creamos un json con la definición de las columnas
var columnData = [
{columnId: "name"},
{columnId: "surname"},
{columnId: "age"},
{columnId: "city"},
{columnId: "id"}
];
//Creamos un json con el modelo de datos. Observar que el nombre de las propiedades deben de coincidir con el definido en las columnas
var data = [
{ name: "Jordi",surname: "Vila",age: "37",city: "Barcelona",id: "1"},
{ name: "Antonio",surname: "Pérez",age: "64",city: "Madrid",id: "2"}
];
//Creamos un objeto JSONModel, con dos propiedades: columns para el json de columnas y rows para el json del modelo de datos
var model = new sap.ui.model.json.JSONModel();
model.setData({
columns: columnData,
rows: data
});
//Definimos las propiedades de la tabla
var table = new sap.ui.table.Table({
title: "newuibcn Binding sample",showNoData: true,columnHeaderHeight: 10,visibleRowCount: 7
});
//Asginamos el modelo de datos a la tabla table.setModel(model);
//Relacionamos las columnas, donde se creará un nuevo objeto sap.ui.table.column para cada columna (Binding con 'columns' del modelo)
table.bindColumns("/columns", (id, context) => {
var columnId = context.getObject().columnId;
return new sap.ui.table.Column({
id: columnId,label: columnId,template: columnId,sortProperty: columnId,filterProperty: columnId
});
});
//Hacemos el binding de las filas, a través de la propiedad rows del modelo.
table.bindRows("/rows");
//Devolvemos la tabla para que se inserte en el Div correspondiente return table;
}
Véase el poder del ‘binding’. Haciendo los enlaces a nivel de columnas y tablas, rellenamos nuestra table, sin necesidad de iterar por todos los items de nuestro modelo.
Vemos a continuación el resultado:
