O documento discute componentes no framework UI5 da SAP. Resume os principais pontos como: (1) Componentes são aplicações independentes que podem existir isoladamente ou fazer parte de outras aplicações; (2) A partir da versão 1.30, metadados de componentes são armazenados em manifest.json ao invés de Component.js; (3) É possível criar drill-downs automáticos em tabelas baseados em serviços OData usando componentes.

1. Fabio Pagoti
Desenvolvedor na Dux Innovation
Instrutor ABAP e UI5
14 de Agosto de 2015
Componentes UI5

2. © 2013 SAP AG or an SAP affiliate company. All rights reserved. 2
Agenda
Componentes UI5
 O que são, MVC, Web Dynpro, Utilização
Evolução
 Component.js e manifest.json
Construção e Uso
 Criando seu componente
Possibilidades
 Tabelas com drill-down automáticas baseado em oData
Descobrindo e usando componentes
 SDK, Bower, Yeoman, Web IDE

3. Componentes UI5
O que são, MVC, Web Dynpro, Utilização

4. © 2013 SAP AG or an SAP affiliate company. All rights reserved. 4
Componentes
O que são?
• Aplicação independente
• Pode ser existir isoladamente ou fazer parte de outra
aplicação ou componente
• Seu uso deve ser simples
• MVC acontece dentro do componente

5. © 2013 SAP AG or an SAP affiliate company. All rights reserved. 5
Componentes
Componente vs Aplicação Web Dynpro
Componente Web Dynpro
Dependências
(Componentes)
Controllers ,
contexto, etc
Janelas
Contexto
Estrutura
Controller
Visões
Plugs Layout Contexto Métodos Controller
Aplicação Web Dynpro (URL)

6. © 2013 SAP AG or an SAP affiliate company. All rights reserved. 6
Componentes
Dependências
Componente A
Dependências
(Componentes)
Contexto, Controller,
Visões, Janelas, Etc
Componente B
Contexto, Controller, Visões, Janelas, Etc
Componente C
Dependências
(Componentes)
Contexto, Controller,
Visões, Janelas, Etc
Componente D (Faceless)
Contexto e Controller

7. © 2013 SAP AG or an SAP affiliate company. All rights reserved. 7
Componentes em Web Dynpro

8. © 2013 SAP AG or an SAP affiliate company. All rights reserved. 8
UI5 sem componentes
Aplicação dentro do index.html
• MVC pode ser usado, mas...
• a aplicação não pode ser reutilizada
dentro de outra
• Modelo e visões estão no contexto
global e não encapsulados
• Dificuldade em fazer mock data
• Navegação estará presa a
controllers, o que deixa as visões
dependentes entre si
• Não atende as práticas do Fiori

9. © 2013 SAP AG or an SAP affiliate company. All rights reserved. 9
UI5 com componentes
Componente dentro do index.html
• ComponentContainer cria Componente
que tem toda a aplicação
• Component.js descreve o componente

10. Evolução
Component.js e manifest.json

11. © 2013 SAP AG or an SAP affiliate company. All rights reserved. 11
Component.js
Responsabilidade até versão 1.28
Metadados
• Nome, descrição, versão, etc
• Dependências (namespaces
e outros componentes)
• Visão inicial
• URLs dos modelos
• Roteamento
Função de inicialização

12. © 2013 SAP AG or an SAP affiliate company. All rights reserved. 12
Componentes
A partir da versão 1.30 (em beta)
Component.js (inicialização) manifest.json (metadados)

13. Construção e Uso
Criando seu componente

14. © 2013 SAP AG or an SAP affiliate company. All rights reserved. 14
Component.js
Criação
• Voltada a módulos
(sap.ui.define) que
permitem otimizar o
desempenho
• metadata simplesmente
aponta para o manifest.json
• init: Instancia modelos
(mock data, i18n) e roteador
(descrito agora no
manifest.json)

15. © 2013 SAP AG or an SAP affiliate company. All rights reserved. 15
Manifest.json
Também conhecido como “Descriptor”
• Inspirado no AppManifest¹
• Dividido em namespaces²:
• sap.app
• sap.ui
• sap.ui5
• sap.platform.abap
• sap.platform.hcp
• sap.fiori
• sap.mobile
• ¹ http://www.w3.org/TR/appmanifest/
• ² OpenUI5 Demo Kit - Descriptor

16. © 2013 SAP AG or an SAP affiliate company. All rights reserved. 16
Manifest.json
Exemplo”
• sap.app
• Nome, versão, título, descrição, tags,
etc
• sap.ui
• Tipos de dispositivos, ícones e temas
suportados
• sap.ui5
• Antigo metadata do Component.js
• Dependências, modelos, configuração,
roteamento, visão inicial

17. Possibilidades
Tabelas com drill-down automáticas baseado em oData

18. © 2013 SAP AG or an SAP affiliate company. All rights reserved. 18
Imagine um serviço oData com várias coleções
Exemplo: Northwind

19. © 2013 SAP AG or an SAP affiliate company. All rights reserved. 19
Que tal criar um drill-down simplesmente assim?
Com componentes isso já é possível

20. Descobrindo e usando
componentes
SDK, Bower, Yeoman, Web IDE

21. © 2013 SAP AG or an SAP affiliate company. All rights reserved. 21
SDK
SAPUI5 já possui Componentes para tarefas específicas

22. © 2013 SAP AG or an SAP affiliate company. All rights reserved. 22
Descobrindo e Usando Componentes
Ainda não há muito conteúdo aqui… mas vale a lembrança!
Bower (http://bower.io/) Yeoman (http://yeoman.io/)
Há um gerador de UI5 no GitHub!
github.com/saschakiefer/generator-openui5
* Não segue as práticas (em beta)
mostradas aqui

23. © 2013 SAP AG or an SAP affiliate company. All rights reserved. 23
Web IDE
Muitos Templates! Todos em forma de Componente!

24. Demo
Exemplo de Componente
http://bit.ly/componente-ui5

25. © 2013 SAP AG or an SAP affiliate company. All rights reserved.
Obrigado!
@fabiopagoti – Desenvolvedor ABAP na
ABAP101.com
HanaBrasil.com.br
Livro “UI5 para desenvolvedores SAP/ABAP” – www.leanpub.com/ui5
Exemplo de componente: http://bit.ly/componente-ui5
Código Fonte: https://github.com/fabiopagoti/UI5-Example-Component