Fabio Pagoti
Desenvolvedor na Dux Innovation
Instrutor ABAP e UI5
14 de Agosto de 2015
Componentes UI5
© 2013 SAP AG or an SAP affiliate company. All rights reserved. 2
Agenda
Componentes UI5
 O que são, MVC, Web Dynpro, Uti...
Componentes UI5
O que são, MVC, Web Dynpro, Utilização
© 2013 SAP AG or an SAP affiliate company. All rights reserved. 4
Componentes
O que são?
• Aplicação independente
• Pode s...
© 2013 SAP AG or an SAP affiliate company. All rights reserved. 5
Componentes
Componente vs Aplicação Web Dynpro
Component...
© 2013 SAP AG or an SAP affiliate company. All rights reserved. 6
Componentes
Dependências
Componente A
Dependências
(Comp...
© 2013 SAP AG or an SAP affiliate company. All rights reserved. 7
Componentes em Web Dynpro
© 2013 SAP AG or an SAP affiliate company. All rights reserved. 8
UI5 sem componentes
Aplicação dentro do index.html
• MVC...
© 2013 SAP AG or an SAP affiliate company. All rights reserved. 9
UI5 com componentes
Componente dentro do index.html
• Co...
Evolução
Component.js e manifest.json
© 2013 SAP AG or an SAP affiliate company. All rights reserved. 11
Component.js
Responsabilidade até versão 1.28
Metadado...
© 2013 SAP AG or an SAP affiliate company. All rights reserved. 12
Componentes
A partir da versão 1.30 (em beta)
Component...
Construção e Uso
Criando seu componente
© 2013 SAP AG or an SAP affiliate company. All rights reserved. 14
Component.js
Criação
• Voltada a módulos
(sap.ui.define...
© 2013 SAP AG or an SAP affiliate company. All rights reserved. 15
Manifest.json
Também conhecido como “Descriptor”
• Insp...
© 2013 SAP AG or an SAP affiliate company. All rights reserved. 16
Manifest.json
Exemplo”
• sap.app
• Nome, versão, título...
Possibilidades
Tabelas com drill-down automáticas baseado em oData
© 2013 SAP AG or an SAP affiliate company. All rights reserved. 18
Imagine um serviço oData com várias coleções
Exemplo: N...
© 2013 SAP AG or an SAP affiliate company. All rights reserved. 19
Que tal criar um drill-down simplesmente assim?
Com com...
Descobrindo e usando
componentes
SDK, Bower, Yeoman, Web IDE
© 2013 SAP AG or an SAP affiliate company. All rights reserved. 21
SDK
SAPUI5 já possui Componentes para tarefas específic...
© 2013 SAP AG or an SAP affiliate company. All rights reserved. 22
Descobrindo e Usando Componentes
Ainda não há muito con...
© 2013 SAP AG or an SAP affiliate company. All rights reserved. 23
Web IDE
Muitos Templates! Todos em forma de Componente!
Demo
Exemplo de Componente
http://bit.ly/componente-ui5
© 2013 SAP AG or an SAP affiliate company. All rights reserved.
Obrigado!
@fabiopagoti – Desenvolvedor ABAP na
ABAP101.com...
Próximos SlideShares
Carregando em…5
×

Componentes UI5 - SAP Inside Track Joinville 2015 - Fábio Pagoti

700 visualizações

Publicada em

Componentes UI5 - SAP Inside Track Joinville 2015 - Fábio Pagoti

Publicada em: Software
2 comentários
2 gostaram
Estatísticas
Notas
Sem downloads
Visualizações
Visualizações totais
700
No SlideShare
0
A partir de incorporações
0
Número de incorporações
57
Ações
Compartilhamentos
0
Downloads
17
Comentários
2
Gostaram
2
Incorporações 0
Nenhuma incorporação

Nenhuma nota no slide

Componentes UI5 - SAP Inside Track Joinville 2015 - Fábio Pagoti

  1. 1. Fabio Pagoti Desenvolvedor na Dux Innovation Instrutor ABAP e UI5 14 de Agosto de 2015 Componentes UI5
  2. 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. 3. Componentes UI5 O que são, MVC, Web Dynpro, Utilização
  4. 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. 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. 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. 7. © 2013 SAP AG or an SAP affiliate company. All rights reserved. 7 Componentes em Web Dynpro
  8. 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. 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. 10. Evolução Component.js e manifest.json
  11. 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. 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. 13. Construção e Uso Criando seu componente
  14. 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. 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. 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. 17. Possibilidades Tabelas com drill-down automáticas baseado em oData
  18. 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. 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. 20. Descobrindo e usando componentes SDK, Bower, Yeoman, Web IDE
  21. 21. © 2013 SAP AG or an SAP affiliate company. All rights reserved. 21 SDK SAPUI5 já possui Componentes para tarefas específicas
  22. 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. 23. © 2013 SAP AG or an SAP affiliate company. All rights reserved. 23 Web IDE Muitos Templates! Todos em forma de Componente!
  24. 24. Demo Exemplo de Componente http://bit.ly/componente-ui5
  25. 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

×