SAP Fiori - Conceitos UI5

SAP UI5é uma estrutura baseada em script Java que é usada para projetar aplicativos de negócios multiplataforma. Ele suporta vários modelos de dados e visualizações para aplicativos de desktop e móveis. SAP UI5 compila em Ajax aberto e pode ser combinado com bibliotecas de script java.

SAP UI5 foi inicialmente chamada de fênix, que mais tarde foi alterada para SAP UI5 em 2011.

Principais tecnologias de interface do usuário

  • As ferramentas Web Dynpro ABAP e Floorplan gerenciador podem ser usadas para criar novos aplicativos.

  • Ferramentas de desenvolvimento de aplicativos SAP UI5 e UI5 ​​para adaptar ou desenvolver novos aplicativos.

  • SAP Dynpro é usado para incluir Screen Personas para otimização de GUI

Características do SAP UI5

As características do SAP UI5 são as seguintes -

  • Modelos bem desenhados, fáceis de consumir.
  • Desempenho otimizado com conformidade com os padrões SAP
  • Suporte de código aberto Ajax
  • Inclui biblioteca JavaScript
  • Modelo de componente de IU extensível
  • Baseado em padrões abertos como Ajax, JavaScript, CSS e HTML 5.

Componentes principais - cliente e servidor SAP UI5 -

Client

  • Biblioteca JavaScript, arquivos de imagem
  • Arquivos JavaScript principais
  • Arquivos HTML e JavaScript do conjunto de testes

Server

  • Ferramentas de desenvolvimento de aplicativos
  • Gerador de Temas
  • Manipulador de recursos em Java
  • Ferramentas de desenvolvimento de controle

UI5 Browser Support

SAP UI5 oferece suporte a todos os principais navegadores da web e às versões mais recentes, como IE, Mozilla Firefox, Google Chrome e Safari.

Arquitetura SAP UI5

A arquitetura SAP UI5 consiste em uma estrutura JavaScript central, incluindo jQuery. Consiste em bibliotecas de extensão, controles e temas. Possui componentes de servidor opcionais.

Bibliotecas de controle UI5

Comum SAP UI5 bibliotecas de controle são fornecidas abaixo.

  • Sap.ui.commons - Isso inclui controles como campos de texto, botões, fontes, etc.

  • Sap.ui.table - Isso inclui os controles da tabela, como linhas, colunas, etc.

  • Sap.ui.ux3 - Inclui propriedades para padrões UX3.

  • Sap.m - Isso inclui controles para dispositivos móveis, como telefones, tablets, etc.

SAP UI5 e extensibilidade

  • SAP UI5 suporta extensibilidade para desenvolvedor de aplicativos e permite adicionar páginas baseadas em JavaScript, HTML, UI5.

  • Ele permite escrever novas bibliotecas de IU e novos controles.

  • Escreva plug-ins para o núcleo UI5.

  • Crie controles a partir de controles UI5 existentes.

  • Inclui outras bibliotecas JavaScript

Conceito de Model-View-Controller

MVC consiste em três conceitos. As visualizações podem ser definidas usando diferentes linguagens como Java Scripts, HTML. O controlador é usado para vincular as visualizações e os modelos são usados ​​com as visualizações.

Views - Pode ser definido usando XML com HTM, misto ou 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- Os controladores estão vinculados a uma visualização. Também pode ser usado com várias visualizações

Model - A vinculação de dados pode ser usada nas visualizações.

Comparação de diferentes tipos de visualizações

Uma comparação de diferentes tipos de visualizações é fornecida na tabela.

Vinculação de dados SAP UI5

A vinculação de dados é usada em controles UI5 para uma fonte de dados para manter os dados do aplicativo. Permite alterar os controles automaticamente sempre que houver alteração nos dados do aplicativo.

Quando você usa a vinculação de dados bidirecional, os dados do aplicativo são atualizados sempre que o valor de um controle vinculado é alterado.

A vinculação de dados oferece suporte à vinculação de controles simples, como botão de teste, controles de tipo de lista, etc.

Tipos de modelo de vinculação de dados

SAP UI5 suporta três tipos de implementação de modelo -

  • JSON Model- Suporta dados no formato JavaScript Object Notation. Ele suporta vinculação de dados bidirecional.

  • XML Model- Suporta dados XML. Ele suporta vinculação de dados bidirecional.

  • OData Model- Ele cria solicitações OData e trata as respostas de acordo. Ele suporta apenas dados compatíveis com OData. Ele oferece suporte à vinculação de dados bidirecional experimental.