Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
Boilerplate – Fiori Edition, HP Seitz
UI5 Boilerplate - Fiori Edition
HP Seitz - @hpseitz
Boilerplate – Fiori Edition, HP Seitz
Experience as Software Engineer
Zilog Z80 CPU with 4 MHz, 8bit data bus, 64 KB RAM, ...
Boilerplate – Fiori Edition, HP Seitz
UI5 Boilerplate
● Hosted on Github
● Articles on SCN,
mypro.de
● 6of5 Wiki Page
● In...
Boilerplate – Fiori Edition, HP Seitz
DEMO with SAP Web IDE
Boilerplate – Fiori Edition, HP Seitz
App vs. Fiori Lauchpad (FLP) App
● App is the Boss ● FLP is the Boss
Mulitple „Apps“...
Boilerplate – Fiori Edition, HP Seitz
Fiori Launchpad Application
● Application is dynamically loaded by FLP
● FLP is a Si...
Boilerplate – Fiori Edition, HP Seitz
Ok, let's do it!
Boilerplate – Fiori Edition, HP Seitz
EventBus
● Before
● after
Boilerplate – Fiori Edition, HP Seitz
Access of Resources
● before
● after
Boilerplate – Fiori Edition, HP Seitz
No global Id's
● before
● after
Boilerplate – Fiori Edition, HP Seitz
Questions?
Boilerplate – Fiori Edition, HP Seitz
UI5 Boilerplate Fiori Edition
● Final Code can be found
on GitHub
https://github.com...
Boilerplate – Fiori Edition, HP Seitz
HP Seitz
SAPUI5 / OpenUI5 / SAP Fiori UI Development
Twitter: @hpseitz
Blog: http://...
Upcoming SlideShare
Loading in …5
×

UI5 Boilerplate Fiori Edition - sitFRA 2015

2,234 views

Published on

Introduction of UI5 Boilerplate, a template for SAPUI5/OpenUI5 Apps. Explain modification / extensions to build a Fiori Edition of the UI5 Boilerplate, which can be integrated in the famous SAP Fiori Launchpad. Slides of session on sitFRA 2015 in Frankfurt/Germany on 21st of Mrach 2015.

Published in: Engineering
  • Be the first to comment

UI5 Boilerplate Fiori Edition - sitFRA 2015

  1. 1. Boilerplate – Fiori Edition, HP Seitz UI5 Boilerplate - Fiori Edition HP Seitz - @hpseitz
  2. 2. Boilerplate – Fiori Edition, HP Seitz Experience as Software Engineer Zilog Z80 CPU with 4 MHz, 8bit data bus, 64 KB RAM, ~0.5 MIPS, 640x200 pixel (27 colors), 3“ Disc (capacity 2x180 KB), Locomotive BASIC 1.1, CP/M 2.2, 1.870,- DM
  3. 3. Boilerplate – Fiori Edition, HP Seitz UI5 Boilerplate ● Hosted on Github ● Articles on SCN, mypro.de ● 6of5 Wiki Page ● Initially build with UI5 Version 1.16 Features ● App Template ● Mobile First (sap.m) ● Default File Structure ● Dynamic Navigation https://github.com/6of5/UI5SplitApp-Boilerplatehttps://github.com/6of5/UI5SplitApp-Boilerplate
  4. 4. Boilerplate – Fiori Edition, HP Seitz DEMO with SAP Web IDE
  5. 5. Boilerplate – Fiori Edition, HP Seitz App vs. Fiori Lauchpad (FLP) App ● App is the Boss ● FLP is the Boss Mulitple „Apps“ running within FLP → Rules necessary App Models Views Controllers Resources FLP Component Models Views Controllers Resources Component Models Views Controllers Resources Component Models Views Controllers Resources
  6. 6. Boilerplate – Fiori Edition, HP Seitz Fiori Launchpad Application ● Application is dynamically loaded by FLP ● FLP is a Single Page App (SPA) Requirements for FLP Application: ● App needs to be a self-containing UI5 Component ● Use Event Bus of Component ● Do not use global Event Bus ● Do not use sap.ui.getCore() to register Models ● Do not define global Id's, let's UI5 generate such Id's ● Use only UI5 to manipulate location hash (navigation, routing) ● … and more ..
  7. 7. Boilerplate – Fiori Edition, HP Seitz Ok, let's do it!
  8. 8. Boilerplate – Fiori Edition, HP Seitz EventBus ● Before ● after
  9. 9. Boilerplate – Fiori Edition, HP Seitz Access of Resources ● before ● after
  10. 10. Boilerplate – Fiori Edition, HP Seitz No global Id's ● before ● after
  11. 11. Boilerplate – Fiori Edition, HP Seitz Questions?
  12. 12. Boilerplate – Fiori Edition, HP Seitz UI5 Boilerplate Fiori Edition ● Final Code can be found on GitHub https://github.com/6of5/UI5-Boilerplate-Fiorihttps://github.com/6of5/UI5-Boilerplate-Fiori
  13. 13. Boilerplate – Fiori Edition, HP Seitz HP Seitz SAPUI5 / OpenUI5 / SAP Fiori UI Development Twitter: @hpseitz Blog: http://blog.mypro.de SCN: http://scn.sap.com/people/hpseitz

×