✒️El framework de programación SAPUI5

Resumen Unidad 3 - Capitulo 1 : El framework de programación SAPUI5

Se trata de un conjuntos de librerias construidas en javascript o "framework".

Usa estandares web como HTML5, CSS, JQuery, OData, REST, JSON, Atom, XML y AJAX

Se desarrolla desde el SAP BAS aunque puede usarse Eclypse, Visual Studio y SAP WEB IDE.

Es :

* Orientado a roles:

* Responsivo: multiples dispositivos

* Simple: cumple con el 1 usuario-1 caso-3 pantallas

* Coherente: respeta estandares de diseño e interacción

Se desacopla la interfaz de usuario de la logica empresarial mediante el concepto MVC (modelo-vista-controlador)

HTML5: lenguaje de marcado de hipertexto para estructurar paginas web en su versión actual. Se combina con CSS para presentar el diseño de la pagina.

Javascript: codificación para realizar acciones del lado del navegador o dispositivo de presentación

JQuery: es una librería javascript que ofrece las mejores prácticas

AJAX: conjunto de tecnicas que permite refrescar la pantalla sin necesidad de reconstruirla. Se implementó desde WebDynpro.

OData: modelo de representación y acciones sobre los datos.

Sap Fiori: Conjunto de aplicaciones construidas con estos elementos.

2 Librerías de SAPUI5

Se pueden consultar en

https://sapui5.hana.ondemand.com/#/topic/363cd16eba1f45babe3f661f321a7820

Ejemplos: sap.ui.commons, sap.ui.richtexteditor, sap.ui.suite,sap.ui.table, sap.viz, etc.

2.1 ejemplos de aplicaciones

https://sapui5.hana.ondemand.com/#/demoapps

entre otros: carrito de compras, listado de ordenes, de productos, etc.

2.2 navegadores

soporta: chrome, explorer version 8, mozilla firefox v10, apple safari v3

3 Modelo MVC

ofrece gran modularidad separando

Modelo: representa la logica de negocio

Vista: representa la representación gráfica. Se mantienen mediante XML.

Controlador: capa intermedia entre los 2 anteriores que controla interacciones

En SAP FIORI las vistas se definen mediante XML, solo usa HTML el Launchpad como marco para presentar estas vistas. Los controladores se desarrollan en JavaScript y estan viculados a una vista o son independientes para ser utilizados en varias vistas. El binding se puede utilizar para conectar vistas a modelos.

4. Los tipos de modelos

Modelo JSON: Modelo de notación para representar datos. Las propiedades del dispositivo se representan en un modelo JSON.

La clase se instancia así:

var oJSONModel = new sap.ui.model.json.JSONModel();

consta de 2 metodos importantes:

1) oJSONModel.setData( {"campo1":"valor1", .... } ) permite fijar valores;

2) oJSONModel.loadData( url ) carga valores desde una url

Modelo XML: se usa para pequeños conjuntos de datos disponibles en el cliente y es menos frecuente su uso que JSON.

La clase se instancia así:

var oXMLModel = new sap.ui.model.xml.XMLModel();

consta de 2 metodos importantes:

1) oXMLModel.setXML( "valor1" "" "valor3" ) permite fijar valores;

2) oXMLModel.loadXML( url ) carga valores desde una url

Modelo OData:

Recupera datos y los persiste del lado del navegador salvando roundtrips al servidor. Se usa sap.ui.model.odata.v2.ODataModel ya que esta mejorada respecto a sap.ui.model.odata.ODataModel (version antigua).

Operaciones:

- consulta: hay que pasar el EntitySet y recibe los datos consultados como parametro. Ej: oModel.read("/PurchaseRequisitions", {success: success-Hadler, error: errorHandler});

- lectura: se pasa clave y desencadena una operacion HTTP GET

oModel.read("/PurchaseRequisitions("0003456632"), {success: success-Hadler, error: errorHandler});

- creación: se usa EntitySet y propiedades requeridas. Se desencadena una solicitud HTTP POST.

ej:

var newEntry = { Material:"1235", Cantidad: 33, Unit: "EA" }

oModel.create("/PurchaseRequisitions", newEntry, {success: success-Hadler, error: errorHandler});

- actualizacion: debe indicarse la clave y datos a actualizar. No devuelve datos. Desencadena ua llamada PUT o MERGE.

var updateEntry = { Material:"1235", Cantidad: 33, Unit: "EA" }

oModel.read("/PurchaseRequisitions("0003456632"), updateEntry; {success: success-Hadler, error: errorHandler});

- borrar: hay que indicar una entrada existente y usar metodo DELETE con una URL apuntando a la entrada a borrar. Se dispara una llamada HTTP DELETE.

oModel.remove("/PurchaseRequisitions("0003456632"), {success: success-Hadler, error: errorHandler});

4.1 Los modelos de recursos e internacionalizacion

Datos dependientes del idioma: literales, mensajes, etc.

por cada idioma habrá un archivo ".properties" en carpeta i18n.properties (default), i18n_en.properties (ingles), i18n_de.properties (aleman)

5. vistas

* Vista javascript: usa el sufijo "views.js".

Metodos predeterminados de SAPUI5:

- createContent() crea la interfaz de usuario para la vista devolviendo objeto para renderizar en pantalla

- getControllerName() se llama inicialmente al crear la instancia del controlador y se usa para crear la interfaz de usuario.

* Vista XML: se crea con un archivo con sufijo ".view.xml". Cada control tiene su etiqueta. La mayoria de las app fiori tienen una vista de este tipo.

* Vista del tipo HTML

El tipo de vista HTML se define en un archivo con sufijo ".view.html"

* Javascript Object ation Views (JSON). Sufijo ".view.json."

5.1 Los metodos del ciclo de vida de una vista

4 metodos controladores de la vista:

1) Inicializacion (metodo onBeforeRendering()); 2) Renderizado ( onAfterRendering()); 3) Re-renderizazo (llama a los 2 metodos previos); 4) Destruccion (metodo onexit())