Download as PDF, PPTX
Uploaded byAlexander Graebe
Getting Started with OpenUI5 (San Francisco State University)
OpenUI5 is a robust JavaScript UI library from SAP that provides a large set of UI controls, adhering to the MVC pattern and enabling responsive design. The document discusses sample applications, the library's features, and practical coding examples for creating basic applications. It highlights two-way data binding, various data source formats, and the library's enterprise-grade qualities, along with links to additional resources and documentation.
More Related Content
Similar to Getting Started with OpenUI5 (San Francisco State University)
Getting Started with OpenUI5 (San Francisco State University)
- 1. The Responsive WebUI Library Alexander Graebe Developer Evangelist @ SAP Labs
- 2. #OpenUI5 Our Agenda § What isOpenUI5? § Sample Apps § Jump Start: Hello World § The Model-View-Controller Pattern § Out Of The Box Features - Samples § Digging Deeper
- 3. #OpenUI5 What is OpenUI5? § JavaScript UI library § Huge number of UI controls § MVC, data binding, templating, … § Enterprise-grade § Most current browsers and (touch) devices § Responsive & adaptive design § Is Open Source, uses Open Source
- 4.
- 5.
- 6.
- 7.
- 8.
- 9.
- 10. #OpenUI5 Not an officialapp… http://localhost:8080/pacman/ Quickly play and explain how pacman and ghosts are actual controls etc.
- 11. #OpenUI5 Excursion: The interplaybetween HTML, CSS & JS § HTML: - Tell the browser what to display (in specific order) § CSS: - Tell the browser how (and where) to display it § JavaScript: - Tell the browser what users can do with it My First Website Check it out now. My First Website Check it out now. My First Website Check it out now.
- 12.
- 13. #OpenUI5 Jump Start: HelloWorld! <!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 World!'}) }).placeAt('content'); </script> </head> <body class='sapUiBody'> <div id='content'></div> </body> </html>
- 14. #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
- 15. #OpenUI5 MVC Example § Datais represented in the Model - Load JSON or XML via AJAX § Controller represents the methods that can be implemented - Can modify Model & View § View is the UI implementation - Triggers Controller & can modify Model { "first": "John", "last": "Doe", "age": 16, "sex": "M", } function isTeenager(person) { // teens are between 13 and 19 years old if(person.age > 13 && person.age < 19) { return true; } return false; }
- 16. #OpenUI5 Advanced: Data Sources § Formats JSON, XML and OData supported out-of-the-box § Data can be gathered from various sources - Every source will get an identifier § Sample code to consume various APIs: - http://jsbin.com/howoyeqoki/3/edit
- 17. #OpenUI5 Two-Way Data BindingOut Of The Box § Changes in the model are reflected in the view and vice versa § Sample Google Map control: http://jsbin.com/openui5-map-db/2/edit
- 18. #OpenUI5 Responsiveness out ofthe box Native?
- 19. #OpenUI5 UI Controls OutOf The Box § UI5 provides 180+ UI elements - Buttons - Lists - Images - Tables - Text-Fields (e.g. Search) - Popups (Modals) - Date Picker - ….
- 20. #OpenUI5 Example: Lists § Thiscode example shows how to create lists: - http://jsbin.com/howoyeqoki/2/edit § Lists can have various types of list items - Standard, Custom, Input, .. § Lists have “modes”: - SingleSelect, MultiSelect, Delete
- 21. #OpenUI5 Example: Images § Thiscode example shows how to insert and style images: - http://jsbin.com/gapusodabo/3/edit § Images can be placed in all content fields (and as icons in lists) § Two approaches to insert images: - Add sap.m.Image to content - Set background image via CSS
- 22. #OpenUI5 Example: Date Picker § This code example shows how to add a Date Picker: - http://jsbin.com/cavazojuma/2/edit § Input should … - get validated (“strict parsing”) - be saved into the model
- 23. #OpenUI5 Advanced: Google Mapsin OpenUI5 § This code example shows how to create a custom UI element based on Google Maps: - http://jsbin.com/zoyamekuna/4/edit § Implementation consists of 3 activities: - Define custom control - Create model for control API - Instantiate new control
- 24. #OpenUI5 Enterprise-Grade Out OfThe Box § Extra quality assurance § Diagnostics (e.g. Ctrl-Alt-Shift-S popup) § Internationalization and right-to-left support § Accessibility § Extensibility § Theming
- 25. #OpenUI5 Digging deeper –The Documentation § Controls Overview (controls, examples and source code) § Demo Apps (sample apps and source code) § Explored (controls docs, code samples with XML views) § Developer Guide (how to, explanation, samples) § Controls API (descriptions, methods, properties)
- 26.
- 27. #OpenUI5 Web: http://openui5.org GitHub: https://github.com/SAP/openui5/ Docs& Demos: https://openui5.hana.ondemand.com @OpenUI5 Thank you!