✒️SAP BTPFIORI / El framework de programación SAPUI5 Por Roberto Santucho

1. EL FRAMEWORK SAPUI5

• SAPUI5: conjunto de librerias JavaScript para des. y disen. de apps de negocio SAP basadas en HTML5
• es un framework (un equeleto) de programacion que facilita el desarrollo de aplicaciones web del lado del cliente que cumple con los principios de UI SAP. Usa:
  • Estandares como HTML5, CSS y JavaScript
  • JQuery para el frontend
  • y otras como OData, REST, JSON, Atom, XML para la comunicacion con el bakend.
• La mayoria de las aplicaciones SF estan creadas con SAPUI5 COMO TECNOLOGIA DE INTERFAZ DE USUARIO.
• Si bien vamos a usar BAS, tambien SE PUEDEN UTILIZAR DIFERENTES ENTORNOS DE DESARROLLO COMO

ECLIPSE

VISUAL STUDIO

SAP WEB IDE

• nombre SAPUI5 significa UI Development Toolkit PARA HTML5. Es una libreria JS DEL LADO DEL CLIENTE para crear interfaces de usuario IU web.
• las aplicaciones creadas con SAPUI5 cumplen con los 5 principios de SAP Fiori.

Apps SAPUI5 orientadas a roles: las transacciones que conocemos hoy divididas en pequenas apps orientadas a las tareas del rol del usuario

Apps SAPUI5 responsive

Apps SAPUI5 simples: en el desarrollo de SAPUI5 se sigue la regla de 1-1-3: 1 usuario, 1 caso de uso, 3 pantallas como maximo.

Apps SAPUI5 coherentes:para ello se usan plantillas y recursos web a disposicion de los desarrolladores SAPUI5.

Apps SAPUI5 disponibles al instante: relacionado al enfoque RENEW de las aplicaciones SAP FIORI UX de la estrategia de experiencia de usuario de SAP.

• SAPUI5: inicalmente se lo conocia como "Phoenix"
• el cambio fundamenta es que SAP desacopla la interfaz de usuario y la logica empresarial basado en el concepto MODELO-VISTA-CONTROLADOR MVC
• jQuery es una libreria conocida en el area de HTML que ofrece las mejores practicas.
• SAPUI5 se basa en jQuery y agrega bibliotecas adicionales de renderizado (para cumplir con los estandares de visulaizacion SAP) de navegador HTML5.
• AJAX (Asynchronous Javascript & XML) es un termino que describe un nuevo modo de utilizar conjuntamente varias tecnologias existentes(HTML o XHTML, CSS, JS, DOM (Document Object Model ES LA FORMA EN QUE JS REPLESENTA HTML EN FORMATO JSON6), XML, XSLT y el objeto XMLHttpRequest( ES UN OBJETO JS DISENADO POR MS QUE AHORA ES ESTANDAR, PERMITE OBTENER INFO DE UNA URL SIN TENER QUE RECARGAR LA PAGINA COMPLETA ). AJAX se implemento por primera vez con WEBDYNPRO en SAP.

SAP Fiori es un conjunto de aplicaciones comerciales completamente implementadas utilizando la tecnologia SAPUI5.

---

2. LAS LIBRERIAS DE SAPUI5

Las caracteristicas clave de SAPUI5

• Los controles: existen alrededor de 500 controles, pequenos (botones, campos de entrada) a complejos como tablas o incluso controles de visualizacion 3d
• La UX: lenguaje de diseno comun para dichos controles
• Aplicaciones robustas: soporte para la internacionalizacion, traduccion, idiomas de derecha a iz como hebreo o arabe, extensibilidad, seguridad, accesibilidad.
• Responsive

2.1 Ejemplos de apps desarrolladas con SAPUI5

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

2,2 LOS NAVEGADORES SOPORTADOS POR SAPUI5.

Firefox >=10 Chrome >=1 Safari >=3

---

3. EL MODELO MVC

Separa las tareas de una app en 3 elementos programables

• EL MODELO: confirma y contiene la logica de la aplicacion. Es responsable de conectarse a la BD, realizar las consultas y administrar la logica de negocios. Los modelos no se comunican en forma directa con las vistas
  
  • Contiene los datos y/o la conexion a la fuente de datos organizada en JSON o XML conectando a OData
  • Un modelo es la representacion de los datos de la BD. Tambien representa la logica empresarial en el sitema backend y proporciona metodos para actualizar y recuperar informacion del backend. La aplicacion web tiene 2 partes donde se implementa el modelo:

en el lado del cliente, tiene una clase, que representa los datos y proporciona METODOS para recuperar y actualizar los datos.

el en lado del servidor, implementa los METODOS de rcuperacion y actualizacion, validadndo los datos con la logica de negocio.

• LA VISTA: interface grafica de la app UI y contiene los elementos visibles al usuario. No se comunica con el modelo directamente. Caracteristicas:
  
  • Contiene la interfaz de usuario
  • Una vista representa la parte visula de nuestra app y generalmente es declarativa en naturaleza
  • una vista contiene varios controles de interfaz de usuario
• EL CONTROLADOR: conforma la capa intermedia entre la vista y los modelos. Responsabel de procesar los daots que recibe de los modelo y elegir la vistar correspondiente en funcion de dichos datos. TIENE RELACION DIRECTA CON LAS VISTAS Y CON LOS MODELOS. Algunas de las caracteristicas del controlador:
  • mantiene la logica de la aplicacion reaccionando a los mensajes de modelos y vistas actualizando las mismas.
  • Maneja la interaccion del usuario, dirige el modelo para obtener y actualizar los datos, y realiza la validacion de entrada.

EN SAP FIORI, LAS VISTAS SE DEFINEN MEDIANTE XML. LA UNICA APLICACION DE FIORI QUE UTILIZA HTML ES EL LP, QUE PROPORCIONA UN MARCO PARA LAS VISTAS BASADAS EN XML.

TODOS LOS CONTROLADORES SE DESARROLLAN UTILIANDO JAVASCRIPT Y ESTAN VINCULADOS A UNA VISTA O SON INDEPENDIENTES PARA SER UTILIZADOS POR VARIAS VISTAS EN XML.

MVC resuelve muchos problemas asociados a la creacion de apps web, tales como:

• Modularidad: que mejorara la legibilida, reutilizacion y mantenimiento
• Desarrollo paralelo: al separar la aplicacion en componente independientes, permite desarrollar cada componente en paralelo.

---

4. LOS TIPOS DE MODELOS

• JS Object Notation Model (JSON), datos en formato JSON, esta completamente disponible en el el lado del cliente
  • se usa para pequenos conjuntos de datos y estan vinculados a los controles SAPUI5. Uso comun: propiedades del dispositivo que se reutilizar en la app para vincular controls con este modelo e influyendo en varias configuraciones especificas del dispositivo de los controles de la UI.
  • para instanciarlo

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

Agregamos datos

oJSONModel.setData ({

"material": "1234",

"materialName": "Material 1234",

"Price":"0.125",

"moneda": "ARS" });

o desde una url

oJSONModel.loadData ("url");

• MODELO XML: AL IGUAL QUE EL MODELO JSON, ES DEL LADO DEL CLIENTE. se utiliza para pequenos conjuntos de datos que estan completamente disponibles en el cliente, aunque raramente se usan porque la mayoria de los datos estan en JSON.
  • para instanciarlo

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

Agregamos datos

oXMLModel.setXML ( "" "" "3843" "0.5-inch Screw" "0.55" "INR" "" );

o desde una url

oXMLModel.loadData ("url");

• EL MODEL OData: es uno de los tipos de modelos mas utilizados y REPRESENTA LOS DATOS DISPONIBLES EN EL SERVIDOR.
  • Este modelo de OData es compatible con la version 2.0 de las especificaciones de OData
    
  • FILTRADO U ORDENAMIENTO EN UNA LISTA DE DATOS IMPLICA UNA SOLICITUD AL SERVIDOR PARA REALIZAR LA OPERACION RESPECTIVA Y DEVOLVER LOS DATOS. PERO SI YA SE CUENTA CON TODOS LOS DATOS EN LA INTERFAZ, se puede indicar al modelo que realice estas operacion e en el lado del cliete para no realizar consulta al servidor.
  • instancia
    • var oModel= sap.ui.model.odata.v2.ODataModel("uri");
  • SE PUEDEN REALIZAR LAS OPERACIONES

Operaciones de consulta: PARA CONSULTAR UNA ENTIDAD, DEBEMOS PASAR EL EntitySet del servicio OData. El metodo que recibe la respuesta en caso de exito EN EL CONTROLADOR, recibe los datos consultados como parametro.

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

Operacion de lectura: para leer una entrada especifia, por lo que debe pasarse la clave de la entidad ademas del nombre del conjunto de entidades. ESTO DESENCADENA UNA SOLICITUD HTTP GET

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

Operaciones de creacion: crea una nueva entrada dentro de una entidad, debemos usar el EntitySet, asi como las propiedades requeridas de la entidad. La entrada exitosa se devuelve al controlador al metodo de exito. ESTO DESENCADENA UNA SOLICITUD HTTP POST.

Creamos una estructura JSON con los datos a enviar:

var newEntry = {

Material: "1234",

Cantidad: 33,

Unit:"EA"};

Llamamos al OData:

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

Operaciones de actualizacion: pasamos la entrada especifica. NO SE DEVUELVEN DATOS DESPUES DE UNA ACTUALIZACION EXITOSA. La operacion de actualizacion desencadena una llamada PUT o MERGE basada en la configuracion en el modelo OData.

Creamos una estructura JSON con los datos a enviar:

var updateEntry = {

Material: "1234",

Cantidad: 33,

Unit:"EA"};

Llamamos al OData:

oModel.update ("/PurchaseRequisitions ("0003334342)", updateEntry, {success: success-Handler, error: errorHandler});

Operacion para borrar:

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

4.1 Los modelos de recursos e internacionalizacion

• para textos en diferentes idiomas, se pueden almacenar en un solo archivo, uno para cada idioma admitido por la app.
• por cada idioma tenemos un archivo ".properties", generalmente localizados en la carpeta i18n.

ej. i18n_en.properties

---

5. LOS TIPOS DE VISTAS

Las vistas en SAPUI5 devuelven una jerarquia de controles SAPUI5 para representar en un navegador. Pueden ser formatos XML (PREFERIDA FIORI), HTML, JS y JSON.

• Vista del tipo JavaScript: usa el subfijo ".view.js" para el nombre del archivol. SAPUI5 proporciona los siguientes 2 metodos predeterminados que se pueden implementar:
  • createContent() este metodo crea la UI para la vista. Devuelve un solo Control o una jerarquia de controles SAPUI5 para ser renderizados en la pantalla.
  • getControllerName() Se llama inicalmente una vez de que se haya creado una instancia del controlador. Este metodo SE UTILIZA PARA CREAR LA INTERFAZ DE USUARIO.
• Vista del tipo XML: la vista se crea en un archivo xml con subfijo ".view.xml". Cada control tiene una etiqueta XML especificada.
• Vista del tipo HTML: ".view.html"
• Vista del tipo JSON: ".view.json"

---

5.1 LOS METODOS DEL CICLO DE VIDA DE UNA VISTA

SAPUI5 proporciona los siguientes cuatro metodos que actuan como controladores de eventos o enlaces a lo largo del ciclo de vida de una vista.

• el metodo onInit(): cuando se crea una instancia de la vista, es decir, CUANDO TODOS SUS CONTROLES SON CREADOS. PERO TODAVIA NO SE RENDERIZA, POR LO QUE NO SE PUEDE ACCEDER AL DOM.
• el metodo onBeforeRendering()
• el metodo onAfterRendering()