Presentation at SAP Inside Track 2014

1. Maurício Lauffer3 de Setembrode 2014
SAPUI5 for everything

2. ©2013 SAP AG or an SAP affiliate company. All rights reserved.
2
Agenda
O queé SAPUI5?
Primeirospassos
UI5 Views
UI5 Models
JSON com Webservice
OData com SAP Gateway
XML com SAP PI
OData com SAP HANA
GerandoUI5 apps híbridos
Apps nativospara Android/iOS

3. O queé SAPUI5?

4. ©2013 SAP AG or an SAP affiliate company. All rights reserved.
4
O queé SAPUI5? SAP UI Technologies Strategy

5. ©2013 SAP AG or an SAP affiliate company. All rights reserved.
5
O queé SAPUI5? SAP UI Technologies Strategy

6. ©2013 SAP AG or an SAP affiliate company. All rights reserved.
6
O queé SAPUI5? Info
É um framework JavaScript;
Gera códigoHTML5 + JavaScript + CSS3;
É a tecnologiausadapeloSAP Fiori;
Junto com SAP Fiorirepresentaum novo paradigmapara UX emSAP;
API bemprojetada, fácilde consumire de usar;
Suportaqualquerdispositivo(desktop/mobile) semdesenvolvimentoadicional;
Alta performance, emconformidadecom padrõesde produtosSAP.

7. ©2013 SAP AG or an SAP affiliate company. All rights reserved.
7
O queé SAPUI5? Arquitetura

8. Primeirospassos

9. ©2013 SAP AG or an SAP affiliate company. All rights reserved.
9
PrimeirospassosInstalandoIDE
A principal IDE usadaé o SAP HANA Studio;
Perfeitopara quemconheceo Eclipse;
Download - https://hanadeveditionsapicl.hana.ondemand.com/ hanadevedition/
SAP River RDE (beta).

10. ©2013 SAP AG or an SAP affiliate company. All rights reserved.
10
PrimeirospassosConfigurandoSAP HANA Studio
Adicionarrepositório;
Instalarplugins;
Criar“SAPUI5 Application Development > Application Project”;
Selecionarlibrary: sap.ui.commons/ sap.m;
Usarperspectiva“Java EE”.

11. Hello World!
O clássico “HelloWorld!” versão SAPUI5

12. UI5 Views

13. ©2013 SAP AG or an SAP affiliate company. All rights reserved.
13
UI5 ViewsTiposde Views
É responsávelpordefinire renderizara UI (User Interface).
HTML View
*.view.html
data-controller-name="sap.hcm.Address"
JS View
*.view.js
getControllerName()
JSON View
*.view.json
"controllerName“ : "sap.hcm.Address"
XML View
*.view.xml
controllerName="sap.hcm.Address"

14. UI5 Models

15. ©2013 SAP AG or an SAP affiliate company. All rights reserved.
15
UI5 ModelsTiposde Models
É responsávelporacessare gerenciarosdados da aplicação.
JSONModel
new sap.ui.model.json.JSONModel();
Client-side, ideal para datasetspequenos.
ODataModel
new sap.ui.model.odata.ODataModel();
Server-side, bompara sistemascomplexose datasetsgrandes.
ResourceModel
new sap.ui.model.resource.ResourceModel();
Client-side, usadopara carregarrecursoslocais(configurações, traduções, etc).
XMLModel
new sap.ui.model.xml.XMLModel();
Client-side, recomendadopara datasetspequenos.

16. ConectandoUI5 Models
JSONModelcom Webservice

17. ConectandoUI5 Models
ODataModelcom SAP Gateway

18. ConectandoUI5 Models
XMLModelcom SAP PI

19. ConectandoUI5 Models
ODataModelcom SAP HANA

20. GerandoUI5 apps híbridos

21. ©2013 SAP AG or an SAP affiliate company. All rights reserved.
21
GerandoUI5 apps híbridosApps nativospara Android/iOS
Softwarespara criarUI5 app híbridos:
Appbuilder+ SMP;
Kapsel+ SMP;
Neptune Software;
PhoneGap.

22. ©2013 SAP AG or an SAP affiliate company. All rights reserved.
22
GerandoUI5 apps híbridosApp híbridocom GitHub + PhoneGap

23. ©2013 SAP AG or an SAP affiliate company. All rights reserved.
23
GerandoUI5 apps híbridosApp híbridocom GitHub + PhoneGap

24. Perguntas?

25. ©2013 SAP AG or an SAP affiliate company. All rights reserved.
Obrigado!
Contact information:
Maurício Lauffer
mauriciolauffer@outlook.commauriciolauffer