componentes ui5 - sap inside track joinville 2015 - fábio pagoti

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

Componentes UI5O que são, MVC, Web Dynpro, Utilização


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


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)


ComponentesDependências

Componente A


Contexto, Controller, Visões, Janelas, Etc

Componente B


Componente C



Componente D (Faceless)

Contexto e Controller


Componentes em Web Dynpro


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


UI5 com componentesComponente dentro do index.html

• ComponentContainer cria Componente

que tem toda a aplicação

• Component.js descreve o componente

EvoluçãoComponent.js e manifest.json


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


ComponentesA partir da versão 1.30 (em beta)

Component.js (inicialização) manifest.json (metadados)

Construção e UsoCriando seu componente


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)


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

http://www.w3.org/TR/appmanifest/

https://openui5beta.hana.ondemand.com/#docs/guide/be0cf40f61184b358b5faedaec98b2da.html

http://www.w3.org/TR/appmanifest/


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

PossibilidadesTabelas com drill-down automáticas baseado em oData


Imagine um serviço oData com várias coleçõesExemplo: Northwind


Que tal criar um drill-down simplesmente assim?Com componentes isso já é possível

Descobrindo e usando

componentesSDK, Bower, Yeoman, Web IDE


SDKSAPUI5 já possui Componentes para tarefas específicas


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

https://github.com/saschakiefer/generator-openui5


Web IDEMuitos Templates! Todos em forma de Componente!

DemoExemplo 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

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

http://www.leanpub.com/ui5


componentes ui5 - sap inside track joinville 2015 - fábio pagoti

Software