Date post: | 27-Aug-2014 |
Category: |
Software |
Upload: | andreas-kunz |
View: | 733 times |
Download: | 7 times |
OpenUI5
the new responsive Web
UI library Frederic Berg & Andreas Kunz
SAP SE
#OpenUI5
OpenUI5
JavaScript UI library
Huge number of UI controls
MVC, data binding, templating, …
Enterprise-grade
Most current browsers and (touch) devices
Responsive design
Is Open Source, uses Open Source
#OpenUI5
“Hello OSCON”
Try it live at JS Bin
<!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 OSCON'})
}).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
Digging deeper – The Documentation
Controls Playground (aka Demokit)
The Demo Apps
The Developer Guide
The API
#OpenUI5
Custom Controls
Controls can be defined on-the-fly in JS
Data binding etc. out of the box
A simple control:
http://jsbin.com/openui5-control/2/edit
A Google Map control:
http://jsbin.com/openui5-map-db/2/edit
Note the two-way data binding!
#OpenUI5
HTML Templating
Powered by Handlebars.js
UI5 model and data binding
Can also be used to define
new controls
Simple example:
http://jsbin.com/openui5-html-
templating/1/edit
<div id="simpleTemplate"
data-type="text/x-handlebars-
template">
<div>{{text path="/name"}}:</div>
<ul>
{{#each path="/players"}}
<li>
{{text path="first"}}
{{text path="last"}}
</li>
{{/each}}
</ul>
</div>
#OpenUI5
?
#OpenUI5
Enterprise-grade
Extra quality assurance
Supportability (e.g. Ctrl-Alt-Shift-S popup)
Internationalization and right-to-left support
Accessibility
Extensibility
Theming
#OpenUI5
Theming in UI5
OpenUI5
makes use of LESS to generate
CSS files for themes
comes with several predefined
themes
themes can differ a lot from each
other, little constraints are
applied
themes can also be edited with
the Theme Designer
#OpenUI5
Theming
#OpenUI5
#OpenUI5
#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
#OpenUI5
Open Source
SAPUI5 was closed, but…
We are Open Source fans, ~30 other OS libs in UI5
SAP community pushed for it
December 11th, 2013: Yay! OpenUI5 is born!
http://openui5.org/
https://github.com/SAP/openui5/
Sources not forkable yet – but soon!
#OpenUI5
Web: http://openui5.org
GitHub: https://github.com/SAP/openui5/
Docs & Demos: https://openui5.hana.ondemand.com
Come to our booth for more!
@OpenUI5
Thank you!