SAP Fiori - Conceptos de UI5

SAP UI5es un marco de trabajo basado en script Java que se utiliza para diseñar aplicaciones empresariales multiplataforma. Es compatible con varios modelos de datos y vistas de aplicaciones móviles y de escritorio. SAP UI5 se compila en Ajax abierto y se puede combinar con bibliotecas de scripts de Java.

SAP UI5 inicialmente se llamó phoenix que luego se cambió a SAP UI5 en 2011.

Tecnologías clave de UI

  • La herramienta Web Dynpro ABAP y Floorplan Manager se puede utilizar para crear nuevas aplicaciones.

  • Herramientas de desarrollo de aplicaciones SAP UI5 y UI5 para cambiar, adaptar o desarrollar nuevas aplicaciones.

  • SAP Dynpro se utiliza para incluir Screen Personas para la optimización de la GUI

Características de SAP UI5

Las características de SAP UI5 son las siguientes:

  • Modelos bien diseñados, fáciles de consumir.
  • Rendimiento optimizado conforme a los estándares de SAP
  • Soporte de código abierto Ajax
  • Incluye biblioteca JavaScript
  • Modelo de componente de interfaz de usuario extensible
  • Basado en estándares abiertos como Ajax, JavaScript, CSS y HTML 5.

Componentes clave - Cliente y servidor SAP UI5 -

Client

  • Biblioteca JavaScript, archivos de imagen
  • Archivos JavaScript principales
  • Prueba de archivos HTML y JavaScript

Server

  • Herramientas de desarrollo de aplicaciones
  • Generador de temas
  • Manejador de recursos en Java
  • Herramientas de desarrollo de control

UI5 Browser Support

SAP UI5 es compatible con todos los navegadores web clave y las últimas versiones como IE, Mozilla Firefox, Google Chrome y Safari.

Arquitectura SAP UI5

La arquitectura SAP UI5 consta de un marco central de JavaScript que incluye jQuery. Consiste en controles y temas de bibliotecas de extensiones. Tiene componentes de servidor opcionales.

Bibliotecas de control UI5

Común SAP UI5 las bibliotecas de control se dan a continuación.

  • Sap.ui.commons - Esto incluye controles como campos de texto, botones, fuentes, etc.

  • Sap.ui.table - Esto incluye los controles de la tabla como filas, columnas, etc.

  • Sap.ui.ux3 - Esto incluye propiedades para patrones UX3.

  • Sap.m - Esto incluye controles para dispositivos móviles como teléfonos móviles, tabletas, etc.

SAP UI5 y extensibilidad

  • SAP UI5 admite la extensibilidad para desarrolladores de aplicaciones y permite agregar páginas basadas en JavaScript, HTML, UI5.

  • Permite escribir nuevas bibliotecas de UI y nuevos controles.

  • Escriba complementos para el núcleo UI5.

  • Cree controles a partir de controles UI5 existentes.

  • Incluye otras bibliotecas de JavaScript

Concepto Modelo-Vista-Controlador

MVC consta de tres conceptos. Las vistas se pueden definir utilizando diferentes lenguajes como Java Scripts, HTML. El controlador se usa para vincular las vistas y los modelos se usan con las vistas.

Views - Puede definirse usando XML con HTM, mixto o autónomo

  • XML - (sap.ui.core.mvc.xmlview)

  • JavaScript - (sap.ui.core.mvc.JSView)

  • JSON - (sap.ui.core.mvc.JSONView)

  • HTML - (sap.ui.core.mvc.HTMLView)

Controller- Los controladores están vinculados a una vista. También se puede utilizar con múltiples vistas.

Model - El enlace de datos se puede utilizar en las vistas.

Comparación de diferentes tipos de vistas

En la tabla se ofrece una comparación de diferentes tipos de vistas.

Enlace de datos SAP UI5

El enlace de datos se utiliza en controles UI5 a una fuente de datos para contener los datos de la aplicación. Permite cambiar los controles automáticamente cada vez que hay un cambio en los datos de la aplicación.

Cuando utiliza el enlace de datos bidireccional, los datos de la aplicación se actualizan siempre que cambia el valor de un control enlazado.

El enlace de datos admite el enlace de controles simples como botón de prueba, controles de tipo de lista, etc.

Tipos de modelos de enlace de datos

SAP UI5 admite tres tipos de implementación de modelos:

  • JSON Model- Admite datos en formato de notación de objetos JavaScript. Admite enlace de datos bidireccional.

  • XML Model- Soporta datos XML. Admite enlace de datos bidireccional.

  • OData Model- Crea solicitudes de OData y maneja las respuestas en consecuencia. Solo admite datos compatibles con OData. Es compatible con el enlace de datos bidireccional experimental.