HTML, CSS & JAVASCRIPT

12/2014Sonderdruck 12/201412/2014 SonderdruckSonderdruck

HTML, CSS & JAVASCRIPT

JavaScript-Framework OpenUI5

TeilmengeBei OpenUI5 handelt es sich um ein Open-Source-JavaScript-Framework, das seit Ende 2013 unter Apache-2.0-Lizenz von der SAP AG zur freien Nutzung zur Verfügung gestellt wird. Von Alexander Trapp

In diesem Artikel werden wir exempla-risch eine kleine Adressverwaltung unter Ver-wendung der mobil-optimierten Controls aus sap.m entwickeln, um einen ersten Einblick in die Möglichkeiten von OpenUI5 zu geben. Das OpenUI5 Framework kann unter http://sap.git hub.io/openui5/download.html heruntergela-den werden (Bild 1).

HTML-Gerüst und Bootstrap

Die Anwendung wird in einer HTML-Seite (Lis-ting 1) geladen und dort in einem Element des DOM dargestellt. Zunächst werden im Boot-strap-Skript die Kernkomponenten des Frame-works geladen:

<script src="https://openui5.hana. ondemand.com/resources/sap-ui-core.js" id="sap-ui-bootstrap" data-sap-ui-libs="sap.m" data-sap-ui-theme="sap_bluecrystal" data-sap-ui-xx-bindingSyntax="complex"> </script>

Die src-Eigenschaft legt hier den Pfad zum Framework fest, während mit der data-sap-ui-libs-Eigenschaft weitere verwendete OpenUI5-Bibliotheken angegeben werden. Mit data-sap-ui-theme wird schließlich das zu verwendende Visual Theme bestimmt. Im Standard gibt es derzeit die Themes sap_goldreflection, sap_blue-crystal, sap_platinum und sap_highcontrastblack. Außerdem besteht die Möglichkeit, eigene The-mes zu erstellen.

Im zweiten Script-Block wird zunächst der Pfad zu den Daten (model) und den Views (view) mittels sap.ui.localResources bekannt gemacht.

Wir werden als Datenmodell ein JSON-Mo-del verwenden. Des Weiteren enthält das Frame-work noch Implementierungen für XML- und OData-Models, sowie ein spezielles Resource-Model, mit dem zum Beispiel Mehrsprachig-keit realisiert werden kann. Um die Komplexi-tät in unserem Beispiel möglichst gering zu hal-ten, erstellen wir eine Datei namens contactMo-del.json im model-Ordner unterhalb unseres root-Ordners, die einige Test-Adressen im JSON-For-mat enthält. In unserer HTML-Datei fügen wir

nun folgenden Code ein, um ein globales Da-tenmodel für die Anwendung zu erstellen und zu befüllen:

var oModel = new sap.ui.model.json.JSONModel("model/contactModel.json"); sap.ui.getCore().setModel(oModel);

Mittels der Funktionen der sap.ui.Device-Bib-liothek lassen sich endgerätespezifische Eigen-schaften des Clients auslesen, die wir in einem JSON-Model (deviceModel) zusammenfassen. Dieses Model können wir in den Views verwen-den, um das Verhalten der Anwendung in Ab-hängigkeit vom Endgerät zu steuern. Als Bei-spiel sei hier die Aktualisierung der Anzeige mittels Swipe bei Geräten mit Touchscreen ge-genüber der Aktualisierung mittels Refresh-Buttons bei Geräten mit Mausbedienung ge-nannt. Für das DeviceModel muss der Default-BindingMode auf OneWay gesetzt werden, da bei einem TwoWay-Binding das Model zur Laufzeit geändert werden könnte und dann nicht mehr den plattformspezifischen Eigenschaften ent-sprechen würde.

Erstellen der Views und Controller

Anschließend erstellen wir eine SplitApp und weisen ihr jeweils eine Master- und eine Detail-View zu. Dieses Objekt wird nun in ein Shell-Objekt eingebettet, das im DOM auf dem Ele-ment mit der ID content plaziert wird.

Als Nächstes erstellen wir die Views und die dazugehörigen Controller. Während es sich bei den Controllern immer um JavaScript-Code handelt, kann man bei der Erstellung der Views zwischen XML, JavaScript, JSON und HTML als Entwicklungsparadigma wählen. In der Re-gel empfiehlt sich die Verwendung von XML-Views, da diese den Entwickler aufgrund der XML-Spezifikation eher zu einer strukturierten Vorgehensweise zwingen. Programmlogik kann hier nur im Controller ausgeführt werden.

Zunächst erstellen wir die Detail-View Em-pty. Diese View besteht lediglich aus einer lee-ren Page, die nach dem Anwendungsstart im Detailbereich angezeigt wird, bevor im Navi-gationsbereich eine Adresse ausgewählt wurde. Die Views werden im Ordner view unterhalb des root-Ordners angelegt.

Die XML-Views erhalten laut Konvention fol-gende Benennung: [Viewname].view.xml, die da-zugehörigen Controller-Dateien werden [View-name].controller.js genannt. Unsere Empty-View

Bei OpenUI5 handelt es sich um eine Teil-menge des SAP UI5-Frameworks, das un-

ter anderem zur Entwicklung der Fiori-Apps im SAP-Umfeld Verwendung findet. OpenUI5 ba-siert auf jQuery sowie einigen weiteren Open- Source-Frameworks und folgt dem aktuellen HTML5-Webstandard.

Dank der großen Anzahl vorgefertigter UI-Controls, Unterstützung des MVC-Paradigmas und bereits integrierter Methoden zur Daten-bindung mittels JSON, XML und OData eig-net sich das Framework zur Entwicklung ver-schiedenster Multiplattform-Webapplikationen. Durch Verwendung vorgefertigter Visual The-mes erscheinen die Anwendungen in einem ein-heitlichen Look and Feel.

RIA oder Mobile

Sämtliche UI-Komponenten sind von sap.ui.core.Control abgeleitet und können mittels dessen extend-Methode erweitert werden. Die UI-Con-trols teilen sich im Wesentlichen in zwei Bib-liotheken auf: Unter sap.ui.commons werden Controls zusammengefasst, die hauptsächlich für Anwendungen mit einem Desktop-anwen-dungstypischen Verhalten (RIAs) konzipiert wurden, während sich die Responsive-Web-Steuerelemente der sap.m-Bibliothek hervorra-gend für mobile Szenarien mit unterschiedli-chen Endgerätetypen eignen. ▶

Alexander Trapp ist Software-Entwickler bei der

G.I.B, einem auf die Optimierung

logistischer Prozesse im SAP-

Umfeld spezialisierten Software-

und Beratungshaus. Als Mitglied

des NewTechnology-Teams eva-

luiert und nutzt er neue Tech-

nologietrends in der Software-

Entwicklung, insbesondere die

modernen Frontend-Frameworks

SAPUI5 und OpenUI5 der SAP

AG.

Inhalt JavaScript-Framework OpenUI5.

AUTOR

Die Download-Seite von OpenUI5 auf GitHub (Bild 1)

Foto

: Ger

rit B

ende

r DES

IGN

<!DOCTYPE HTML> <html> <head> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta http-equiv='Content-Type' content='text/ html;charset=UTF-8'/> <script src="https://openui5.hana.ondemand.com/resources/ sap-ui-core.js" id="sap-ui-bootstrap" data-sap-ui-libs="sap.m" data-sap-ui-theme="sap_bluecrystal" data-sap-ui-xx-bindingSyntax="complex"> </script> <script> sap.ui.localResources("model"); sap.ui.localResources("view"); // create data-model for contacts var oModel = new sap.ui.model.json.JSONModel ("model/contactModel.json"); sap.ui.getCore().setModel(oModel); // create SplitApp- object var oApp = new sap.m.SplitApp(); oApp.addMasterPage(sap.ui.xmlview("Master", "view.Master")); oApp.addDetailPage(sap.ui.xmlview("Contact", "view.Empty")); var oShell = new sap.m.Shell("myShell", { title : "Adressverwaltung", showLogout : false, app : oApp }); oShell.placeAt("content"); </script>

LISTIng 1: Index.HTML

<core:View xmlns:core="sap.ui.core" xmlns:mvc="sap.ui.core.mvc" xmlns="sap.m"

controllerName="view.Master" xmlns:html="http://www.w3.org/1999/xhtml">

<Page title="Kontakte">

<content>

<List

id="contactsList"

mode="{device>/listMode}"

select="handleContactsListSelect"

noDataText="keine Kontakte"

items="{/contacts}" >

<items>

<ObjectListItem type="{device>/listItemType}" title="{lastname}, {givenname}" press="handleContactsListItemPress"> <attributes> <ObjectAttribute text="{company}"/> </attributes> </ObjectListItem> </items> </List> </content> </Page> </core:View>

LISTIng 2: MASTeR-VIew

wird also in der Datei Empty.view.xml gespei-chert und besteht aus folgendem Inhalt:

<core:View xmlns:core="sap.ui.core" xmlns="sap.m"> <Page></Page> </core:View>

Da hier keine Programmlogik implementiert werden muss, wird für diese View kein Con-troller erstellt. Die Master-View (Listing 2) dient als Selektionsview für die Adressen. Hier soll eine Kurzinformation des Kontakts (Name und Firma) in Listenform angezeigt werden.

Dazu wird ein List-Objekt deklariert und an unser JSON-Model gebunden. In der Liste wird mittels des DeviceModel der Darstellungsmodus in Abhängigkeit vom Endgerät gesetzt. Ebenso wird für das Listenelement vom Typ ObjectList-Item, das ein einzelnes Element der Liste darstellt, der ListItem-Typ in gleicher Weise bestimmt. Da-raus ergibt sich, dass bei der Auswahl eines Lis-tenelements auf einem Mobil telefon dieses nicht

in der Liste markiert wird. Dies ist nicht nötig, da auf dem kleinen Mobiltelefondisplay immer nur entweder die Master- oder die Detail-View angezeigt wird und dadurch die visuelle Ver-knüpfung beider Views nicht nötig ist.

Auf größeren Displays, auf denen beide Views nebeneinander angezeigt werden, muss der ge-wählte Listeneintrag markiert werden, um die Verknüpfung zwischen der Anzeige auf Master- und Detail-View zu visualisieren.

Aus dem gewählten Listmode ergibt sich al-lerdings auch, welche Events bei der Auswahl des Listeneintrags gefeuert werden. Beim List-mode SingleSelectMaster wird das select-Event der Liste ausgelöst, während beim Listmode None das press-Event des ObjectListItem ausge-löst wird. Dadurch muss im zugehörigen Con-troller je ein Event Handler für beide Events de-finiert werden. Beide Event Handler rufen die Funktion _showContactDetails im Controller auf und übergeben ihr das ausgewählte ListItem.

In dieser Funktion wird dann ein Event zur Page-Navigation sowie ein Event für die Aktua-lisierung der Daten auf den Eventbus gelegt. Der Eventbus stellt einen Publish/Subscribe-Me-chanismus dar, mit dem Funktionalitäten aufge-rufen werden können, ohne dass der Publisher wissen muss, wo sich diese befinden.

In einer echten Anwendung würde es sich an-bieten, eine zentrale (JavaScript-)View zu im-plemetieren, in der unter anderem die Naviga-tion realisiert werden kann. Das RefreshContact-Event wird im Controller der Contact-View be-handelt (Listing 3), um deren Anzeige zu aktua-lisieren.

Wird der _refreshContact-Methode ein Daten-kontext übergeben, so wird dieser gesetzt. An-dernfalls, wie in obigem Szenario, wird das Da-taModel in einer Schleife durchlaufen und der jeweilige Schlüssel (id) mit dem übergebenen Schlüssel (contactId) verglichen, bis der ent-

_refreshContact : function (channelId, eventId, data) { if (data && data.context) { // simply set context this.getView().setBindingContext(data.context); } else if (data && data.contactId) { // compute model path from contact id var modelData = sap.ui.getCore().getModel().getData(); for (var i = 0 ; i < modelData.contacts.length ; i++) { if (modelData.contacts[i].id === data.contactId) { this.getView().bindElement("/contacts/" + i); break; } } }},

LISTIng 3: _ReFReSHCOnTACT-FUnkTIOn

<core:View xmlns:core="sap.ui.core" xmlns:mvc="sap.ui.core.mvc" xmlns="sap.m" xmlns:layout="sap.ui.layout"

controllerName="view.Contact" xmlns:html="http://www.w3.org/1999/xhtml">

<Page title="{givenname} {lastname}" showNavButton="true" navButtonPress="onNavBack">

<content>

<Panel headerText="Adresse">

<List>

<DisplayListItem label="Name" value="{givenname} {lastname}" />

<DisplayListItem label="Firma" value="{givenname} {lastname}" />

<DisplayListItem label="Straße" value="{street}" />

<DisplayListItem label="Plz/Ort" value="{zipcode} {city}" />

<DisplayListItem label="Land" value="{country}" /> </List> </Panel> <Panel headerText="Kontaktinformationen"> <List> <DisplayListItem label="Telefon" value=" {phone}" type="Active" press="callContact" /> <DisplayListItem label="Mobil" value=" {mobile}" type="Active" press="callContact" /> <DisplayListItem label="Email" value="{email}" type="Active" press="emailContact" /> </List> </Panel> </content></Page></core:View>

LISTIng 4: COnTACT-VIew

DVD 12/2014

web & mobileDEVELOPER

Mobile DevelopmentAndroid Software Development Kit r23.0.2Android-x86 4.4 R1APK Batch Installer Tool 1.5cDroid Explorer 0.8.8.11MyPhoneExplorer 1.8.6

VirtualisierungVirtualBox 4.3.18VMware Converter 5.5.3VMware Player 6.0.3

Linux-DistributionSME Server 9.0(Linux Small Business Server)

Web DevelopmentContent-Management-SystemePHP-Core 5.6.2 Open-Source-Datenbanken NetBeans IDE Bundle 8.0.1 openElement 1.44 R5 XAMPP 1.8.3

Profi-dVd:web development• PHP-Core 5.6.2• Open-Source-Datenbanken• NetBeans IDE Bundle 8.0.1

Mobile development• Android SDK r23.0.2• Android-x86 4.4 R1• APK Batch Installer Tool 1.5c• Droid Explorer 0.8.8.11

Virtualisierung• VirtualBox 4.3.18• VMware Converter 5.5.3• VMware Player 6.0.3

Big data

web & mobileDEVELOPERw

eb &

mob

ileD

EV

EL

OP

ER

So aktualisieren Sie Programmcode und Abhängigkeiten rationell S. 90

Paket-Management mit PHP

So entwickeln Sie Applikationen für Amazons Set-Top-Box S. 100

entwickeln für Fire TV

12/2014

€ 14,95 Deutschland € 14,95 Schweiz sfr 29,90 Österreich, Belgien, Niederlande, Luxemburg € 16,45

www.webundmobile.de

INFO-Programm

gemäߧ 14

JuSchG

41

98

25

50

14

95

11

2

Native Apps für Googles Datenbrille mit Android Studio entwickeln S. 82

Jobs für entwickler ab S. 140

Neue Herausforderung für Entwickler: Flexibel zugewiesene Daten-Werte-Paare anstelle von starren Tabellenstrukturen S. 18

noSQL für

Hintergrundbilder sind eine zentrale Designkomponente S. 30

Bessere Hintergründe mit CSS3

12/2014Sonderdruck

HTML, CSS & JAVASCRIPT

sprechende Satz gefunden wird. Dann wird die View an dieses Element gebunden, wodurch al-le gebundenen Datenfelder in der View aktuali-siert werden.

Auf Geräten mit einem kleinen Display wird zunächst nur die Detail-View angezeigt. Wird ein Element der Liste ausgewählt, so schiebt sich die Detail-View über die Master-View und zeigt die Detaildaten an.

Setzen wir im Page-Objekt der Contacts-View die Eigenschaft showNavButton auf true, dann erscheint in diesem Fall im Kopfbereich der De-tail-View ein Navigations-Button. Mittels der Ei-genschaft navButtonPress="onNavBackW" wird ein entsprechender Event Handler für das Be-tätigen dieses Navigationsbuttons zugewiesen (Listing 4).

Im Controller implementieren wir diesen Event Handler, um zur Master-View zurückzu-navigieren. Hierzu veröffentlichen wir auf dem Eventbus für den Channel nav und die Event-ID to die Navigation zur Master-View. Diese Chan-nel-/ Event-ID auf dem Eventbus wird dann zen-tral an der Stelle behandelt, wo sie abonniert wurde, in unserem Fall im Master-Controller.

In der Contacts-View stellen wir zwei Panels dar, die jeweils eine Liste mit Datenelementen beinhalten. Im ersten Panel werden die Adress-details als DisplayListItem-Controls dargestellt. Dieses Control stellt jeweils einen Wert aus dem Datenmodell mit zugehörigem Bezeichner dar (Listing 5).

Im zweiten Panel verwenden wir ebenfalls eine Liste mit DisplayListItems zur Darstellung von Kontaktierungsmöglichkeiten zu der Ad-

resse. Hier setzen wir jedoch die Eigenschaft type=“Active“ und weisen jeweils einen Event Handler für das press-Event zu. Dadurch wird das DisplayListItem zu einer Schaltfläche. Im Fall der Telefon- beziehungsweise Mobilfunk-Rufnummer rufen wir die callContact-Funktion im Controller auf, bei der E-Mail-Adresse ver-wenden wir die emailContact-Funktion. In bei-den Funktionen verwenden wir einen URL-Helper aus der sap.m-Bibliothek des OpenUI5-Frameworks, um die native Standardanwen-dung des Systems zum Absetzen eines Anrufs (beziehungsweise zum Erstellen einer E-Mail) mit Übergabe der entsprechenden Telefonnum-mer (beziehungsweise E-Mail-Adresse) aufzu-rufen.

Fazit

Mit dieser kurzen Einführung sollte gezeigt werden, wie das OpenUI5-Framework der SAP AG den Entwickler bei der Entwicklung von Web-Frontends für datengetriebene Anwen-dungen unterstützen kann. Insbesondere bei der Entwicklung für mobile Endgeräte spielt das Framework seine Stärken aus, da es dem Entwickler viele Aufgaben im Bereich der platt-formspezifischen Besonderheiten, wie zum Bei-spiel unterschiedliche Displaygrößen, abnimmt.

Wir haben hier nur an der Oberfläche der Möglichkeiten des Frameworks gekratzt. Wich-tige Punkte wie zum Beispiel das Erstellen von neuen Datensätzen und das Ändern von Da-ten wurden bei diesem ersten Kennenlernen des Frameworks noch gar nicht angesprochen. [mb]

OpenUI5-Download▶ http://sap.github.io/openui5

/download.html

UI Development Toolkit for HTML5 Developer Center▶ https://openui5.hana.on

demand.com/#content/

Overview.html

Einführung in das Framework▶ http://scn.sap.com/commu

nity/developer-center/front-

end/blog/2013/12/11/

what-is-openui5-sapui5

LInkS zUM THeMA

sap.ui.controller("view.Contact", {onInit: function() { var oEventBus = sap.ui.getCore().getEventBus(); oEventBus.subscribe("app", "RefreshContact", this._refreshContact, this);},_refreshContact : function (channelId, eventId, data) {if (data && data.context) { // simply set context this.getView().setBindingContext (data.context);} else if (data && data.contactId) {// compute model path from contact id var modelData = sap.ui.getCore(). getModel().getData(); for (var i = 0 ; i < modelData. contacts.length ; i++) { if (modelData.contacts[i].id === data.contactId) { this.getView().bindElement("/ contacts/" + i); break; } }

}},onNavBack : function (oEvent) { sap.ui.getCore().getEventBus(). publish("nav", "to", { id : "Master" });},callContact : function(oEvent) { if(oEvent.getSource(). getProperty("value")==""){ return; } sap.m.URLHelper.triggerTel(oEvent. getSource().getProperty("value"));},emailContact : function(oEvent) { if(oEvent.getSource(). getProperty("value")==""){ return; } sap.m.URLHelper.triggerEmail(oEvent. getSource().getProperty("value"));}});

LISTIng 5: COnTACT-COnTROLLeR

In einer realen Anwendung wä-re es nicht empfehlenswert, den Programmcode zum Laden der Models und zur Erstellung der SplitApp in die HTML-Seite ein-zubetten.

Hier bietet sich die Verwendung

(und Erweiterung) der sap.

ui.app.Application-Klasse aus

dem Framework an, die dann

im HTML-Dokument instanziert

wird und die weitere Applika-

tionssteuerung übernimmt. Ei-

ne gute Unterstützung bei der

weiteren Evaluierung des Frame-

works findet sich unter https://

openui5.hana.ondemand.com/

#content/Overview.html. Hier

bietet sich besonders der De-

veloper Guide an, der neben In-

formationen zu den Konzepten

hinter OpenUI5 auch Best-Prac-

tice-Ansätze aufzeigt. Auch die

API-Referenz auf dieser Web-

site dient als wertvolles Hilfs-

mittel bei der Entwicklung mit

OpenUI5.

TIPP

Apps für google glass

Sonderdruck für g.I.B

gesellschaft für Information

und Bildung mbH