El enlace de datos es una de las piedras angulares del desarrollo de SAPUI5, y comprender cómo usarlo de manera efectiva puede marcar la diferencia entre una aplicación que se siente viva y una que requiere una intervención manual constante.

La vinculación de propiedades es una de las formas centrales y más utilizadas de vinculación de datos en SAPUI5. Permite vincular directamente las propiedades de los elementos de la interfaz de usuario con datos de un modelo. Esto significa que los cambios en el modelo se aplican automáticamente a la interfaz de usuario sin necesidad de actualización manual.

Con el enlace de propiedades, se pueden controlar dinámicamente numerosas propiedades de elementos de la interfaz de usuario, como textos, números, colores, visibilidad y estado. Esto hace que las aplicaciones sean más flexibles y basadas en datos, ya que la visualización de la interfaz de usuario siempre se basa en los datos actuales. Al mismo tiempo, la aplicación sigue siendo clara, ya que los datos y la visualización están claramente separados entre sí. La sintaxis de enlace de propiedades es simple pero flexible.

Además de los enlaces básicos que acceden directamente a las propiedades en el modelo de datos, también admite casos de uso avanzados, como el uso de funciones de formato o expresiones complejas. La vinculación de propiedades también ofrece diferentes modos (por ejemplo, unidireccional o bidireccional) para adaptar el intercambio de datos a los requisitos de la aplicación.

Hay dos formas de aplicar el enlace de propiedad a un control de UI:

• Como parte de la definición de controles en una vista XML
• Usando javascript/TypeScript, ya sea dentro del objeto de configuración en el constructor de un control o en escenarios específicos usando el método bindProperty del control

En las siguientes secciones, veremos más de cerca cómo aplicar el enlace de propiedades y luego veremos en detalle qué función proporciona el marco SAPUI5 para realizar el enlace de propiedades.

Vinculación de propiedades con modelos con nombre

Una vez que se ha definido el enlace de propiedad, la propiedad se actualiza automáticamente cada vez que cambia el valor de la propiedad en el modelo enlazado y viceversa. Para nuestro ejemplo, supongamos que los siguientes datos están disponibles en un modelo JSON y el modelo JSON tiene el nombre de modelo de empleado.

let data = {

    "employee": {

      "firstName": "Max",

      "lastName": "Mustermann",

      "age": 40

    }

}

let model = new JSONModel(data);

this.getView().setModel(model, "employeeModel");

Si ahora desea vincular los datos del listado anterior directamente en la vista, se verá así.

El sintaxis compleja También se puede utilizar en un enlace de propiedad. Esta sintaxis permite definir información de enlace adicional, como una función de formato. La siguiente lista muestra, por ejemplo, cómo se puede aplicar una función de formato a un enlace.

Sin embargo, si desea crear los elementos de la interfaz de usuario en el controlador y configurar el enlace mediante programación, debe hacerlo como se muestra aquí.

let oInputFirstName = new Input({value: "{employeeModel>/employee/

firstName}"});

let oInputLastName = new Input({value: "{employeeModel>/employee/lastName}"});

let oInputAge = new Input({value: "{employeeModel>/employee/age}"});

La función bindProperty ofrece otra opción para configurar mediante programación el enlace a un control. Esto es particularmente útil si los enlaces solo se van a establecer en tiempo de ejecución en un momento determinado. Este método recibe el nombre de la propiedad de control de la interfaz de usuario a la que se establecerá un enlace como primer parámetro. El segundo parámetro es un objeto que contiene la siguiente información sobre la propiedad del modelo que se vinculará:

• camino: Camino de la propiedad.
• valor: Define un valor estático.
• modelo: Nombre del modelo; si no está presente, se considera el incumplimiento.
• suspendido: Define si el enlace se suspende y, por lo tanto, no se ejecuta automáticamente.
• utilizarRawValues: Define si el valor del enlace debe pasarse como valores sin formato. En este caso no se tiene en cuenta el tipo de piezas de encuadernación.
• utilizar valores internos: Define si los parámetros de la función del formateador deben pasarse como valores primitivos de JavaScript relacionados.
• Tipo: Define el tipo que se debe utilizar para el valor de la propiedad de enlace.
• tipo de objetivo: Define el tipo que se debe utilizar cuando se llama a una función de formateador.
• opciones de formato: Define las opciones de formato que se deben aplicar al valor. Las opciones de formato disponibles difieren según el tipo que se utilice.
• restricciones: Define las restricciones con las que se debe comprobar el valor. Las restricciones disponibles difieren según el tipo utilizado.
• Modo: Define el modo de enlace que se debe utilizar (unidireccional, bidireccional o único).
• parámetros: Mapa de parámetros adicionales para este enlace específico. El nombre y los rangos de valores dependen de la implementación del modelo utilizado.
• eventos: Mapa de funciones del controlador de eventos.
• regiones: Matriz de objetos de información de enlace para las partes de un enlace compuesto.

Ahora, supongamos que hay una entrada como la que se muestra aquí.

    

Para establecer un enlace a esta entrada, puede proceder como se muestra.

let oInputFirstName = this.getView().byId("inputFirstName");

oInputFirstName.bindProperty("value", {path: "employeeModel>/employee/

firstName"});

También se puede eliminar un enlace de un elemento de la interfaz de usuario mediante el método unbindProperty. Este método recibe el nombre de la propiedad de control de la interfaz de usuario cuyo enlace se eliminará como primer parámetro. Además, se puede pasar un booleano como segundo parámetro, que define si el valor predeterminado debe restaurarse después de eliminar el enlace. Si desea eliminar el enlace de la entrada utilizada anteriormente, puede hacerlo como en este listado.

let oInputFirstName = this.getView().byId("inputFirstName");

oInputFirstName.unbindProperty("value");

Formato de valores de propiedad

Los valores en los enlaces generalmente se muestran en un formato interno. Sin embargo, este formato a menudo no es muy fácil de usar. Por lo tanto, es posible implementar funciones de formato y aplicarlas al enlace. Estas funciones permiten realizar cualquier formateo basado en el valor inicial y finalmente mostrar el valor formateado. Esto es particularmente útil cuando es necesario mostrar valores numéricos o de fecha. SAPUI5 ofrece dos opciones diferentes para realizar este formateo:

• Uso de funciones de formato para conversión unidireccional
• Usar tipos de datos en enlaces bidireccionales

Los tipos de datos también se pueden utilizar para validar la entrada del usuario en función de restricciones definidas.

Uso de funciones de formato

Para utilizar una función de formato, se debe especificar explícitamente en el enlace de propiedad en la vista XML e implementarse en el controlador. Una implementación de ejemplo de una función de formato que formatea un valor de fecha puede verse así.

sap.ui.definir([

    "sap/ui/core/mvc/Controller",

    "sap/ui/model/json/JSONModel"

]función (Controlador, JSONModel) {

    "use strict";

    return Controller.extend("at.clouddna.demo.App", {

      …

      formatDate: function(fValue) {

        if (fValue) {

          return new Date(fValue).toLocaleDateString();

        }

        return "";

        }

      }  

    ));

});

La siguiente lista muestra cómo se puede utilizar la función de formato en el enlace en una vista XML. Para hacer esto, el nombre de la función debe especificarse en el enlace de la propiedad del formateador. El contexto this de una función de formateador generalmente se establece en el control (u objeto administrado) que tiene el enlace. Sin embargo, en las vistas XML, la función del formateador generalmente se define en el controlador de la vista. Para hacer referencia a esta función, el nombre del formato está precedido por un punto (.) (por ejemplo, {formatter: ‘.formatDate’}). Esto garantiza que este contexto del formateador esté vinculado al controlador.

    

Si está utilizando JavaScript, puede pasar la función de formateador como el tercer parámetro = del método bindProperty o definirla en la información de enlace con la clave de formateador. La función formateadora recibe el valor a formatear como único parámetro y se ejecuta en el contexto del control. Esto le da acceso a otras propiedades del control y a los datos del modelo. Este listado muestra cómo se puede integrar un formateador usando bindProperty o directamente en el constructor.

let formatterFunction = function(sValue){…};

oInput.bindProperty("value", "model>/someDateField", formatterFunction);

let oControl = new Input({

    value: {

      path: '/someDateField',

      model: 'model',

      formatter: formatterFunction

    }

});

Debido a que la función de formateo puede contener cualquier código, se puede utilizar tanto para formatear como para conversiones de tipos. El tipo de retorno de la función no necesariamente tiene que ser idéntico al tipo del valor a convertir. Por ejemplo, los formateadores también se pueden utilizar para devolver un estado o icono correspondiente basado en una bandera booleana.

Enlaces refrescantes

El marco solo actualiza un enlace si cambia una de las propiedades contenidas en la definición del enlace. Sin embargo, si el formateador accede a propiedades adicionales que no están definidas en el enlace, el marco no reconoce esta dependencia y, por lo tanto, podría pasar por alto las actualizaciones necesarias. Para evitar esto, se debe crear un enlace compuesto que incluya explícitamente todas las propiedades relevantes, incluso si provienen de modelos diferentes.

Usar tipos de datos

El uso de tipos de datos permite formatear, analizar y validar los datos para verificar si los datos ingresados ​​están sujetos a restricciones definidas. SAPUI5 ya ofrece una gran cantidad de tipos de datos como estándar. Los siguientes son los tipos de datos del espacio de nombres sap.ui.model.type:

• Booleano
• Divisa
• Fecha
• Intervalo de fecha
• FechaHora
• Intervalo de fecha y hora
• Tamaño de archivo
• Flotar
• Entero
• Cadena
• Tiempo
• Intervalo de tiempo
• Unidad

También están disponibles los siguientes tipos de datos del espacio de nombres sap.ui.model.odata.type:

• Booleano
• Byte
• Divisa
• Fecha
• FechaHora
• FechaHoraBase
• Desplazamiento de fecha y hora
• FechaHoraConZona horaria
• Decimal
• Doble
• guía
• internacional
• Int16
• Int32
• Int64
• Tipo de datos O
• Crudo
• SByte
• Soltero
• Arroyo
• Tiempo
• Hora del día
• Unidad

Los tipos de datos del soporte del espacio de nombres sap.ui.model.odata.type Odatos V2 y V4. Al mismo tiempo, estos tipos de datos representan los tipos de datos OData EDM (modelo de datos de entidad).

Si los tipos de datos contenidos en el estándar no son suficientes, también puede implementar sus propios tipos de datos. Para hacer esto, se debe crear una clase que herede del tipo base sap.ui.model.SimpleType e implemente los métodos correspondientes de formatValue, parseValue y validarValue.

Para definir un tipo de datos en un enlace dentro de una vista XML, esto debe especificarse en la propiedad correspondiente en el enlace.

    

Los parámetros formatOptions y constraints se pueden proporcionar en consecuencia para que los valores se puedan validar o formatear en un enlace. Los posibles parámetros que se pueden definir dentro de los dos parámetros dependen de los tipos utilizados. El siguiente listado muestra un ejemplo en el que se definen tanto las opciones de formato como las restricciones para sap.ui. modelo.tipo.Flotador. En este caso, las opciones de formato definen que el valor siempre se muestre con un mínimo de dos y un máximo de tres decimales. Las restricciones definen que sólo los valores del 5 al 10 son válidos.

    

El mismo comportamiento que en la codificación XML también se puede lograr mediante la codificación correspondiente en el controlador (ver lista siguiente). Las opciones de formato deben pasarse como primer parámetro y las restricciones como segundo parámetro en el constructor del tipo.

let control = new Input({

    value: {

      path: "model>/someFloatField",

      type: new sap.ui.model.type.Float({minFractionDigits: 2,

maxFractioDigits: 3}, { minimum: 5, maximum: 10})

    }

});

Para implementar un tipo personalizado, como ya se mencionó, se debe crear una subclase de sap.ui.model.SimpleType, y este tipo personalizado luego se puede usar de la misma manera que los tipos predefinidos. Aquí se puede ver una implementación esquemática de un tipo personalizado.

var MyCustomType =

sap.ui.model.type.SimpleType.extend("at.clouddna.MyCustomType", {

    formatValue: function(oValue) {

          return oValue;

    },

    parseValue: function(oValue) {

      return oValue;

    },

    validateValue: function(oValue) {

      if (oValue

        throw new sap.ui.model.ValidateException("Invalid Input!");

      }

    }

});

Reanudación de enlaces suspendidos

Para comprobar si un enlace está suspendido, puede utilizar el método isSuspended de la clase sap.ui.model.Binding. Si se suspende el enlace, se puede utilizar el método de reanudación para activar el enlace. Esto desencadena la solicitud correspondiente, lo que hace que la vinculación ya no se suspenda.

Conclusión

La vinculación de propiedades en SAPUI5 brinda a los desarrolladores una forma potente y flexible de mantener la interfaz de usuario sincronizada con los datos de la aplicación. Ya sea que esté trabajando directamente en vistas XML o estableciendo enlaces mediante programación en el controlador, el marco proporciona las herramientas para manejar todo, desde la simple visualización de valores hasta el formato complejo y la lógica de validación. Al aprovechar las funciones de formato y los tipos de datos (o crear los suyos propios cuando las opciones estándar no son suficientes), puede asegurarse de que los datos siempre se presenten con precisión y en un formato que tenga sentido para el usuario. A medida que cree aplicaciones más complejas, una comprensión sólida de la vinculación de propiedades le servirá como base confiable para todo lo demás.

Nota del editor: Esta publicación ha sido adaptada de una sección del libro. SAPUI5: la guía completa por René Glavanovits, Martín Koch, Daniel Kranczy Maximiliano Olzinger. René es un consultor y desarrollador de SAP que se especializa en las últimas tecnologías de SAP. Martin imparte formación para SAP y ha desarrollado cuatro cursos de formación sobre los temas de SAPUI5, SAP Fiori, integración en la nube y seguridad en la nube. Daniel es un desarrollador y consultor de software que se centra en el desarrollo full-stack. Maximilian es desarrollador y consultor de software.