Getting Started with OpenUI5 (San Francisco State University)

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
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
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
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
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
Web: http://openui5.org
GitHub: https://github.com/SAP/openui5/

Docs & Demos: https://openui5.hana.ondemand.com
@OpenUI5
Thank you!

Getting Started with OpenUI5 (San Francisco State University)

Empfohlen

Empfohlen

Weitere ähnliche Inhalte

Was ist angesagt?

Was ist angesagt? (11)

Andere mochten auch

Andere mochten auch (20)

Ähnlich wie Getting Started with OpenUI5 (San Francisco State University)

Ähnlich wie Getting Started with OpenUI5 (San Francisco State University) (20)

Kürzlich hochgeladen

Kürzlich hochgeladen (20)

Getting Started with OpenUI5 (San Francisco State University)