componentes ui5 - sap inside track joinville 2015 - fábio pagoti
Post on 22-Feb-2017
718 Views
Preview:
TRANSCRIPT
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, 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
© 2013 SAP AG or an SAP affiliate company. All rights reserved. 4
ComponentesO 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
© 2013 SAP AG or an SAP affiliate company. All rights reserved. 5
ComponentesComponente 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)
© 2013 SAP AG or an SAP affiliate company. All rights reserved. 6
ComponentesDependê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
© 2013 SAP AG or an SAP affiliate company. All rights reserved. 8
UI5 sem componentesAplicaçã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
© 2013 SAP AG or an SAP affiliate company. All rights reserved. 9
UI5 com componentesComponente dentro do index.html
• ComponentContainer cria Componente
que tem toda a aplicação
• Component.js descreve o componente
© 2013 SAP AG or an SAP affiliate company. All rights reserved. 11
Component.jsResponsabilidade 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
© 2013 SAP AG or an SAP affiliate company. All rights reserved. 12
ComponentesA partir da versão 1.30 (em beta)
Component.js (inicialização) manifest.json (metadados)
© 2013 SAP AG or an SAP affiliate company. All rights reserved. 14
Component.jsCriaçã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)
© 2013 SAP AG or an SAP affiliate company. All rights reserved. 15
Manifest.jsonTambé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
© 2013 SAP AG or an SAP affiliate company. All rights reserved. 16
Manifest.jsonExemplo”
• 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
© 2013 SAP AG or an SAP affiliate company. All rights reserved. 18
Imagine um serviço oData com várias coleçõesExemplo: Northwind
© 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
© 2013 SAP AG or an SAP affiliate company. All rights reserved. 21
SDKSAPUI5 já possui Componentes para tarefas específicas
© 2013 SAP AG or an SAP affiliate company. All rights reserved. 22
Descobrindo e Usando ComponentesAinda 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
© 2013 SAP AG or an SAP affiliate company. All rights reserved. 23
Web IDEMuitos Templates! Todos em forma de Componente!
© 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
top related