Más contenido relacionado La actualidad más candente (18) Similar a Componentes UI5 - SAP Inside Track Joinville 2015 - Fábio Pagoti (20) Componentes UI5 - SAP Inside Track Joinville 2015 - Fábio Pagoti2. © 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
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
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)
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
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
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!
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