OpenUI5@JSNext Bulgaria 2014
0 likes910 views
This document discusses OpenUI5, an open source JavaScript UI library for building enterprise-ready applications. It provides over 180 controls, supports data binding, templating and responsiveness out of the box. The document outlines OpenUI5's app architecture including components, views and controllers. It also discusses topics like custom controls, theming, accessibility and how OpenUI5 meets the needs of enterprise applications.
![OpenUI5 – all you need for enterprise ready apps Nov 23, 2014
Component.js
routing
:
{
routes
:
[
{
pattern
:
"",
view
:
"Master",
subroutes
:
[
{
pattern
:
"product/{productId}/:tab:",
view
:
"Detail"
}
]
}
]
}](https://image.slidesharecdn.com/openui5jsnext2014-141206082744-conversion-gate01/85/OpenUI5-JSNext-Bulgaria-2014-26-320.jpg)
![OpenUI5 – all you need for enterprise ready apps Nov 23, 2014
Component.js
routing
:
{
routes
:
[
{
pattern
:
"",
view
:
"Master",
subroutes
:
[
{
pattern
:
"product/{productId}/:tab:",
view
:
"Detail"
}
]
}
]
}](https://image.slidesharecdn.com/openui5jsnext2014-141206082744-conversion-gate01/85/OpenUI5-JSNext-Bulgaria-2014-27-320.jpg)
OpenUI5@JSNext Bulgaria 2014
- 1. What is OpenUI5 – all you need for enterprise ready apps Nov 23, 2014 askQuestion(); ?
- 2. Sofia Nov 23, 2014 var title = “OpenUI5 – all you need for enterprise ready apps”; var info = { name: “Stanislava Baltova, Petya Begovska, Peter Skelin”, otherOptional: “SAP Labs Bulgaria” };
- 3. OpenUI5 – all you need for enterprise ready apps Nov 23, 2014 agenda(); • What is OpenUI5 • App Architecture Overview and Concepts • Responsiveness out of the box • Digging Deeper • Custom Controls • Enterprise Ready • Summary • Q&A
- 4. What is OpenUI5 OpenUI5 – all you need for enterprise ready apps Nov 23, 2014 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
- 5. We are now Open Source data.js OpenUI5 – all you need for enterprise ready apps Nov 23, 2014 • 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
- 6. OpenUI5 – all you need for enterprise ready apps Nov 23, 2014
- 7. OpenUI5 – all you need for enterprise ready apps Nov 23, 2014 MVC Views XML, JS, HTML,… Controllers Models JSON, XML or oData data binding user action update update notify
- 8. UI5 Control / Output UI5 Control / Output OpenUI5 – all you need for enterprise ready apps Nov 23, 2014 Data Binding • DATA BINDING • TWO-WAY-BINDING App data application)dat+a has)been)updated+ John Doe Age: 36 John Doe, 35 Resulting UI5 Control / Output App data updated John Doe, 36 John Doe Age: 35 App data application)dat+a has)been)updated+ John Doe Age: 36 John Doe, 35 UI5 Control / Output updated John Doe, 36 John Doe Age: 35 Resulting app data
- 9. App Architecture overview and concepts index.html (Single Page Application) OpenUI5 – all you need for enterprise ready apps Nov 23, 2014
- 10. OpenUI5 – all you need for enterprise ready apps Nov 23, 2014 index.html <!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>
- 11. OpenUI5 – all you need for enterprise ready apps Nov 23, 2014 index.html <!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>
- 12. OpenUI5 – all you need for enterprise ready apps Nov 23, 2014 index.html <!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>
- 13. OpenUI5 – all you need for enterprise ready apps Nov 23, 2014 index.html <!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>
- 14. App Architecture overview and concepts OpenUI5 – all you need for enterprise ready apps Nov 23, 2014
- 15. OpenUI5 – all you need for enterprise ready apps Nov 23, 2014 index.html <!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>
- 16. OpenUI5 – all you need for enterprise ready apps Nov 23, 2014 index.html <!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>
- 17. OpenUI5 – all you need for enterprise ready apps Nov 23, 2014 index.html <!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>
- 18. Component.js sap.ui.core.UIComponent.extend("ProductsComponent", { OpenUI5 – all you need for enterprise ready apps Nov 23, 2014 metadata : { name : "Product Browser", version : "1.0", rootView : "App",
- 19. Component.js sap.ui.core.UIComponent.extend("ProductsComponent", { OpenUI5 – all you need for enterprise ready apps Nov 23, 2014 metadata : { name : "Product Browser", version : "1.0", rootView : "App",
- 20. Component.js sap.ui.core.UIComponent.extend("ProductsComponent", { OpenUI5 – all you need for enterprise ready apps Nov 23, 2014 metadata : { name : "Product Browser", version : "1.0", rootView : "App",
- 21. Component.js sap.ui.core.UIComponent.extend("ProductsComponent", { OpenUI5 – all you need for enterprise ready apps Nov 23, 2014 metadata : { name : "Product Browser", version : "1.0", rootView : "App",
- 22. App Architecture overview and concepts OpenUI5 – all you need for enterprise ready apps Nov 23, 2014
- 23. OpenUI5 – all you need for enterprise ready apps Nov 23, 2014 Component.js init : function() { // Create and set domain model to the component var oModel = new sap.ui.model.odata.ODataModel(sServiceUrl); this.setModel(oModel); }
- 24. OpenUI5 – all you need for enterprise ready apps Nov 23, 2014 Component.js init : function() { // Create and set domain model to the component var oModel = new sap.ui.model.odata.ODataModel(sServiceUrl); this.setModel(oModel); }
- 25. App Architecture overview and concepts OpenUI5 – all you need for enterprise ready apps Nov 23, 2014
- 26. OpenUI5 – all you need for enterprise ready apps Nov 23, 2014 Component.js routing : { routes : [ { pattern : "", view : "Master", subroutes : [ { pattern : "product/{productId}/:tab:", view : "Detail" } ] } ] }
- 27. OpenUI5 – all you need for enterprise ready apps Nov 23, 2014 Component.js routing : { routes : [ { pattern : "", view : "Master", subroutes : [ { pattern : "product/{productId}/:tab:", view : "Detail" } ] } ] }
- 28. App Architecture overview and concepts OpenUI5 – all you need for enterprise ready apps Nov 23, 2014
- 29. App Architecture overview and concepts OpenUI5 – all you need for enterprise ready apps Nov 23, 2014
- 30. Master.view.xml <List items="{/Products}" <items> <ObjectListItem press="onSelect" title="{Name}" numberUnit="USD"> </ObjectListItem> </items> </List> OpenUI5 – all you need for enterprise ready apps Nov 23, 2014
- 31. Master.view.xml <List items="{/Products}" <items> <ObjectListItem press="onSelect" title="{Name}" numberUnit="USD"> </ObjectListItem> </items> </List> OpenUI5 – all you need for enterprise ready apps Nov 23, 2014
- 32. Master.view.xml <List items="{/Products}" <items> <ObjectListItem press="onSelect" title="{Name}" numberUnit="USD"> </ObjectListItem> </items> </List> OpenUI5 – all you need for enterprise ready apps Nov 23, 2014
- 33. Master.view.xml <List items="{/Products}" <items> <ObjectListItem press="onSelect" title="{Name}" numberUnit="USD"> </ObjectListItem> </items> </List> OpenUI5 – all you need for enterprise ready apps Nov 23, 2014
- 34. Master.view.xml <List items="{/Products}" <items> <ObjectListItem press="onSelect" title="{Name}" numberUnit="USD"> </ObjectListItem> </items> </List> OpenUI5 – all you need for enterprise ready apps Nov 23, 2014
- 35. Master.view.xml <List items="{/Products}" <items> <ObjectListItem press="onSelect" title="{Name}" numberUnit="USD"> </ObjectListItem> </items> </List> OpenUI5 – all you need for enterprise ready apps Nov 23, 2014
- 36. Master.view.xml <List items="{/Products}" <items> <ObjectListItem press="onSelect" title="{Name}" numberUnit="USD"> </ObjectListItem> </items> </List> OpenUI5 – all you need for enterprise ready apps Nov 23, 2014
- 37. Master.controller.js sap.ui.Controller.extend("Master", { OpenUI5 – all you need for enterprise ready apps Nov 23, 2014 onSelect : function(oEvent) { // Get the list item from the listItem parameter this.showDetail(oEvent.getParameter("listItem")); } });
- 38. Master.controller.js sap.ui.Controller.extend("Master", { OpenUI5 – all you need for enterprise ready apps Nov 23, 2014 onSelect : function(oEvent) { // Get the list item from the listItem parameter this.showDetail(oEvent.getParameter("listItem")); } });
- 39. Master.controller.js sap.ui.Controller.extend("Master", { OpenUI5 – all you need for enterprise ready apps Nov 23, 2014 onSelect : function(oEvent) { // Get the list item from the listItem parameter this.showDetail(oEvent.getParameter("listItem")); } });
- 40. App Architecture overview and concepts OpenUI5 – all you need for enterprise ready apps Nov 23, 2014
- 41. 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 OpenUI5 – all you need for enterprise ready apps Nov 23, 2014 // Grunt
- 42. OpenUI5 – all you need for enterprise ready apps Nov 23, 2014
- 43. OpenUI5 – all you need for enterprise ready apps Nov 23, 2014
- 44. OpenUI5 – all you need for enterprise ready apps Nov 23, 2014
- 45. Responsiveness out of the box OpenUI5 – all you need for enterprise ready apps Nov 23, 2014
- 46. Digging Deeper Ė ĺ Ĥ Ń OpenUI5 – all you need for enterprise ready apps Nov 23, 2014 Controls Playground The Demo Apps The Developer Guide The API
- 47. 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 OpenUI5 – all you need for enterprise ready apps Nov 23, 2014
- 48. Enterprise Ready • Supportability (e.g. Ctrl-Alt-Shift-S popup) • Internationalization and right-to-left support • Highest quality • Extensibility • Theming • Accessibility OpenUI5 – all you need for enterprise ready apps Nov 23, 2014
- 49. OpenUI5 – all you need for enterprise ready apps Nov 23, 2014 Theming
- 50. Accessibility High Contrast Black theme Keyboard Handling Screen Reader support 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.
- 51. 180+ controls OpenUI5 – all you need for enterprise ready apps Nov 23, 2014 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…
- 52. Thank you! OpenUI5 – all you need for enterprise ready apps Nov 23, 2014 Web: GitHub: Docs & Demos: Twitter: http://openui5.org https://github.com/SAP/openui5/ https://openui5.hana.ondemand.com @OpenUI5
- 53. Upcoming events ISTA Conference 26-27 November http://istabg.org/ STAY TUNED FOR 2015: Azure Bootcamp http://azure-camp.eu/ UXify Bulgaria http://uxify.org/ SQLSaturday https://www.sqlsaturday.com/ and more js.next(); OpenUI5 – all you need for enterprise ready apps Nov 23, 2014
- 54. Thanks to our Sponsors: OpenUI5 – all you need for enterprise ready apps Nov 23, 2014 Diamond Sponsor: Hosting partner: Gold Sponsors: Silver Sponsors: Technological Partners: Bronze Sponsors: Swag Sponsors: Media Partners: