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)

Recommandé

Recommandé

Contenu connexe

Tendances

Tendances (11)

En vedette

En vedette (20)

Similaire à Getting Started with OpenUI5 (San Francisco State University)

Similaire à Getting Started with OpenUI5 (San Francisco State University) (20)

Dernier

Dernier (20)

Getting Started with OpenUI5 (San Francisco State University)