![Page 1: Getting Started with OpenUI5 (San Francisco State University)](https://reader034.vdocuments.us/reader034/viewer/2022052509/55a20c291a28abbd4e8b46f4/html5/thumbnails/1.jpg)
The Responsive Web UI Library
Alexander Graebe Developer Evangelist @ SAP Labs
![Page 2: Getting Started with OpenUI5 (San Francisco State University)](https://reader034.vdocuments.us/reader034/viewer/2022052509/55a20c291a28abbd4e8b46f4/html5/thumbnails/2.jpg)
#OpenUI5
Our Agenda
§ What is OpenUI5? § Sample Apps § Jump Start: Hello World § The Model-View-Controller Pattern § Out Of The Box Features - Samples
§ Digging Deeper
![Page 3: Getting Started with OpenUI5 (San Francisco State University)](https://reader034.vdocuments.us/reader034/viewer/2022052509/55a20c291a28abbd4e8b46f4/html5/thumbnails/3.jpg)
#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
![Page 4: Getting Started with OpenUI5 (San Francisco State University)](https://reader034.vdocuments.us/reader034/viewer/2022052509/55a20c291a28abbd4e8b46f4/html5/thumbnails/4.jpg)
#OpenUI5
?
![Page 5: Getting Started with OpenUI5 (San Francisco State University)](https://reader034.vdocuments.us/reader034/viewer/2022052509/55a20c291a28abbd4e8b46f4/html5/thumbnails/5.jpg)
#OpenUI5
![Page 6: Getting Started with OpenUI5 (San Francisco State University)](https://reader034.vdocuments.us/reader034/viewer/2022052509/55a20c291a28abbd4e8b46f4/html5/thumbnails/6.jpg)
#OpenUI5
Sample Apps
![Page 7: Getting Started with OpenUI5 (San Francisco State University)](https://reader034.vdocuments.us/reader034/viewer/2022052509/55a20c291a28abbd4e8b46f4/html5/thumbnails/7.jpg)
#OpenUI5
![Page 8: Getting Started with OpenUI5 (San Francisco State University)](https://reader034.vdocuments.us/reader034/viewer/2022052509/55a20c291a28abbd4e8b46f4/html5/thumbnails/8.jpg)
#OpenUI5
![Page 9: Getting Started with OpenUI5 (San Francisco State University)](https://reader034.vdocuments.us/reader034/viewer/2022052509/55a20c291a28abbd4e8b46f4/html5/thumbnails/9.jpg)
#OpenUI5
![Page 10: Getting Started with OpenUI5 (San Francisco State University)](https://reader034.vdocuments.us/reader034/viewer/2022052509/55a20c291a28abbd4e8b46f4/html5/thumbnails/10.jpg)
#OpenUI5
Not an official app… http://localhost:8080/pacman/ Quickly play and explain how pacman and ghosts are actual controls etc.
![Page 11: Getting Started with OpenUI5 (San Francisco State University)](https://reader034.vdocuments.us/reader034/viewer/2022052509/55a20c291a28abbd4e8b46f4/html5/thumbnails/11.jpg)
#OpenUI5
Excursion: The interplay between 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.
![Page 12: Getting Started with OpenUI5 (San Francisco State University)](https://reader034.vdocuments.us/reader034/viewer/2022052509/55a20c291a28abbd4e8b46f4/html5/thumbnails/12.jpg)
#OpenUI5
Hands On:
http://goo.gl/BBXFrW
![Page 13: Getting Started with OpenUI5 (San Francisco State University)](https://reader034.vdocuments.us/reader034/viewer/2022052509/55a20c291a28abbd4e8b46f4/html5/thumbnails/13.jpg)
#OpenUI5
Jump Start: “Hello World!” <!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>
![Page 14: Getting Started with OpenUI5 (San Francisco State University)](https://reader034.vdocuments.us/reader034/viewer/2022052509/55a20c291a28abbd4e8b46f4/html5/thumbnails/14.jpg)
#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
![Page 15: Getting Started with OpenUI5 (San Francisco State University)](https://reader034.vdocuments.us/reader034/viewer/2022052509/55a20c291a28abbd4e8b46f4/html5/thumbnails/15.jpg)
#OpenUI5
MVC Example
§ Data is 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;
}
![Page 16: Getting Started with OpenUI5 (San Francisco State University)](https://reader034.vdocuments.us/reader034/viewer/2022052509/55a20c291a28abbd4e8b46f4/html5/thumbnails/16.jpg)
#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
![Page 17: Getting Started with OpenUI5 (San Francisco State University)](https://reader034.vdocuments.us/reader034/viewer/2022052509/55a20c291a28abbd4e8b46f4/html5/thumbnails/17.jpg)
#OpenUI5
Two-Way Data Binding Out 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
![Page 18: Getting Started with OpenUI5 (San Francisco State University)](https://reader034.vdocuments.us/reader034/viewer/2022052509/55a20c291a28abbd4e8b46f4/html5/thumbnails/18.jpg)
#OpenUI5
Responsiveness out of the box
Native?
![Page 19: Getting Started with OpenUI5 (San Francisco State University)](https://reader034.vdocuments.us/reader034/viewer/2022052509/55a20c291a28abbd4e8b46f4/html5/thumbnails/19.jpg)
#OpenUI5
UI Controls Out Of The Box
§ UI5 provides 180+ UI elements - Buttons - Lists - Images - Tables - Text-Fields (e.g. Search) - Popups (Modals) - Date Picker - ….
![Page 20: Getting Started with OpenUI5 (San Francisco State University)](https://reader034.vdocuments.us/reader034/viewer/2022052509/55a20c291a28abbd4e8b46f4/html5/thumbnails/20.jpg)
#OpenUI5
Example: Lists
§ This code 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
![Page 21: Getting Started with OpenUI5 (San Francisco State University)](https://reader034.vdocuments.us/reader034/viewer/2022052509/55a20c291a28abbd4e8b46f4/html5/thumbnails/21.jpg)
#OpenUI5
Example: Images
§ This code 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
![Page 22: Getting Started with OpenUI5 (San Francisco State University)](https://reader034.vdocuments.us/reader034/viewer/2022052509/55a20c291a28abbd4e8b46f4/html5/thumbnails/22.jpg)
#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
![Page 23: Getting Started with OpenUI5 (San Francisco State University)](https://reader034.vdocuments.us/reader034/viewer/2022052509/55a20c291a28abbd4e8b46f4/html5/thumbnails/23.jpg)
#OpenUI5
Advanced: Google Maps in 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
![Page 24: Getting Started with OpenUI5 (San Francisco State University)](https://reader034.vdocuments.us/reader034/viewer/2022052509/55a20c291a28abbd4e8b46f4/html5/thumbnails/24.jpg)
#OpenUI5
Enterprise-Grade Out Of The Box
§ Extra quality assurance § Diagnostics (e.g. Ctrl-Alt-Shift-S popup)
§ Internationalization and right-to-left support § Accessibility § Extensibility
§ Theming
![Page 25: Getting Started with OpenUI5 (San Francisco State University)](https://reader034.vdocuments.us/reader034/viewer/2022052509/55a20c291a28abbd4e8b46f4/html5/thumbnails/25.jpg)
#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)
![Page 26: Getting Started with OpenUI5 (San Francisco State University)](https://reader034.vdocuments.us/reader034/viewer/2022052509/55a20c291a28abbd4e8b46f4/html5/thumbnails/26.jpg)
#OpenUI5
![Page 27: Getting Started with OpenUI5 (San Francisco State University)](https://reader034.vdocuments.us/reader034/viewer/2022052509/55a20c291a28abbd4e8b46f4/html5/thumbnails/27.jpg)
#OpenUI5
Web: http://openui5.org
GitHub: https://github.com/SAP/openui5/
Docs & Demos: https://openui5.hana.ondemand.com
@OpenUI5
Thank you!