Lees verder

OpenUI5 op een non Netweaver platform
Hans Gmelig Meyling NL4B
VNSG magazine 2014
Deze keer gaat de NL4B tip over OpenUI5, misschien beter bekend als SAPUI5. SAPUI5 is een
ontwikkeling waar SAP al enkele jaren mee bezig is. SAPUI5 is een Javascript UI library met vele controls
waarmee webbased toepassingen kunnen worden gemaakt, voornamelijk voor mobile of tablet. Het
verschil met webdynpro en BSP zit er in dat bij SAPUI5 de development niet in ABAP zit, maar volledig
leunt op Javascript.
In tegenstelling tot menig HTML5/Javascriptvariant is de syntax van OpenUI5 echter veel meer Java
alike. OpenUI5 maakt gebruik van jQuery, maar biedt een ontwikkelomgeving met meer UI elementen,
inheritance, een ModelViewController paradigm en namespacing imports.
ABAP komt alleen nog om de hoek kijken bij specifieke calls die vanuit Javascript worden gemaakt naar
backend systemen om bijvoorbeeld data op te halen of op te slaan. We hebben het dan over de
Gateway/OData connectie, of direct op een ABAP stack gebruikmakend van bijvoorbeeld JSON of XML.
Bron: TechED 2013 CD119
OpenUI5 op non Netweaver servers
Noemenswaardig is de technische onafhankelijkheid van ABAP. Er deden al langer de geruchten dat
SAPUI5 ook geschikt zou kunnen zijn als frontend development tool voor non-SAP toepassingen. Eind
2013 is het verlossende woord van SAP dan gekomen. SAPUI5 is beschikbaar onder de naam OpenUI5,
free of charge voor elk gebruik onder de Apache 2.0 Open Source license.
VNSG magazine 2014
OpenUI5 op een non Netweaver platform
Hans Gmelig Meyling NL4B
Ontleend aan CD119 TechED 2013
OpenUI5 is door de opzet te gebruiken met conventionele HTTP servertechnieken, zoals Apache, IIS,
enzovoorts. SAPUI5 blijft wel bestaan als development environment op SAP Netweaver, maar verschilt
in principe niet met OpenUI5, met uitzondering van de beschikbaarheid van enkele specifieke libraries
en daarin gevatte controls. Voor meer informatie is een artikel van Andreas Kunz, gepubliceerd op 11
december 2013 op SCN een goed startpunt (1). Wij duiken nu de praktijk in van OpenUI5, en laten de
SAP backend onaangeroerd.
Starten met OpenUI5
We beginnen met de OpenUI5 startpagina: http://sap.github.io/openui5/index.html (2). Voor wie
Github niet kent, dat is een Cloud repository, die we nu echter alleen als startpunt gebruiken, maar dat
is verder volledig irrelevant voor dit artikel. Met de gegeven Url komen we op:
VNSG magazine 2014
OpenUI5 op een non Netweaver platform
Hans Gmelig Meyling NL4B
Via de link Download is de UI5 runtime en SDK te downloaden. Met de SDK heb je in Eclipse bijvoorbeeld
de mogelijkheid voor autocomplete, maar echt nodig is dat niet. Om met OpenUI5 aan de slag te kunnen
heb ik de UI5 Runtime gedownload, en wel de versie 1.16.8-SNAPSHOT (2013-12-17 / nightly build).
Uitgepakt ziet dit er als volgt uit:
De libraries zitten in de map resources. Verstandig is die directory met die naam in de uiteindelijke
webserver te gebruiken.
De non Netweaver server
Voor we verder gaan wil ik graag duidelijk maken dat elke HTTP server geschikt is om als basis voor de
OpenUI5 toepassing te dienen: IIS, Apache, of wat dan ook. Voor dit artikel heb ik echter gekozen voor
de volgende combinatie:


XAMPP portable MySQL database
Meer info op ApacheFriends.com
Een native HTTP server op basis van Java HttpServer classes
Meer info op docs.oracle.com
De reden dat ik hiervoor in dit geval heb gekozen is dat zo de gehele afwikkeling van client/server
communicatie in één development omgeving in zicht is. Development geschiedt hierbij in de IDE Eclipse,
en zonder in de details te verzuipen ziet het project er in de basis dan als volgt uit:
VNSG magazine 2014
OpenUI5 op een non Netweaver platform
Hans Gmelig Meyling NL4B
De lezer zal een aantal zaken herkennen:




createContext("/test", ... );
createContext("/service", ... );
FileServer.create(... new ... (Statics")
De projectmappen Statics en resources.
Analoog aan ABAP zouden we /test en /service kunnen zien als SICF services, en Statics als een
verwijzing naar een node in de Mime repository. In IIS zouden /test, /service en /Statics directories zijn
vanaf de server default root. De webserver kan worden gestart door class method WebServer main te
starten in de JVM.
De startpagina (index.html) vanuit Chrome opgestart ziet er dan als volgt uit:
De webserver doet het dus. Wellicht ten overvloede wijs ik gelijk op de fantastische mogelijkheden die
Chrome biedt voor Javascript debugging en webdevelopment in het algemeen.
De OpenUI5 View
De basis van een OpenUI5 page ziet er in essentie als volgt uit:
<!DOCTYPE html>
<html><head>
<meta http-equiv='X-UA-Compatible' content='IE=edge' />
<title>Hello World</title>
<script id='sap-ui-bootstrap'
src='resources/sap-ui-core.js'
data-sap-ui-theme='sap_bluecrystal'
data-sap-ui-libs='sap.ui.commons'></script>
<script>
// De plaats waar het allemaal gebeurt
// in Javascript
</script>
</head>
<body class='sapUiBody'>
<div id='content'></div>
</body>
VNSG magazine 2014
OpenUI5 op een non Netweaver platform
Hans Gmelig Meyling NL4B
</html>
Dat is de hele page. De kern zit hem in de bootstrap die wordt geladen vanuit 'resources/sap-ui-core.js'.
In het tweede stuk <script>...</script> wordt de daadwerkelijke lay-out opgebouwd, door via
javascript de controls op de page te zetten. Die controls worden dan explicit op een html element
geplaatst, zoals in dit geval het element <div id='content'></div>.
Bij een meer complexe lay-out is het al snel ononverzichtelijk alles in één html page te houden en krijg je
de voor ontwikkelaars bekende refinement, maar dan in JS files
<script src="app.js"></script>
</head>
<body class="sapUiBody" data-role="application">
<div id="content"></div>
</body>
En in app.js dan:
var detail = sap.ui.jsview("detailView", "testui5.Detail");
var oSplitApp = new sap.m.SplitApp("mySplitApp", {});
oSplitApp.placeAt("content");
Kijken we dan door op sap.ui.jsview("detailView", "testui5.Detail"); dan zie we de opbouw
van de controller zelf (in snapshot):
jQuery.sap.require("testui5.TaskListItem");
jQuery.sap.require ...;
sap.ui.jsview("testui5.Detail", {
getControllerName : function() {
OpenUI5 op een non Netweaver platform
Hans Gmelig Meyling NL4B
VNSG magazine 2014
return "testui5.Detail";
},
createContent : function(oController) {
return new sap.m.Page("formcontainer", {
title : "Overzicht",
content : [
new sap.ui.layout.form.SimpleForm({
editable : false,
layout : "ResponsiveGridLayout",
labelSpanL : 4,
...
new sap.ui.core.Title({
text : "Algemene gegevens"
}),
En dit is dan een echte toepassing geworden, met in het plaatje links het Eclipse project, in het midden
de App zelf in Chrome, en rechts de developer uilities in Chrome:
Dit laatste was een grote stap, van button naar een toepassing, maar de structuur van het programma
en hoe één en ander er in code uitziet is denk ik wel duidelijk. Overigens, dit is slechts één mogelijkheid
om een view te maken. Je kan ook kiezen voor XML of JSON views. Het lastige is nu dat voorbeelden bij
bepaalde controls in javascript code staan, en bij andere weer in XML views. Even snel de juiste manier
oppakken is er dus niet bij.
VNSG magazine 2014
OpenUI5 op een non Netweaver platform
Hans Gmelig Meyling NL4B
De voorbeelden van de controles zijn te vinden in:

De Developer Guide
https://openui5.hana.ondemand.com/#docs/guide/Documentation.html

En de API Reference
https://openui5.hana.ondemand.com/#docs/api/symbols/sap.ui.html

en de Control Gallery
https://openui5.hana.ondemand.com/#content/Controls/index.html
De Control Gallery biedt naast een overzicht gelijk voorbeelden waarbij de code van dat voorbeeld direct
is op te vragen:
Models in OpenUI5
In dit artikel houden we het beknopt, maar Models gebruiken we voor dataopslag in de client app, en
voor datatransport van en naar de server. Als voorbeeld nemen we een combobox.
<script>
var oComboBox1 = new sap.ui.commons.ComboBox("ComboBox1");
oComboBox1.setTooltip("Country");
oComboBox1.setEditable(true);
oComboBox1.setWidth("200px");
oComboBox1.placeAt("content");
</script>
</head>
<body class='sapUiBody'>
<div id='content'></div>
</body>
</html>
VNSG magazine 2014
OpenUI5 op een non Netweaver platform
Hans Gmelig Meyling NL4B
Deze combobox willen we natuurlijk vullen met data. Dat doen we met een model. In dit geval is het een
simpel model dat er in JSON als volgt uit ziet:
Companies:[{"compcode":"1000"},
{"compcode":"1000APA01"},
{"compcode":"1000APB12"},
{"compcode":"1000APB13"},
{"compcode":"1000APB14"}]
Een tabel dus genaamd Companies, met per regel een element genaamd compcode met een variabele
waarde: "1000", "1000APA01", etc.
Met de volgende code is dan een werkbaar Model te implementeren, met exact de gegeven data
var oModel = new sap.ui.model.json.JSONModel();
oModel.setData({
Companies:[{"compcode":"1000"},
{"compcode":"1000APA01"},
{"compcode":"1000APB12"},
{"compcode":"1000APB13"},
{"compcode":"1000APB14"}]
});
sap.ui.getCore().setModel(oModel);
oComboBox1.setModel(oModel);
var oItemTemplate1 = new sap.ui.core.ListItem();
oItemTemplate1.bindProperty("text", "compcode");
oComboBox1.bindItems("/Companies", oItemTemplate1);
Het op deze wijze 'hard' coderen van data kan handig zijn voor mockups. Mockup models kan je ook in
een losse JS file zetten, om het wat overzichtelijk te houden. Let op de binding van het model aan de
combobox Items en aan de property "text" van Listitem. In Chrome ziet dit er dan als volgt uit:
Met sap.ui.model.json.JSONModel.setData() zetten we een referentie naar het Model, in dit geval met
een stuk hard gecodeerde JSON, maar meer er zijn meer mogelijkheden.
VNSG magazine 2014
OpenUI5 op een non Netweaver platform
Hans Gmelig Meyling NL4B
Met de method sap.ui.model.json.JSONModel.loadData()kunnen we via een Ajax call data uit het
backend systeem halen:
var oModel = new sap.ui.model.json.JSONModel();
oModel.loadData("test");
"test" is in dit geval de (relatieve) Url van mijn webserver (zie de WebServer Java source in method main
createContext("/test"), die qua formaat dezelfde JSON oplevert:
Ofwel in de Java code in de server:
private String someDBUsage(Connection conn) throws InterruptedException, SQLException {
Statement st = conn.createStatement();
ResultSet rs = st.executeQuery("SELECT * FROM compcodes");
JSONObject output = new JSONObject();
JSONArray companies = new JSONArray();
output.put("Companies", companies);
while ( rs.next() ) {
companies.put(new JSONObject().put("compcode", rs.getString("compcode")));
}
return output.toString();
}
Met name de eenvoud valt op om van SQL queries JSON objecten te maken. Dit blijft eigenlijk net zo
makkelijk bij complexere geneste structuren.
In dit geval gaat het om een Combobox, maar op deze wijze kunnen net zo makkelijk complete
formulieren worden 'gebind' aan een Model. Vervolgens, van Model terug naar de Server? Meerdere
opties zijn daar dan weer voor mogelijk, maar een charmante optie is te vinden op SCN Extending
SAPUI5 JSON Model, gepost alweer in november 2012 door Christian Jianelli (6). Een andere optie is een
uitstapje naar native jQuery, of het gebruik van two-way bound models.
Epiloog
We hebben hier een heel klein stukje OpenUI5 besproken. OpenUI5 is heeft een steile leercurve, en
voor de ABAP of zelfs de Java webdynpro developer is er geen enkel feest van herkenning. Het aantal
controls is enorm, en serieuze ontwikkeling vereist grondige kennis van de control library, het specifieke
OpenUI5 MVC concept, en als specifieke styling gewenst is, CSS.
VNSG magazine 2014
OpenUI5 op een non Netweaver platform
Hans Gmelig Meyling NL4B
De documentatie is soms zeer overvloedig, maar bepaald niet altijd to-the-point, en vereist een stevig
basisniveau aan kennis over Javascript.
Echter, de mogelijkheden met andere dan Netweaver servers biedt niet alleen kansen voor nog
toegankelijker manieren voor application prototyping, maar is ook voor niet ABAP/Java developers qua
architectuur en concept een schitterend platform voor de ontwikkeling van web of mobile toepassingen.
14 februari 2014
Hans Gmelig Meyling
Onder meer geraadpleegde bronnen:
(1) SCN, artikel van Andreas Kunz, gepubliceerd december 2013
http://scn.sap.com/community/developer-center/front-end/blog/2013/12/11/what-is-openui5-sapui5
(2) OpenUI5 startpagina
http://sap.github.io/openui5/index.html
(3) OpenUI5 Developer Guide
https://openui5.hana.ondemand.com/#docs/guide/Documentation.html
(4) OpenUI5 API Reference
https://openui5.hana.ondemand.com/#docs/api/symbols/sap.ui.html
(5) OpenUI5 Control Gallery
https://openui5.hana.ondemand.com/#content/Controls/index.html
(6) SCN, artikel van Christian Jianelli, gepubliceerd november 2012
http://scn.sap.com/community/developer-center/front-end/blog/2012/11/20/extending-sapui5-jsonmodel