Embed Size (px)
Citation preview
Nov 23, 2014OpenUI5 – all you need for enterprise ready apps
What is
askQuestion();
?
Nov 23, 2014 Sofia
var title = “OpenUI5 – all you need for enterprise ready apps”;
var info = {name: “Stanislava Baltova,
Petya Begovska, Peter Skelin”, otherOptional: “SAP Labs Bulgaria”};
Nov 23, 2014OpenUI5 – all you need for enterprise ready apps
• What is OpenUI5 • App Architecture Overview and Concepts • Responsiveness out of the box • Digging Deeper • Custom Controls • Enterprise Ready • Summary • Q&A
agenda();
Nov 23, 2014OpenUI5 – all you need for enterprise ready apps
JavaScript UI library Huge number of UI controls
MVC, data binding, templating, …
Enterprise-grade Responsive design Modern browsers and (touch) devices
Is Open Source, uses Open Source
What is OpenUI5
Nov 23, 2014OpenUI5 – all you need for enterprise ready apps
data.js
We are now Open Source
• Free to use • Fueled by jQuery, data.js and more • Open to community feedback and bug reports • Open for contributions • Updated frequently • http://openui5.org
iScroll
Nov 23, 2014OpenUI5 – all you need for enterprise ready apps
Nov 23, 2014OpenUI5 – all you need for enterprise ready apps
MVC
Views XML, JS, HTML,…
Controllers
ModelsJSON, XML or oData
data binding
user action
update
update
notify
Nov 23, 2014OpenUI5 – all you need for enterprise ready apps
Data Binding
• DATA BINDING • TWO-WAY-BINDING
App data
application)data+has)been)updated+
John Doe
Age: 36
John Doe, 35
UI5 Control / Output
Resulting UI5 Control / Output
App data updated
John Doe, 36
John Doe
Age: 35
App data
application)data+has)been)updated+
John Doe
Age: 36
John Doe, 35
UI5 Control / Output
UI5 Control / Output updated
John Doe, 36
John Doe
Age: 35
Resulting app data
Nov 23, 2014OpenUI5 – all you need for enterprise ready apps
App Architecture overview and concepts
index.html (Single Page Application)
Nov 23, 2014OpenUI5 – all you need for enterprise ready apps
<!DOCTYPE HTML> <html> <head> <script src="https://openui5.hana.ondemand.com/resources/sap-‐ui-‐core.js"></script> <script> sap.ui.getCore().attachInit(function() { }); </script> </head> <body> <div id="content"></div> </body> </html>
index.html
Nov 23, 2014OpenUI5 – all you need for enterprise ready apps
<!DOCTYPE HTML> <html> <head> <script src="https://openui5.hana.ondemand.com/resources/sap-‐ui-‐core.js"></script> <script> sap.ui.getCore().attachInit(function() { }); </script> </head> <body> <div id="content"></div> </body> </html>
index.html
Nov 23, 2014OpenUI5 – all you need for enterprise ready apps
<!DOCTYPE HTML> <html> <head> <script src="https://openui5.hana.ondemand.com/resources/sap-‐ui-‐core.js"></script> <script> sap.ui.getCore().attachInit(function() { }); </script> </head> <body> <div id="content"></div> </body> </html>
index.html
Nov 23, 2014OpenUI5 – all you need for enterprise ready apps
<!DOCTYPE HTML> <html> <head> <script src="https://openui5.hana.ondemand.com/resources/sap-‐ui-‐core.js"></script> <script> sap.ui.getCore().attachInit(function() { }); </script> </head> <body> <div id="content"></div> </body> </html>
index.html
Nov 23, 2014OpenUI5 – all you need for enterprise ready apps
App Architecture overview and concepts
Nov 23, 2014OpenUI5 – all you need for enterprise ready apps
<!DOCTYPE HTML> <html> <head> <script src="https://openui5.hana.ondemand.com/resources/sap-‐ui-‐core.js"></script> <script> sap.ui.getCore().attachInit(function() { new sap.ui.core.ComponentContainer("ProductsComponent").placeAt("content"); }); </script> </head> <body> <div id="content"></div> </body> </html>
index.html
Nov 23, 2014OpenUI5 – all you need for enterprise ready apps
<!DOCTYPE HTML> <html> <head> <script src="https://openui5.hana.ondemand.com/resources/sap-‐ui-‐core.js"></script> <script> sap.ui.getCore().attachInit(function() { new sap.ui.core.ComponentContainer("ProductsComponent").placeAt("content"); }); </script> </head> <body> <div id="content"></div> </body> </html>
index.html
Nov 23, 2014OpenUI5 – all you need for enterprise ready apps
<!DOCTYPE HTML> <html> <head> <script src="https://openui5.hana.ondemand.com/resources/sap-‐ui-‐core.js"></script> <script> sap.ui.getCore().attachInit(function() { new sap.ui.core.ComponentContainer("ProductsComponent").placeAt("content"); }); </script> </head> <body> <div id="content"></div> </body> </html>
index.html
Nov 23, 2014OpenUI5 – all you need for enterprise ready apps
sap.ui.core.UIComponent.extend("ProductsComponent", { metadata : { name : "Product Browser", version : "1.0", rootView : "App",
Component.js
Nov 23, 2014OpenUI5 – all you need for enterprise ready apps
sap.ui.core.UIComponent.extend("ProductsComponent", { metadata : { name : "Product Browser", version : "1.0", rootView : "App",
Component.js
Nov 23, 2014OpenUI5 – all you need for enterprise ready apps
sap.ui.core.UIComponent.extend("ProductsComponent", { metadata : { name : "Product Browser", version : "1.0", rootView : "App",
Component.js
Nov 23, 2014OpenUI5 – all you need for enterprise ready apps
sap.ui.core.UIComponent.extend("ProductsComponent", { metadata : { name : "Product Browser", version : "1.0", rootView : "App",
Component.js
Nov 23, 2014OpenUI5 – all you need for enterprise ready apps
App Architecture overview and concepts
Nov 23, 2014OpenUI5 – all you need for enterprise ready apps
init : function() { // Create and set domain model to the component var oModel = new sap.ui.model.odata.ODataModel(sServiceUrl); this.setModel(oModel); }
Component.js
Nov 23, 2014OpenUI5 – all you need for enterprise ready apps
init : function() { // Create and set domain model to the component var oModel = new sap.ui.model.odata.ODataModel(sServiceUrl); this.setModel(oModel); }
Component.js
Nov 23, 2014OpenUI5 – all you need for enterprise ready apps
App Architecture overview and concepts
Nov 23, 2014OpenUI5 – all you need for enterprise ready apps
routing : { routes : [ { pattern : "", view : "Master", subroutes : [ { pattern : "product/{productId}/:tab:", view : "Detail" } ] } ] }
Component.js
Nov 23, 2014OpenUI5 – all you need for enterprise ready apps
routing : { routes : [ { pattern : "", view : "Master", subroutes : [ { pattern : "product/{productId}/:tab:", view : "Detail" } ] } ] }
Component.js
Nov 23, 2014OpenUI5 – all you need for enterprise ready apps
App Architecture overview and concepts
Nov 23, 2014OpenUI5 – all you need for enterprise ready apps
App Architecture overview and concepts
Nov 23, 2014OpenUI5 – all you need for enterprise ready apps
<List items="{/Products}" <items> <ObjectListItem press="onSelect" title="{Name}" numberUnit="USD"> </ObjectListItem> </items> </List>
Master.view.xml
Nov 23, 2014OpenUI5 – all you need for enterprise ready apps
<List items="{/Products}" <items> <ObjectListItem press="onSelect" title="{Name}" numberUnit="USD"> </ObjectListItem> </items> </List>
Master.view.xml
Nov 23, 2014OpenUI5 – all you need for enterprise ready apps
<List items="{/Products}" <items> <ObjectListItem press="onSelect" title="{Name}" numberUnit="USD"> </ObjectListItem> </items> </List>
Master.view.xml
Nov 23, 2014OpenUI5 – all you need for enterprise ready apps
<List items="{/Products}" <items> <ObjectListItem press="onSelect" title="{Name}" numberUnit="USD"> </ObjectListItem> </items> </List>
Master.view.xml
Nov 23, 2014OpenUI5 – all you need for enterprise ready apps
<List items="{/Products}" <items> <ObjectListItem press="onSelect" title="{Name}" numberUnit="USD"> </ObjectListItem> </items> </List>
Master.view.xml
Nov 23, 2014OpenUI5 – all you need for enterprise ready apps
<List items="{/Products}" <items> <ObjectListItem press="onSelect" title="{Name}" numberUnit="USD"> </ObjectListItem> </items> </List>
Master.view.xml
Nov 23, 2014OpenUI5 – all you need for enterprise ready apps
<List items="{/Products}" <items> <ObjectListItem press="onSelect" title="{Name}" numberUnit="USD"> </ObjectListItem> </items> </List>
Master.view.xml
Nov 23, 2014OpenUI5 – all you need for enterprise ready apps
sap.ui.Controller.extend("Master", { onSelect : function(oEvent) { // Get the list item from the listItem parameter this.showDetail(oEvent.getParameter("listItem")); } });
Master.controller.js
Nov 23, 2014OpenUI5 – all you need for enterprise ready apps
sap.ui.Controller.extend("Master", { onSelect : function(oEvent) { // Get the list item from the listItem parameter this.showDetail(oEvent.getParameter("listItem")); } });
Master.controller.js
Nov 23, 2014OpenUI5 – all you need for enterprise ready apps
sap.ui.Controller.extend("Master", { onSelect : function(oEvent) { // Get the list item from the listItem parameter this.showDetail(oEvent.getParameter("listItem")); } });
Master.controller.js
Nov 23, 2014OpenUI5 – all you need for enterprise ready apps
App Architecture overview and concepts
Nov 23, 2014OpenUI5 – all you need for enterprise ready apps
Dependency Management
Make it modular and reusable// Require/Declare for JavaScript files
Have it in any language you like// Resource Bundles
Single file for production// Grunt
Nov 23, 2014OpenUI5 – all you need for enterprise ready apps
Nov 23, 2014OpenUI5 – all you need for enterprise ready apps
Nov 23, 2014OpenUI5 – all you need for enterprise ready apps
Nov 23, 2014OpenUI5 – all you need for enterprise ready apps
Responsiveness out of the box
Nov 23, 2014OpenUI5 – all you need for enterprise ready apps
Digging Deeper
Controls Playground
The Demo Apps
The Developer Guide
The API
Ė ĺ Ĥ Ń
Nov 23, 2014OpenUI5 – all you need for enterprise ready apps
Custom Controls
• Controls can be defined on-the-fly in JS • Data binding etc. out of the box
A simple control:http://jsbin.com/openui5-control/2/edit
Nov 23, 2014OpenUI5 – all you need for enterprise ready apps
Enterprise Ready
• Supportability (e.g. Ctrl-Alt-Shift-S popup) • Internationalization and right-to-left support • Highest quality • Extensibility • Theming • Accessibility
Nov 23, 2014OpenUI5 – all you need for enterprise ready apps
Theming
Accessibility
Accessibility refers to the possibility for everyone, including and especially people with disabilities, to access and use technology and information products. More than 1 billion people in the world have some form of disability.
High Contrast Black theme
Keyboard Handling
Screen Readersupport
Nov 23, 2014OpenUI5 – all you need for enterprise ready apps
Summary
Open Source// Free for any use and contribution
ONE Responsive Lib // Across browsers and devices
Enterprise Ready
Powerful Development Concepts// MVC, data binding, templating…
180+ controls
Nov 23, 2014OpenUI5 – all you need for enterprise ready apps
Web: GitHub:
Docs & Demos: Twitter:
http://openui5.orghttps://github.com/SAP/openui5/https://openui5.hana.ondemand.com@OpenUI5
Thank you!
Nov 23, 2014OpenUI5 – all you need for enterprise ready apps
Upcoming events
ISTA Conference 26-27 Novemberhttp://istabg.org/
Azure Bootcamp http://azure-camp.eu/
UXify Bulgaria http://uxify.org/
SQLSaturday https://www.sqlsaturday.com/
and more js.next();
STAY TUNED FOR 2015:
Nov 23, 2014OpenUI5 – all you need for enterprise ready apps
Thanks to our Sponsors:
Diamond Sponsor:
Gold Sponsors:
Swag Sponsors:
Media Partners:
Silver Sponsors:
Hosting partner:
Technological Partners:
Bronze Sponsors:
