✒️SAP BTPFIORI / Los conceptos de enlace de datos en SAPUI5 Por Roberto Santucho

Selector Alummnos / Empresas

CVOSOFT UNITED STATES OF AMERICA | 17 años de ingeniería dedicados a formación profesional de Consultores SAP | +info

Los conceptos de enlace de datos en SAPUI5

Los conceptos de enlace de datos en SAPUI5

1. EL CONCEPTO DE DATA BINDING

  • NOS PERMITE AUTOMATIZAR EL MOVIMIENTO DE DATOS DE LA VISTA AL MODELO Y VECEVERSA.
  • coniste en la capacidad de enlazar datos de un modelo A VALORE O PROPIEDADES DE CONTROLES SAPUI5
  • BENEFICIA EN QUE NO NECESITAMOS ESCRIBIR CODIGO EXPLICITAMENTE PARA DICHO CRUD

SAPUI5 adminte 4 modelos de binding

  1. modelo JSON
  2. modelo XML
  3. modelo de recursos
  4. modelo OData

independientemente, los pasos para el binding son los mismos

  • definicion de datos
  • crear una instancia del modelo de enlace de datos
  • Vincular un modelo al control de la interfaz de usuario

1.1 LOS TIPOS DE BINDING

  • One-way binding: los cambio en el modelo se transportan a la UI vinculada a los controles, Y NO EN VICEVERSA.
  • Two-way binding: bidireccional
  • One time binding: adecuado para datos que rara vez cambian mientras se ejecuta a aplicacion: POR EJEMPLO, PARA TEXTOS TRADUCIBLES A CONTROLES SAPUI5.
  • Aggregation Binding: para los controles que tienen varios controles secundarios, por ejemplo, tablas, campos desplegables y listas. Este tipo de binding se debe realizar en dos niveles
    • Enlazar la coleccion
    • Enlazar cada propiedad

2. LA CREACION DE UN PROYECTO Y EL BINDING

  • Crear desde template > freestyle
  • editar webap/view/View1.view.xml: creamos 3 textboxes con sus ids, el modelo tiene los valores para los 2 primeros, 3ro concatenara los 2 primeros
<mvc:View controllerName="ns.project1.controller.View1" xmlns:mvc="sap.ui.core.mvc" xmlns="sap.m">
<Page id="page" title="{i18n>title}">
<content>
<HBox id="hbox0" width="100%">
<items>
<VBox id="vbox0" width="100%" direction="Column">
<items>
<Label text="Nombre" width="100%" id="label1" />
<Input id="Nombre" change="processFullName" />
</items>
</VBox>
<VBox id="vbox1" width="100%">
<items>
<Label text="Apellido" width="100%" id="label2" />
<Input id="Apellido" change="processFullName" />
</items>
</VBox>
</items>
</HBox>
<VBox id="vbox3" width="100%" direction="Column">
<items>
<Label text="Nombre y Apellido" width="100%" id="label0" />
<Input id="FullName" editable="false" />
</items>
</VBox>
</content>
</Page>
</mvc:View>
  • en el archivo del controlador de la vista:
    • en la funcion init
      • se crea el modelo JSON y
      • se le asigna al contenido de textboxes 1 y 2.
    • Ademas, si se cambia el contenido de los nombre o apellido, se dispara el evento change que es procesado por la funcion processFullName que tambien la incluimos en este archivo controlador
sap.ui.define([
"sap/ui/core/mvc/Controller",
"sap/ui/model/json/JSONModel"
],
function(Controller, JSONModel) {
"use strict";
return Controller.extend("ns.project1.controller.View1", {
onInit: function() {
var oModel = new JSONModel(
{"FirstName": "Roberto",
"LastName": "Santucho"

});
//Obtenemos los valores del modelo
var oFirstName = oModel.getProperty("/FirstName");
var oLastName = oModel.getProperty("/LastName");

//Seteamos esos valores al modelo
this.getView().byId("Nombre").setValue(oFirstName);
this.getView().byId("Apellido").setValue(oLastName);
this.getView().byId("FullName").setValue(oFirstName + "" + oLastName );
},

processFullName: function(){
var oFirstName = this.getView().byId("Nombre").getValue(oFirstName);
var oLastName = this.getView().byId("Apellido").getValue(oLastName);
this.getView().byId("FullName").setValue(oFirstName + "" + oLastName );
}
});
});

2.1 LA TECNICA DE VINCULACION DE ELEMENTOS: podemos vincular las diversas propiedades de control SAPUI5 a los datos del modelo. Son 2 pasos

  • Establecer el modelo en el control (o en cualquiera de sus controles principales)
sap.ui.define([
"sap/ui/core/mvc/Controller",
"sap/ui/model/json/JSONModel"
],
function(Controller, JSONModel) {
"use strict";
return Controller.extend("ns.project1.controller.View1", {
onInit: function() {
var oModel = new JSONModel(
{"FirstName": "Roberto",
"LastName": "Santucho"

});
// ------BORRAMOS LO REMARCADO EN NARANJA: LOS PASOS PARA OBTENER DATOS DEL MODELO Y LOS PASOS
PARA ESTABLECER ESTOS VALORES DE EN LOS CONTROLES SAPUI5--------------------------------------
//Obtenemos los valores del modelo
var oFirstName = oModel.getProperty("/FirstName");
var oLastName = oModel.getProperty("/LastName");

//Seteamos esos valores al modelo
this.getView().byId("Nombre").setValue(oFirstName);
this.getView().byId("Apellido").setValue(oLastName);
this.getView().byId("FullName").setValue(oFirstName + "" + oLastName );
this.getView().setModel(oModel); <--se crea una instancia y se establece el modelo a la vista
},

processFullName: function(){
var oFirstName = this.getView().byId("Nombre").getValue(oFirstName);
var oLastName = this.getView().byId("Apellido").getValue(oLastName);
this.getView().byId("FullName").setValue(oFirstName + "" + oLastName );
}
});
});
  • Asociar la propiedad del control SAPUI5 con un valor en el modelo: PODEMOS NOTAR QUE LOS CONTROLES DE LA VISTA YA NO TIENE QUE USAR LOS METODOS PARA ACTUALIZAR LOS DATOS EN EL CONTROLADOR (REMARCADO EN NARANJA) DEBIDO AL ENLACE BIDIRECCIONAL PREDETERMINADO DEL MODELO JSON.
<mvc:View controllerName="ns.project1.controller.View1" xmlns:mvc="sap.ui.core.mvc" xmlns="sap.m">
<Page id="page" title="{i18n>title}">
<content>
<HBox id="hbox0" width="100%">
<items>
<VBox id="vbox0" width="100%" direction="Column">
<items>
<Label text="Nombre" width="100%" id="label1" />
<Input id="Nombre" change="processFullName" value="{/FirstName}" />
</items>
</VBox>
<VBox id="vbox1" width="100%">
<items>
<Label text="Apellido" width="100%" id="label2" />
<Input id="Apellido" change="processFullName" value="{/LastName}"/>
</items>
</VBox>
</items>
</HBox>
<VBox id="vbox3" width="100%" direction="Column">
<items>
<Label text="Nombre y Apellido" width="100%" id="label0" />
<Input id="FullName" value="{/FirstName} {/LastName} " editable="false" />
</items>
</VBox>
</content>
</Page>
</mvc:View>

2.2 EL ENLACE DE AGREGACION: Relevante para los controles que tienen varios controles secundarios, como listas, tabla y campos desplegables.

<List

id="list"

...

items={

path: '/SalesOrderSet',

...

BINDING

<items>

<ObjectListItem

type="Navigation"

press=".onSelectionChange"

title="{SalesOrderID}"

..

numberUnit = "{CurrencyCode}">

</ObjectListItem>

</items>

El elemento Lista tiene un atributo de elementos y un elemento de elementos anidados:

  • el atributo items vincula los elementos secundarios de la matriz ordenes de venta de nuestro modelo OData a la lista: establece la ruta principal para el enlace de todos los elementos de la lista CONTENIDOS Y SUS DESCENDIENTES. Ademas, debe declarar un elemento anidado.
  • El elemento de elementos anidados en nuestro caso contiene un OBjectListItem, esto sirve como plantilla para crar filas de lista individuales.

3. LA TECNICA DE VINCULACION o ENLACE DE ELEMENTOS: nos permite vincular los controles SAPUI5 a un elemento de datos en un modelo para que se cree un contexto de enlace PARA EL CONTROL Y TODOS SUS HIJOS.

  • RELACIONADO AL MODELO MAESTRO-DETALLE
  • se realiza generalmente en la parte del controlador en los controladores de eventos para establecer nuevos contextos vinculantes.

4. COMO REALIZAR OPERACIONES AVANZADAS COMO FILTRADO, CLASIFICACION Y AGRUPACION

  • FILTROS el filter se aplica al binding entre el model y la vista (ejemplo, filtros para buscar datos. Clase sap.ui.model.Filter y sap.ui.model.FilterOperator
  • ORDENAR Y AGRUPAR DATOS: sap.ui.model.Sorter

5. LA HERENCIA DEL MODELO: no se recomienda asignar un modelo al nucleo en una aplicacion de produccion por motivos de rendimiento.

Especificar un nombre al configurar un modelo explicitamento:

var oView = this.getView();

oView.setModelo(oModel, "mainModel")

en el manifest tambien se pueden espicificar los modelos ahi

5.2 EL MODELO DE RECURSO

la instancia del modelo de recurso

oResourceModel = new sap.ui.model.resource.ResourceModel({

bundleName="localizationDemo,i,18n.i18n", locale:"en"}

Setear el modelo en el controlador SAPUI5

oView.setModel (oResourceModel, "i18n");


 

Escanear / Compartir

 

 


Sobre el autor

Publicación académica de Roberto Hernan Santucho, en su ámbito de estudios para la Carrera Consultor SAP BTP Fiori.

Roberto Hernan Santucho

Profesión: Ingeniero en Sistemas - Mexico - Legajo: VA51C

✒️Autor de: 43 Publicaciones Académicas

🎓Egresado del módulo:

Certificación Académica de Roberto Santucho

✒️+Comunidad Académica CVOSOFT

Continúe aprendiendo sobre el tema "Los conceptos de enlace de datos en SAPUI5" de la mano de nuestros alumnos.

SAP Junior

Los Conceptos de enlace de datos en SAPUI5 El data binding o enlace de datos Es uno de los conceptos más importantes y útiles en SAPUI5. Consiste en la capacidad de vincular datos de un modelo con las propiedades de los controles de la interfaz de usuario, permitiendo que los valores se asignen y actualicen de forma dinámica sin necesidad de escribir mucho código. Básicamente, se relaciona el nombre de una propiedad del modelo con una propiedad de un control SAPUI5, y el framework se encarga de mantener esa relación. Gracias a esto, un uso eficiente del binding reduce significativamente la cantidad de código que se debe escribir en una aplicación. SAPUI5 admite cuatro tipos de modelos...

Acceder a esta publicación

Creado y Compartido por: Candela Analia Nuñez

*** CVOSOFT - Nuestros Alumnos - Nuestro Mayor Orgullo como Academia ***

SAP SemiSenior

Los conceptos de enlace de datos en SAPUI5 1. Introducción El enlace de datos o data binding es uno de los conceptos fundamentales en el desarrollo con SAPUI5. Permite conectar los modelos de datos con los controles de la interfaz de usuario (UI), de modo que cualquier cambio en los datos se refleje automáticamente en la vista y viceversa. Gracias al data binding, SAPUI5 ofrece un desarrollo más rápido, dinámico y coherente, eliminando la necesidad de manipular manualmente los valores entre la capa lógica y la capa visual. 2. Concepto general de data binding El data binding consiste en establecer una relación entre una fuente de datos (modelo) y un destino (control o propiedad del control)....

Acceder a esta publicación

Creado y Compartido por: Jose Rodrigo Baz Suarez / Disponibilidad Laboral: FullTime + Carta Presentación

*** CVOSOFT - Nuestros Alumnos - Nuestro Mayor Orgullo como Academia ***

SAP Master

En concepto de data binding: Data Binding es el mecanismo que permite enlazar los datos del modelo con los controles de la interfaz de usuario (UI), de forma que cualquier cambio en los datos se refleje automáticamente en la vista, y viceversa (en algunos casos). Es como un "puente" entre el modelo (datos) y la vista (lo que el usuario ve). Modelo JSON Modelo XML Modelo de recursos Modelo Odata Tipos de binding Tipo de Binding Dirección Descripción One-Way Binding Modelo → Vista Los datos fluyen desde el modelo hacia la UI. Si cambian los datos del modelo,...

Acceder a esta publicación

Creado y Compartido por: Claudia Bibiana Monsalve Lopez

*** CVOSOFT - Nuestros Alumnos - Nuestro Mayor Orgullo como Academia ***

1. EL CONCEPTO DE DATA BINDING NOS PERMITE AUTOMATIZAR EL MOVIMIENTO DE DATOS DE LA VISTA AL MODELO Y VECEVERSA. coniste en la capacidad de enlazar datos de un modelo A VALORE O PROPIEDADES DE CONTROLES SAPUI5 BENEFICIA EN QUE NO NECESITAMOS ESCRIBIR CODIGO EXPLICITAMENTE PARA DICHO CRUD SAPUI5 adminte 4 modelos de binding modelo JSON modelo XML modelo de recursos modelo OData independientemente, los pasos para el binding son los mismos definicion de datos crear una instancia del modelo de enlace de datos Vincular un modelo al control de la interfaz de usuario 1.1 LOS TIPOS DE BINDING One-way binding: los cambio en el modelo se transportan a la UI vinculada a los controles, Y NO EN VICEVERSA....

Acceder a esta publicación

Creado y Compartido por: Roberto Hernan Santucho

*** CVOSOFT - Nuestros Alumnos - Nuestro Mayor Orgullo como Academia ***

SAP Expert


Como sabemos los datos de una aplicación de SAP GUI 5 siempre existen en un modelo en escenario de visualización debemos configurar los datos de este modelo en los controles de SAP GUI 5 para mostrar los datos al usuario por ejemplo al mostrar una lista de órdenes de compra en la tabla SAP GUI 5 el escenario de actualización los datos de interfaz de usuario deben almacenarse en el modelo para actualizar la base de datos en el servidor en el lugar de escribir código explícitamente en realizar estas transferencia de datos el enlace de datos proporciona varias formas de automatizarlas El enlace de elementos se usa se usa generalmente en escenarios maestro detalles la lista maestra esta generalmente vinculada...

Acceder a esta publicación

Creado y Compartido por: Jose Medina / Disponibilidad Laboral: FullTime + Carta Presentación

*** CVOSOFT - Nuestros Alumnos - Nuestro Mayor Orgullo como Academia ***

SAP Expert


1 | The Concept of Data Binding Benefits of Binding Data binding is a fundamental technique in SAPUI5 that allows linking model data to UI controls. Efficient use of this technique can significantly reduce the amount of code needed in a SAPUI5 application, simplifying development and maintenance. Types of Binding There are several types of binding modes in SAPUI5 to handle different scenarios: One-way binding Changes in the model are reflected in the UI, but changes made in the UI do not affect the model. Example: Updating the price of a product in the model automatically displays the new price in the UI. Two-way binding Ensures that both the model and the UI are always synchronized. Any change...

Acceder a esta publicación

Creado y Compartido por: Jaime Eduardo Gomez Arango / Disponibilidad Laboral: FullTime + Carta Presentación

*** CVOSOFT - Nuestros Alumnos - Nuestro Mayor Orgullo como Academia ***

SAP Senior

El concepto de data binding El data binding o enlace de datos en SAPUI5 permite automatizar el movimiento de datos entre la vista y el modelo. Se pueden enlazar valores o propiedades de controles SAPUI5 con los datos del modelo, reduciendo la cantidad de código necesario. SAPUI5 admite cuatro modelos de binding: JSON, XML, modelo de recursos y OData. El proceso de data binding implica la definición de datos, la creación de una instancia del modelo de enlace de datos y la vinculación del modelo al control de la interfaz de usuario. Existen tres tipos de modos de enlace: one-way binding, two-way binding y one-time binding. El enlace de agregación se utiliza para crear controles secundarios automáticamente...

Acceder a esta publicación

Creado y Compartido por: Nilson Parra Martinez / Disponibilidad Laboral: PartTime

*** CVOSOFT - Nuestros Alumnos - Nuestro Mayor Orgullo como Academia ***

SAP SemiSenior

Binding de Datos El binding o enlace a datos es una de las facetas más importantes en SAPUI5. Permite presentar en la capa de interfaz del usuario los datos del backend. A traves del binding se lleva a la practica el concepto de MVC (Modelo Vista Controlador) permitiendo conectar el Modelo con la Vista en forma directa. Existen distintos tipos de modelos orientados a lograr paginas mas performantes: One-way (unicamente los cambios en el modelo impactan en los controles) Two-ways (los cambios en el modelo impactan en controles y viceversa) One-Time (solo se pasan una vez del modelo a controles. datos de poca variabilidad como titulos) A su vez hay 4 modelos de binding: Modelo JSON, XML, de recursos y ODATA. ObjectListltem: control con...

Acceder a esta publicación

Creado y Compartido por: Cristian Cash

*** CVOSOFT - Nuestros Alumnos - Nuestro Mayor Orgullo como Academia ***

SAP Senior

setear el modelo a la vista concepto de data binding el uso eficiente del binding puede reducir la cantidad de código que escribimos en una aplicación de SAPUI5 Modelo JSON Modelo XML modelo de recursos modelo de ODATA one-way binding two-way binding one-time binding aggregation binding enlazar la colección enlazar cada propiedad fullname this.getview().byid("Nombre").setValue(oFirstName) oModel.getProperty("/LastName") this.getView().byId("Nombre").getValue(oFirstName) control objectlistitem tecnica de vinculación de elementos los filtros ordenar y agrupar los datos herencia del modelo el nombre del modelo el modelo de recurso

Acceder a esta publicación

Creado y Compartido por: Enrique Gomez

*** CVOSOFT - Nuestros Alumnos - Nuestro Mayor Orgullo como Academia ***

SAP Senior

Enlace de Datos en SAPUI5 El uso eficiente del Binding Puede reducir significativamente la cantidad de código que estamos escribiendo en una aplicación SAPUI5S SAPUI5 admite cuatro modelos de binding Modelo JSON Modelo XML Modelo de recursos Modelo ODATA Independiente de modelo que utilicemos el principio de vinculación de datos es siempre el mismo. Definición de Datos Crear una instancia del modelo de enlace de datos Vincular un modelo al control de la interfaz Hay tres tipos de formas de enlace One-way Binding Two-way Binding One Time Binding Agregación Binding Se utiliza para crear controles secundarios automáticamente según los datos del...

Acceder a esta publicación

Creado y Compartido por: Detriana Barrios / Disponibilidad Laboral: FullTime + Carta Presentación

 


 

👌Genial!, estos fueron los últimos artículos sobre más de 99.000 publicaciones académicas abiertas, libres y gratuitas compartidas con la comunidad, para acceder a ellas le dejamos el enlace a CVOPEN ACADEMY.

🔎Buscador de Publicaciones:

 


 

No sea Juan... Solo podrá llegar alto si realiza su formación con los mejores!