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>

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>

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",

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); }

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" } ] } ] }

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

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")); } });

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

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:

OpenUI5@JSNext Bulgaria 2014

Recomendados

Recomendados

Más contenido relacionado

Similar a OpenUI5@JSNext Bulgaria 2014

Similar a OpenUI5@JSNext Bulgaria 2014 (20)

Último

Último (20)

OpenUI5@JSNext Bulgaria 2014