OSCON 2014: OpenUI5 - The New Responsive Web UI Library
5 likes3,473 views
OpenUI5 is a JavaScript UI library designed for enterprise-grade applications, featuring a vast range of UI controls and capabilities such as MVC, data binding, and templating. It supports responsiveness across devices and browsers and is developed as open source, with extensive documentation and support for custom controls. The library also offers theming capabilities using LESS and allows for internationalization and accessibility features.
OSCON 2014: OpenUI5 - The New Responsive Web UI Library
- 1. OpenUI5 the new responsive Web UI library Frederic Berg & Andreas Kunz SAP SE
- 2. #OpenUI5 OpenUI5 JavaScript UI library Huge number of UI controls MVC, data binding, templating, … Enterprise-grade Most current browsers and (touch) devices Responsive design Is Open Source, uses Open Source
- 3. #OpenUI5 “Hello OSCON” Try it live at JS Bin <!DOCTYPE html> <html><head> <meta http-equiv='X-UA-Compatible' content='IE=edge' /> <title>Hello OSCON</title> <script id='sap-ui-bootstrap' type='text/javascript' src='/sapui5/resources/sap-ui-core.js' data-sap-ui-theme='sap_goldreflection' data-sap-ui-libs='sap.ui.ux3'></script> <script> new sap.ui.ux3.Shell({ content: new sap.ui.commons.Button({text:'Hello OSCON'}) }).placeAt('content'); </script> </head> <body class='sapUiBody'> <div id='content'></div> </body> </html>
- 4. #OpenUI5 MVC done right Views should be easy to write, and easy to read, and easy to extend Different view types and models should be there to meet everyone’s needs
- 5. #OpenUI5 Responsiveness out of the box
- 6. #OpenUI5 Digging deeper – The Documentation Controls Playground (aka Demokit) The Demo Apps The Developer Guide The API
- 7. #OpenUI5 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 A Google Map control: http://jsbin.com/openui5-map-db/2/edit Note the two-way data binding!
- 8. #OpenUI5 HTML Templating Powered by Handlebars.js UI5 model and data binding Can also be used to define new controls Simple example: http://jsbin.com/openui5-html- templating/1/edit <div id="simpleTemplate" data-type="text/x-handlebars- template"> <div>{{text path="/name"}}:</div> <ul> {{#each path="/players"}} <li> {{text path="first"}} {{text path="last"}} </li> {{/each}} </ul> </div>
- 9. #OpenUI5 ?
- 10. #OpenUI5 Enterprise-grade Extra quality assurance Supportability (e.g. Ctrl-Alt-Shift-S popup) Internationalization and right-to-left support Accessibility Extensibility Theming
- 11. #OpenUI5 Theming in UI5 OpenUI5 makes use of LESS to generate CSS files for themes comes with several predefined themes themes can differ a lot from each other, little constraints are applied themes can also be edited with the Theme Designer
- 12. #OpenUI5 Theming
- 13. #OpenUI5
- 14. #OpenUI5
- 15. #OpenUI5
- 16. #OpenUI5
- 17. #OpenUI5
- 18. #OpenUI5 Not an official app… http://localhost:8080/pacman/ Quickly play and explain how pacman and ghosts are actual controls etc.
- 19. #OpenUI5
- 20. #OpenUI5 Open Source SAPUI5 was closed, but… We are Open Source fans, ~30 other OS libs in UI5 SAP community pushed for it December 11th, 2013: Yay! OpenUI5 is born! http://openui5.org/ https://github.com/SAP/openui5/ Sources not forkable yet – but soon!
- 21. #OpenUI5 Web: http://openui5.org GitHub: https://github.com/SAP/openui5/ Docs & Demos: https://openui5.hana.ondemand.com Come to our booth for more! @OpenUI5 Thank you!