✒️SAP BTPFIORI / El framework de programación SAPUI5 Por Claudia Monsalve Lopez
El framework de programación SAPUI5
El frameword de programacion SAP UI5
UI5: Es un conjunto de liberarias java Scrip. Facilita el desarrollo de app web del lado del cliente. Basado en HTML5 que se puede consumir desde cualquier dispositivo.
Las app cumplen con los 5 principios de SAPUI5
- App SAPUI5 oriendas a roles: Las personas solo utilizan lo se le otorgo como permisos.
- App SAPUI5 responsive: Las app deben hacerse sencillas, faciles de utilizar u permitir que se utilice desde cualquier dispositivo.
- App SAPUI5 simples: Funcionalidad de manera sencilla, seguir la regla 1-1-3: 1 usuario, 1 caso de usuo, 3 plantillas como maximo. Sino se puede hacer con 3 plantillas se debera rediseñar.
- App SAPUI5 coherencia: Las app deben crearse utilizando elementos y estilos comunes. Para ello existen plantillas y recursos web.
- App SAPUI5 disponibles al instante: La app debe poderse instalar y usarse en poco en poco tiempo.
Apache: Es un servidor web de codigo abierto multiplataforma y gratuito. Se usa aqui open UI5.
SAP se basa en el modelo MVC (modelo-vista-controlador) que es un patrón de arquitectura de software utilizado principalmente en el desarrollo de interfaces de usuario (UI), especialmente en tecnologías como SAPUI5 y Web Dynpro. Su objetivo es separar la lógica de negocio de la interfaz de usuario, facilitando el mantenimiento, la escalabilidad y el desarrollo colaborativo.
HTML5 Se utiliza para estructurar paginas y el CSS para el diseño, estas paginas web se puede ver usando un navegador.
Java Script Asincronico: ejecutar tareas que toman tiempo (como acceder a una base de datos o a una API web) sin bloquear el resto del código. la asincronía permite que el programa siga ejecutándose y reciba el resultado más tarde. Este Java se implemento por primera vez con WebDrynpro.
SAP Fiori: Es un conjunto de aplicaciones que utilizan la tecnologia SAPUI5. Para la comunicacion de backend utiliza Odata.
Las librerias de SAPUI5: Son bloques de codigo que son reutilizables,
- URL: https://sapui5.hana.ondemand.com/#/topic/363cd16eba1f45babe3f661f321a7820
Caracteristicas de SAPUI5
- Controles: Exirten alrededor de 500 controles
- La experiencia de usuario
- Aplicaciones robustas
- Responsive: Se adapta el tamaño de la pantalla y al tipo de iteraccion del usuario.
- URL: Demo Apps - Demo Kit - SAPUI5 SDK
- Navegadores soportados
- Explorer
- Firefox
- Safari
MVC (Model View Contriller): separa las app en 3 elementos
1. Modelo: Se conecta con la BD (logica del negocio)
- Contiene los datos y la conexion (json, xml) conectando a Odata.
- Representa la logica en el backend
2. Vista: Es la interface grafica de la app UI, son todos los elementos visibles al usuario.
- Contiene la interfax del usuario.
3. Controlador: Porcesa los datos que recibe del modelo y los envia a alguna vista.
Tipo de modelos
- Java Script (Json): es un formato ligero de intercambio de datos basado en texto. Es fácil de leer y escribir para humanos, y también fácil de procesar para máquinas. Es del lado del cliente
- XML: (eXtensible Markup Language) es un lenguaje de marcado que se utiliza para almacenar y transportar datos de forma estructurada. Es del lado del cliente
- Odata: es un protocolo estándar desarrollado por Microsoft y adoptado ampliamente por SAP para exponer y consumir datos a través de servicios RESTful. Permite acceder a datos desde sistemas SAP (como S/4HANA o SAP Gateway) de forma estructurada y segura, usando URLs.
En SAP, OData es la base para muchas aplicaciones SAP Fiori y para integraciones con SAP BTP.
-
Operaciones que se realizan
-
De consulta: Entidad
-
Lectura: Se usa para leer una entrada especifica
-
Creacion: crear una nueva entrada dentro de la entidad
-
Actualizacion: Actualizar una entidad. Esto desencadena una llamada PUT o Merge
- Borrrar: Eliminar una entidad, utiliza el metodo delete
-
-
Tipos de vista
- Vista tipo Java Script: Usa el sufijo view.js
- createContent()
- getControllerName()
- Vista tipo XML: Crea un archivo .view.xml
- Vista tipo HTML: Crea un archivo .view.xml
- Json: Crea un archivo .view.json
Metodos del ciclo de vida de una vista
- Vista inicializada: Inicializar modelos, eventos, datos iniciales.
- Vista renderizada: Preparar datos que afectan la vista.
- Vista rerenderizada: Manipular el DOM, inicializar controles personalizados.
- Vista destruida: Liberar recursos, remover listeners.
| onInit() | Justo después de crear la instancia del controlador. | Inicializar modelos, eventos, datos iniciales. |
| onBeforeRendering() | Antes de que se renderice la vista. (Se llama cada vez que se va a renderizar). | Preparar datos que afectan la vista. |
| onAfterRendering() | Después de que la vista se haya renderizado completamente en el DOM. | Manipular el DOM, inicializar controles personalizados. |
| onExit() | Cuando se destruye la vista/controlador (por ejemplo, al navegar a otra vista). | Liberar recursos, remover listeners. |
Escanear / Compartir
Sobre el autor
Publicación académica de Claudia Bibiana Monsalve Lopez, en su ámbito de estudios para la Carrera Consultor SAP BTP Fiori.
SAP Master
Claudia Bibiana Monsalve Lopez
Profesión: Ingeniera Informatica - Colombia - Legajo: XF24Z
✒️Autor de: 109 Publicaciones Académicas
🎓Egresado de los módulos:
Certificación Académica de Claudia Monsalve
Disponibilidad Laboral: FullTime 
