getting started with openui5 (san francisco state university)
TRANSCRIPT
The Responsive Web UI Library
Alexander Graebe Developer Evangelist @ SAP Labs
#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
#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
#OpenUI5
?
#OpenUI5
#OpenUI5
Sample Apps
#OpenUI5
#OpenUI5
#OpenUI5
#OpenUI5
Not an official app… http://localhost:8080/pacman/ Quickly play and explain how pacman and ghosts are actual controls etc.
#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.
#OpenUI5
Hands On:
http://goo.gl/BBXFrW
#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>
#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
#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;
}
#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
#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
#OpenUI5
Responsiveness out of the box
Native?
#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 - ….
#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
#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
#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
#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
#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
#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)
#OpenUI5
#OpenUI5
Web: http://openui5.org
GitHub: https://github.com/SAP/openui5/
Docs & Demos: https://openui5.hana.ondemand.com
@OpenUI5
Thank you!