✒️SAP BTPFIORI / El framework de programación SAPUI5 Por Cristian Cash
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())
Escanear / Compartir
Sobre el autor
Publicación académica de Cristian Cash, en su ámbito de estudios para la Carrera Consultor SAP BTP Fiori.
SAP SemiSenior
Cristian Cash
Profesión: Consultor Tecnológico - Argentina - Legajo: GX99J
✒️Autor de: 23 Publicaciones Académicas
🎓Egresado del módulo:
Presentación:
Amplia experiencia en el ambito tecnologico y corporativo en labores de consultoria técnica y funcional en forma individual y coordinando equipos.
Certificación Académica de Cristian Cash
Disponibilidad Laboral: FullTime 
