@OpenUI5 #OpenUI5
OpenUI5 – the new responsive Web UI library
Andreas Kunz
@aku_dev
@OpenUI5
Christiane Kurz
http://openui5.org
@OpenUI5 #OpenUI5
OpenUI5 – the new responsive Web UI library
•Christiane Kurz
• Senior Developer for UI5
Core/Desktop at SAP
• With UI5 since 2012
• Started developing web
apps when Netscape
Navigator was still alive
•Andreas Kunz
• Architect for UI5 Mobile at
SAP
• With UI5 since its inception
• Open Source fan,
contributed to Mozilla
before Firefox was born
@OpenUI5 #OpenUI5
And now
for something
completely different
@OpenUI5 #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 #OpenUI5
<!DOCTYPE html>
<html><head>
<meta http-equiv='X-UA-Compatible' content='IE=edge' />
<title>Hello devoxxUK</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 devoxxUK'})
}).placeAt('content'); </script>
</head>
<body class='sapUiBody'>
<div id='content'></div>
</body>
</html>
“Hello devoxxUK”
Try it live at JS Bin
@OpenUI5 #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 #OpenUI5
Digging Deeper
• Controls Playground (aka Demokit)
• The Demo Apps
• The Developer Guide
• The API
@OpenUI5 #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 #OpenUI5
HTML Templating
• Powered by Handlebars.js
• UI5 model and data binding
• Can also be used to define
new controls
<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>
Try at http://jsbin.com/openui5-html-templating/1/edit
?
@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 #OpenUI5
Theming in UI5
OpenUI5
• makes use of .less to generate
CSS files for themes
• comes with several predefined
themes (including HCB)
• themes can differ a lot from each
other, little constraints are applied
• themes can also be edited with the
Theme Designer
@OpenUI5 #OpenUI5
Theming
Not an official App…
@OpenUI5 #OpenUI5
@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!
@YourTwitterHandle #DVXFR14{session hashtag} @OpenUI5 #OpenUI5
@OpenUI5 #OpenUI5
Web: http://openui5.org
GitHub: http://sap.github.io/openui5
Docs & Demos: https://openui5.hana.ondemand.com
Come to our booth for more!
@OpenUI5
Thank you!
@YourTwitterHandle #DVXFR14{session hashtag} @OpenUI5 #OpenUI5
@OpenUI5 #OpenUI5
Thanks / Creative Commons
•Presentation Template — Guillaume LaForge
•The Queen — A prestigious heritage with some
inspiration from The Sex Pistols and funny Devoxxians
•Girl with a Balloon — Banksy
•Tube — Michael Keen
Recommended