SAP Fiori – Implementierung und Entwicklung · PDF file10 Grundlagen der...

LeseprobeIn dieser Leseprobe lernen Sie die Grundlagen und Konzepte von SAPUI5 kennen. Neben der Implementierung einer einfachen An-wendung mit SAPUI5 zeigen wir Ihnen anhand von Best Practices, wie SAPUI5-Anwendungen architektonisch aufgebaut werden.

Michael Englbrecht, Michael Wegelin

SAP Fiori – Implementierung und Entwicklung608 Seiten, gebunden, Dezember 2015 69,90 Euro, ISBN 978-3-8362-3828-1

www.sap-press.de/3894

»Grundlagen der SAP-Fiori- Entwicklung« (Kapitel 10)

Inhaltsverzeichnis

Index

Die Autoren

Leseprobe weiterempfehlen

Wissen aus erster Hand.

https://www.rheinwerk-verlag.de/sap-fiori_3894/?GPP=lpn

mailto:?body=Leseproben-Empfehlung:%20%C2%BBSAP%20Fiori%20%E2%80%93%20Implementierung%20und%20Entwicklung%C2%AB%20von%20SAP%20PRESS,%20http://gxmedia.galileo-press.de/leseproben/3894/leseprobe_sappress_sap_fiori_implementierung_und_entwicklung.pdf&subject=Leseprobe:%20%C2%BBSAP%20Fiori%20%E2%80%93%20Implementierung%20und%20Entwicklung%C2%AB

321

Kapitel 10

SAP-Fiori-Anwendungen werden mit dem SAP-eigenen UI-Framework SAPUI5 entwickelt. In diesem Kapitel lernen Sie Best Practices kennen, mit denen Sie eine investitionssichere Entwicklung gewährleisten.

10 Grundlagen der SAP-Fiori-Entwicklung

In diesem Kapitel erhalten Sie eine Einführung in die Grundlagen derFiori-Entwicklung. Im ersten Abschnitt geben wir Ihnen einen Über-blick über SAPUI5, das Framework, mit dem SAP-Fiori-Anwendun-gen entwickelt werden. Anhand eines einfachen praktischen Bei-spiels lernen Sie, wie Sie mobile Anwendungen entwickeln können.Der zweite Abschnitt stellt Ihnen eine Vielzahl von Best Practices so-wohl für die Entwicklung von mobilen SAPUI5-Anwendungen alsauch von SAP-Fiori-Anwendungen vor.

10.1 SAPUI5

SAPs UI-Framework SAPUI5 bildet die Grundlage für die Entwick-lung von Fiori-Anwendungen. In diesem Abschnitt geben wir Ihneneinen Überblick über die Entwicklung von mobilen Anwendungen.Wir gehen dabei davon aus, dass Sie bereits grundlegende Kenntnis-se von SAPUI5 haben und verzichten deshalb darauf, die Vorzügevon SAPUI5 noch einmal darzustellen.

10.1.1 Die Entwicklungsumgebung

SAP bietet für die Entwicklung von SAPUI5-Anwendungen zwei ver-schiedene Entwicklungsumgebungen an, die wir Ihnen in diesemAbschnitt vorstellen:

� Eclipse mit den SAP-Erweiterungen für SAPUI5

� SAP Web IDE

3828.book Seite 321 Montag, 30. November 2015 1:55 13

Grundlagen der SAP-Fiori-Entwicklung10

322

Eclipse SAP liefert spezifische SAPUI5-Erweiterungen, sogenannte Plug-ins,für die Entwicklungsumgebung Eclipse aus. Diese Plug-ins könnenSie über die Update-Seite von SAP unter https://tools.hana.onde-mand.com/#sapui5 in eine lokale Eclipse-Installation integrieren.Alternativ können Sie die Plug-ins in den UI-Add-ons aus dem SAP-Service-Marktplatz auswählen und installieren. Das SAP NetWeaverDeveloper Studio, die Entwicklungsumgebung von SAP, basiert eben-falls auf Eclipse. Aus diesem Grund können Sie die gleichen Plug-insauch hier verwenden. Somit wurde Eclipse auch für SAPUI5 zumStandard-Werkzeug für die Anwendungsentwicklung.

Durch den Trend bei SAP, die gleichen Plug-ins für den Einsatz in un-terschiedlichen Technologien und Produkte anzubieten, entstand ei-ne Reihe von Problemen, die salopp als »Plug-in-Hölle« bezeichnetwurde: Sowohl SAP selbst als auch die Kunden, die mit Eclipse oderdem SAP NetWeaver Developer Studio entwickelten, mussten ihreEntwicklungsumgebungen abhängig von dem verwendeten Back-end-System stets auf dem neuesten Stand halten. Da in der Regel ei-ne Vielzahl von Entwicklern im Unternehmen arbeitet, die jeden Tagmit Eclipse SAP-Anwendungen implementiert, wuchs der Aufwandweiter, weil auf jedem Rechner stets die aktuellen Versionen der un-terschiedlichen Plug-ins installiert werden mussten. Hinzu kam, dassSAP die Plug-ins für die SAP-Mobile-Platform-Entwicklung, SAPUI5,SAP Gateway oder ABAP on Eclipse auf unterschiedliche Weise im-plementiert hat. Neben den Erweiterungen für Eclipse entwickelteSAP parallel zu den SAPUI5-Plug-ins eine weitere Entwicklungsum-gebung für die Implementierung mobiler Anwendungen mitSAPUI5, den SAP Application Builder. SAP hat es sich deshalb zumZiel gesetzt, mehr Homogenität bei der Entwicklung zu schaffen, umdie geschilderten Probleme zu lösen.

SAP Web IDE Der Wunsch nach einem einheitlichen Entwicklungsansatz gepaartmit dem zunehmenden Fokus von SAP auf die Cloud führte zur Ein-führung einer neuen Entwicklungsumgebung: der SAP Web IDE. DieSAP Web IDE wird zentral in der Cloud installiert, die Entwicklergreifen ausschließlich über den Browser darauf zu. Das bedeutet,dass die SAP Web IDE nicht mehr lokal installiert werden muss. DieSAP Web IDE nutzt einen Plug-in-Mechanismus. Mit diesem Plug-in-Mechanismus kann die SAP Erweiterungen für die SAP Web IDE ein-fach integrieren. Alle Erweiterungen der Entwicklungsumgebungharmonieren dadurch.


SAPUI5 10.1

323

Statt die SAP Web IDE auf den unternehmenseigenen Servern zuinstallieren, können Sie über die SAP HANA Cloud Platform (HCP) da-rauf zugreifen. Dadurch entfallen Installation und Wartung, und Siekönnen jeweils die aktuellste Version der SAP Web IDE nutzen. Umdie SAP Web IDE einsetzen zu können, muss sie auf das SAP-Backendin Ihrem Unternehmen zugreifen können (siehe Abschnitt 13.1.2SAP HANA Cloud Connector). Dies ist ein Grund, warum viele Unter-nehmen zögern, von Eclipse auf die SAP Web IDE zu wechseln.

Eclipse oder SAP Web IDE?

Und welche Umgebung empfiehlt SAP für die Entwicklung von SAP-Fiori-Anwendungen? Die Antwort ist klar und einfach: die SAP WebIDE. SAP selbst entwickelt mittlerweile alle SAP-Fiori-Anwendungenmit dieser Entwicklungsumgebung. SAP plant außerdem, die Funk-tionen der Werkzeuge in der SAP Web IDE massiv auszubauen:

� Im Gegensatz zu Eclipse enthält die SAP Web IDE ein grafischesWerkzeug zur Oberflächenerstellung für SAPUI5 (Stand Novem-ber 2015 im Betastadium).

� Für das Deployment von SAPUI5-Anwendungen als hybride An-wendung, für das Testen und das Erstellen von Testdaten etc. wer-den für die SAP Web IDE neue Funktionen entwickelt bzw. sindbereits erhältlich.

Die SAPUI5-Plug-ins für Eclipse werden zukünftig nicht mehr odernur sehr eingeschränkt weiter entwickelt.

Das Beispielprojekt, das wir in diesem Kapitel nutzen, um Konzepteund Best Practices zu erklären, haben wir mit Eclipse implementiert,um den Lesern, die mit der SAP Web IDE noch nicht vertraut sind,das Verständnis zu erleichtern. Die SAP Web IDE wird in Kapitel 13,»Entwicklung einer SAP-Fiori-Anwendung mit SAP Web IDE«, imDetail behandelt.

10.1.2 Aufbau einer mobilen Anwendung

Das zentrale Objekt bei der Programmierung von mobilen SAPUI5-Anwendungen sind die Klassen sap.m.App und sap.m.SplitApp. Die-se Klassen sind von sogenannten Pages abhängig. Eine Page repräsen-tiert eine Seite, die auf dem mobilen Endgerät angezeigt wird. Siewird über ein sogenanntes Container-Objekt vom Typ sap.m.Page im-plementiert. In eine Page können Sie unterschiedlichste UI-Controlseinfügen.



324

Die Klassesap.m.App

Die Klasse sap.m.App nutzen Sie, um Fullscreen-Anwendungen zuimplementieren. Sie leitet sich von der Basisklasse sap.m.NavContai-ner ab, die unter anderem eine Aggregation mit dem Namen pagesbeschreibt. Abbildung 10.1 zeigt die Anatomie einer Fullscreen-An-wendung. Das UI-Control verfügt über einen Kopfbereich, den manmit einem Titel versehen kann. Der Bereich darunter wird verwen-det, um Objekte vom Typ sap.m.Page 1 anzuzeigen. Zum Zusam-menhang von Klassen, Elementen und Controls: Alle SAPUI5-Teile,die man in der UI-Anzeige sehen kann, sind Controls bzw. Elemente,sie werden über eine Klasse von SAP bereitgestellt.

Abbildung 10.1 Aggregationen des sap.m.App-Controls

Die Klassesap.m.SplitApp

Die Implementierung sap.m.SplitApp hat hingegen durch die Ver-erbungsbeziehung zur Klasse sap.m.SplitContainer zwei Aggrega-tionen für die die Anzeige von Pages: zum einen für den Master-bereich und zum anderen für den Detailbereich. Die Aggregationentragen die Namen masterPages und detailPages. Abbildung 10.2zeigt den Aufbau des sap.m.SplitApp-Controls. Wie Sie der Abbil-dung entnehmen können, gliedert sich der Anwendungsbereich inzwei Teilbereiche. Im Masterbereich 1 werden weniger detailreicheInformationen in einer Listendarstellung angezeigt. Durch die Selek-tion eines Listeneintrags werden die dazugehörenden Details im De-tailbereich 2 visualisiert.


SAPUI5 10.1

325

Abbildung 10.2 Aggregationen des sap.m.SplitApp-Controls

10.1.3 Implementierung einer mobilen SAPUI5-Anwendung

SAPUI5-Anwen-dungen entwickeln

In diesem Abschnitt zeigen wir Ihnen, wie Sie eine einfache mobileSAPUI5-Anwendung implementieren können. Damit möchten wirIhnen die Konzepte von SAPUI5 näher bringen, auf die Besonder-heiten im Zusammenhang mit SAP Fiori gehen wir dann in Ab-schnitt 10.2 ein. Dort entwickeln wir das Beispiel aus diesem Ab-schnitt weiter. Zu guter Letzt entwickeln Sie in Abschnitt 10.2 eineAnwendung, die in Aufbau und Aussehen einer Fiori-Anwendungentspricht und die in ein Launchpad integriert werden kann.

Bevor wir mit der eigentlichen Implementierung beginnen, betrach-ten wir kurz die Anwendung, die entstehen soll. Abbildung 10.3zeigt eine Master-Detail-Anwendung. Auf der Masterseite wird eineListe von Ländern angezeigt. Bei der Auswahl eines Landes werdendie Details zum Land in der Detailansicht dargestellt. Die Details ver-wenden die in Kapitel 3, »SAP Fiori Design Guidelines«, eingeführteObjekt-Ansicht Pattern.



326

Abbildung 10.3 Eine einfache mobile SAPUI5-Anwendung

SAPUI5-Projektanlegen

Zunächst legen Sie ein einfaches SAPUI5-Projekt mit Eclipse an. Wirgehen davon aus, dass Sie bereits Eclipse mit den entsprechendenSAPUI5-Plug-ins installiert haben.

1. Starten Sie Eclipse und rufen Sie dort den SAPUI5-Projektassisten-ten über das Menü File � New � Other auf.

2. Es öffnet sich daraufhin ein Dialog mit der Auswahl der möglichenProjekttypen, die Sie anlegen können. Wählen Sie den ProjekttypApplication Project im Ordner SAPUI5 Application Develop-

ment aus.

3. Es öffnet sich ein Dialog, in dem Sie im Feld Project Name denNamen des Projekts (hier SAP_Fiori_MobileAnwendung) angeben.Belassen Sie den Ablageort des Projekts so, wie er standardmäßigeingestellt ist.

4. Im Bereich Library behalten Sie die Selektion sap.m bei. EntfernenSie das Kennzeichen bei Create an Initial View. Abbildung 10.4zeigt das Fenster mit den entsprechenden Eingaben.

5. Bestätigen Sie mit einem Klick auf den Button Finish, und das Pro-jekt wird angelegt.


SAPUI5 10.1

327

Abbildung 10.4 Anlegen eines SAPUI5-Projekts

Nutzung von Create an Initial View

Wenn Sie das Kennzeichen Create an Initial View markieren, wird derSAPUI5-View mithilfe des Assistenten generiert und in einem Ordnerangelegt, dessen Bezeichnung der Projektbezeichnung entspricht. Das istvor allem dann nicht sinnvoll, wenn der Projektname sehr lang oder sehrtechnisch ist. Als Namensraum innerhalb des angelegten Views wirdebenfalls der Projektname verwendet.

6. Nachdem das Projekt angelegt wurde, erstellen Sie in dem OrderWebContent einen neuen Ordner als Ablageort für Ihre Views.Markieren Sie dazu den Ordner WebContent und fügen über dasKontextmenü New � Folder einen Ordner mit dem Namen View

hinzu.

7. Öffnen Sie den Ordner View und rufen über das Kontextmenü denEintrag New � Other auf.

8. Es öffnet sich ein Dialogfenster, in dem Sie zum Eintrag SAPUI5

Application Development navigieren. Wählen Sie den EintragView aus.



328

9. Es erscheint der Dialog zum Anlegen von Views. Geben Sieals Namen des Views MyApp ein und wählen unter der Ru-brik Development Paradigm den Eintrag XML aus (sieheAbbildung 10.5).

10. Bestätigen Sie mit einem Klick auf Finish. Den gerade angelegtenView verwenden Sie im Folgenden als Startview.

Abbildung 10.5 View anlegen

DetailViewanlegen

Legen Sie analog zu dieser Beschreibung zwei weitere Views mitden Namen MasterView und DetailView an. Als Resultat und Aus-gangspunkt für die folgenden Abschnitte erhalten Sie die in Abbil-dung 10.6 dargestellte Projektstruktur.

index.htmlanpassen

Im nächsten Schritt öffnen Sie die Datei index.html. Passen Sie dieSeite index.html so an, dass der Startview aufgerufen wird. In unse-rem Fall ist dies MyApp.view.xml.

Fügen Sie im zweiten Script-Tag, das durch den Projektassistentenangelegt wurde, den Aufruf der Funktion sap.ui.xmlview hinzu.Die Funktion erhält zwei Parameter: Der erste Parameter definiertdie ID des Views, der zweite gibt den vollqualifizierten Namen desViews an.


SAPUI5 10.1

329

Abbildung 10.6 Projektstruktur in unserem Beispiel

Listing 10.1 zeigt die Anpassung in der Datei index.html.

<script>sap.ui.xmlview("appView","view.MyApp").placeAt("content");

</script>

Listing 10.1 Erzeugung der Startseite

Damit der Namensraum view, dem die einzelnen Seiten der Beispiel-anwendung zugewiesen wurden, aufgelöst werden kann, müssen Sieder Datei index.html im Start-Script das Attribut data-sap-ui-resourceroots hinzufügen.

Diesem Attribut weisen Sie das Namespace-Mapping für den Namen-raum view zu (siehe Listing 10.2).

data-sap-ui-resourceroots='{"view":"./view"

}'

Listing 10.2 Mapping des Namensraums auf den entsprechenden Ordner im Projekt

sap.m.SplitApp-Control anlegen

Öffnen Sie nun die Datei MyApp.view.xml. Diese Seite soll einSplitApp-Objekt (sap.m.SplitApp) implementieren, in dem Siedie Views MasterView und DetailView, entsprechend ihrem Na-men in der SplitApp, anzeigen lassen. Die Implementierung von



330

sap.m.SplitApp bietet bereits eine Vielzahl von Funktionen. Fürdas einfache Navigieren zu einer bestimmten Seite wird z. B. dieto-Funktion zur Verfügung gestellt. Für die Navigation zurückbietet die sap.m.App-Implementierung die Funktion back.

Der Codegenerator hat beim Anlegen der Datei MyApp.view.xml be-reits die wichtigsten Codebestandteile erzeugt. Der Generator hin-terlässt eine View-Deklaration, die bereits eine Page-Deklarationbeinhaltet. Sie brauchen lediglich eine SplitApp anzulegen und diebeiden Aggregationen masterPages bzw. detailPages mit den ent-sprechenden View-Deklarationen zu füllen. Nutzen Sie dazu dasXMLView-Objekt. Geben Sie eine freiwählbare ID an und fügenbeim Attribut viewName den Namen sowie die Paketangabe für denjeweiligen View ein. Wir verwenden somit view.MasterView. Lis-ting 10.3 zeigt das Ergebnis dieser Anpassungen.

<core:View xmlns:core="sap.ui.core"xmlns:mvc="sap.ui.core.mvc"xmlns="sap.m" controllerName="view.MyApp"xmlns:html="http://www.w3.org/1999/xhtml">

<Page title="Eine einfache mobile SAPUI5-Anwendung"><content><SplitApp><masterPages><mvc:XMLView id="masterView"

viewName="view.MasterView"></mvc:XMLView>

</masterPages><detailPages><mvc:XMLView id="detailView"

viewName="view.DetailView"></mvc:XMLView>

</detailPages></SplitApp>

</content></Page>

</core:View>

Listing 10.3 Die Datei MyApp.view.xml

Testen derAnwendung

Nach der Änderung in der Datei MyApp.xml.view wählen Sie in derDatei index.html im Project Explorer den Eintrag Run As – Web App

Preview aus. Damit starten Sie einen einfachen Eclipse-internenHTTP-Server mit dem Namen Jetty. Sie sollten das in Abbildung 10.7gezeigte Ergebnis zu sehen bekommen.


SAPUI5 10.1

331

Abbildung 10.7 Überprüfung der SplitApp-Implementierung

Lokales JSON-Model anlegen

Im nächsten Schritt legen Sie im Package Explorer direkt unter demEintrag WebContent einen neuen Ordner an. Der Ordner erhält denNamen model. Legen Sie in diesem Ordner eine neue Datei mit demNamen mock.json an. Tragen Sie in der Datei die einzelnen Länderein, die Sie in der Anwendung darstellen wollen. Die JSON-Definitionaus Listing 10.4 zeigt einen Auszug daraus. Das Wurzelelement trägtden Namen countries und definiert ein Array von JSON-Objekt-Definitionen. Jedes Objekt beschreibt ein konkretes Land. JedesLand verfügt über identische Attribute, denen je Land unterschied-liche Werte zugewiesen werden.

{"countries": [{"name": "Angola","short": "AO","detailInfo": {"capital": "Luanda","population": "18498000","HumanDevelopmentIndex": "L","area": "1246700","areaUnit": "sq km","currency": "AOA","flagUrl": "img/AO.png"

},



332

"cities": [{"name": "Luanda","population": "2776125","area": "113","areaUnit": "sq km"

},{"name": "Huambo","population": "226177","area": "2609","areaUnit": "sq km"

}]

},…

}

Listing 10.4 Auszug aus der Datei mock.json

Arbeiten mitModellen

Im Anschluss an die Erzeugung der JSON-Datei implementieren Siedas Laden dieser Datei in ein JSON-Model. Öffnen Sie dazu den Con-troller des MyApp-Views und entfernen die Kommentarzeichen vonder onInit-Funktion. Zu Beginn erzeugen Sie ein Objekt vom Typsap.ui.model.json.JSONModel und übergeben den Pfad zu der an-gelegten mock.json-Datei als Aufrufparameter. Das Objekt wird in ei-ner lokalen Variablen gespeichert. Im Anschluss wird das Model-Objekt über die Funktion setModel dem View-Objekt übergeben.Als zweiter Parameter wird als eindeutiger Model-Schlüssel der Be-griff countryModel mitgegeben. Bei Verwendung von mehr als ei-nem Model können Sie in dem View die Modelle über den Model-Schlüssel ansprechen. Beachten Sie, dass es unabhängig davon, obSie eine SAPUI5-Anwendung, die nicht im Launchpad ausgeführtwerden soll, oder eine Fiori-Anwendung implementieren (jedochbesonders dann), keine gute Praxis ist, Model-Objekte dem Core-Objekt über sap.ui.getCore().setModel zuzuweisen. Diese Art derZuweisung kann ungewollte Nebenwirkungen haben, wenn Sie dieAnwendung in eine andere SAPUI5-Anwendung integrieren möch-ten. In diesem Fall verwenden diese Anwendungen nämlich eincore-Objekt. Beide Anwendungen haben somit Zugriff auf die Da-ten der jeweils anderen und können sie einsehen und gewollt oderungewollt überschreiben. Neben dem Setzen des Models weisenSie der Variablen app die Referenz auf unsere SplitApp zu. Die app-


SAPUI5 10.1

333

Variable wird später noch für die Implementierung der Navigationverwendet. Listing 10.5 zeigt die onInit-Funktion des Controllers.

onInit : function() {var oModel = newsap.ui.model.json.JSONModel("./model/mock.json");

this.getView().setModel(oModel,"countryModel");this.app = this.getView().byId("myApp");

}

Listing 10.5 Instanziierung des JSON-Models

Nachdem Sie das Model dem View zugewiesen haben, haben UI-Aspekte und UI-Controls des Views Zugriff auf das Model und kön-nen die Daten daraus beziehen. Somit sind Sie jetzt in der Lage, denMasterView zu implementieren. Der MasterView wurde durch denView-Generator analog zu MyApp-View erstellt und verfügt überdieselbe Grundstruktur.

Liste anlegenWir erzeugen im ersten Schritt im content-Bereich des Views eineListe. Hierfür deklarieren wir ein Objekt vom Typ sap.m.List. DasListen-Control erbt eine Vielzahl von Attributen und Fähigkeiten vonder Basis-Implementierung mit dem Namen sap.m.ListBase. DieseBasis-Implementierung verfügt über eine Aggregation mit dem Na-men items. Diese Aggregation ist vom Typ sap.m.ListItemBase. DieKlasse sap.m.ListItemBase ist die Basisklasse für eine Vielzahl vonListItem-Implementierungen. Jede Ausprägung unterscheidet sich inihrer Mächtigkeit, d. h. in der Anzahl an Darstellungsmöglichkeitenund Funktionen. Je nach Anwendungsfall kann der Entwickler ent-scheiden, welche konkrete ListItem-Implementierung verwendetwerden soll.

Das Objekt sap.m.List besitzt eine Vielzahl von Attributen, mit de-nen das Verhalten einer Liste beeinflusst werden kann. In unseremBeispiel sind lediglich die folgenden drei Attribute von Bedeutung:

� mode

� items

� select

Das erste Attribut, das Sie der Listen-Deklaration zuweisen, heißtmode. Dem Attribut mode können Sie Werte aus der Enumerationsap.m.ListMode zuweisen. So steuern Sie, wie die Listeneintragun-



334

gen ausgewählt werden. Sie können z. B. über den Modussap.m.SingleSelectLeft einstellen, dass bei jedem Listeneintrag aufder linken Seite ein Radiobutton-Symbol angezeigt wird, mit dem Sieeinen Eintrag auswählen. Lässt man bei dem Modus Left weg, erhal-ten Sie ein Radiobutton-Symbol auf der rechten Seite.

Wählen Sie für die Selektion den Modus sap.m.SingleSelectMasteraus. Hierbei wird der ausgewählte Listeneintrag farblich hervorgeho-ben und »merkt« sich die Selektion solange, bis ein anderer Eintragausgewählt wird.

Nachdem der Auswahlmodus gesetzt ist, fügen Sie das Attribut itemshinzu. Das Attribut items binden Sie via Databinding an das Wurzel-element aus dem JSON-Model an. Die Wurzel des Models trägt denNamen countries. Damit können Sie über den Template-Mechanis-mus von SAPUI5 die Liste aufbauen. Für den Abschluss der Deklara-tion der Liste legen Sie einen Event-Handler fest.

Weisen Sie dem Attribut select den Namen handleListSelect zu.Diese Funktion implementieren Sie im Controller des MasterViews,der die Auswahl eines Listeneintrags weiterverarbeitet. Das Listing10.6 zeigt die gerade vorgestellte Listendeklaration.

<List mode="SingleSelectMaster" select="handleListSelect"items="{countryModel>/countries}">

</List>

Listing 10.6 Implementierung des MasterViews

Template-Objektvom Typ

sap.m.ObjectList-Item anlegen

Da eine Liste ohne Listeneinträge nicht sinnvoll ist, fügen Sie nun einTemplate-Objekt in die Liste aus Listing 10.6 ein. Hierfür kommt ei-ne Vielzahl von unterschiedlichen ListItem-Objekten infrage. Wirverwenden eines der mächtigsten, das sap.m.ObjectListItem. DasUI-Control selbst haben Sie bereits in Kapitel 3 kennengelernt. DasUI-Control bietet über verschiedene Attribute die Möglichkeit, eineVielzahl von Informationen in einem Listeneintrag darzustellen.Über die Attribute title 1 und short 2 können textuelle Informa-tionen visualisiert werden. Das Attribut number 3 verwendet man,um einen Zahlenwert, beispielsweise einen Preis, darzustellen. Umzu einem Zahlenwert eine Maßeinheit anzuzeigen, wird das AttributnumberUnit 4 angeboten. Für Statusinformationen kann der Ent-wickler die Attribute firstStatus 5 und secondStatus nutzen. Ab-bildung 10.8 zeigt die genannten Attribute.


SAPUI5 10.1

335

Abbildung 10.8 Das ObjectListItem mit seinen Attributen

Wichtigste Attribute

Aus Abbildung 10.8 ergibt sich für das in Listing 10.4 eingeführteJSON-Model die in Tabelle 10.1 gezeigte Databinding zwischen denModelattributen und den Attributen des sap.m.ObjectListItem-Controls.

Die Definition des sap.m.ObjectListItem-Templates folgt dem be-reits verwendeten Mapping. Sie finden das Mapping in Listing 10.7.Das Item-Objekt enthält das Attribut type. Diesem Attribut weisenSie den Wert Inactive zu. Damit wird das Verarbeiten der Selektioneines Listeneintrags nicht durch das Element selbst verarbeitet undsomit nicht durch den Event-Handler handelListItemPress. Statt-dessen wird das Event durch das Eltern-Control verarbeitet und überden Event-Handler handleListSelect weiterverarbeitet. In Ab-

Modelattribut UI-Control-Attribut

name title

area number

areaUnit numberUnit

short ObjectAttribut – text

humanDevelopmentIndex ObjectStatus – text

humanDevelopmentIndex ObjectStatus – state

Tabelle 10.1 Mapping der Modelattribute auf die entsprechenden UI-Control-Attribute


336

schnitt 10.2.5 gehen wir genauer auf dieses Attribut und seine Ver-wendung ein.

<ObjectListItem type="Inactive"press="handleListItemPress"title="{countryModel>name}"number="

{countryModel>detailInfo/area}"numberUnit="{countryModel>detailInfo/areaUnit}">

<attributes><ObjectAttribute text="{countryModel>short}" />

</attributes>

</ObjectListItem>

Listing 10.7 Definition der ListItems

Mit Formatierungsfunktionen arbeiten

Formatierungs-funktionen nutzen

Zu jedem Land in der Liste soll ein Status angezeigt und formatiertwerden. Der Status des Landes soll das Wachstum der Bevölkerungdarstellen. Das Bevölkerungswachstum wird im JSON-Model überdas Attribut HumanDevelopmentIndex (HDI) repräsentiert. Das Ob-jectListItem hat für die Darstellung von Statusinformationen zwei-mal eine Assoziation vom Typ ObjectStatus. Das sap.m.ObjectSta-tus umfasst für die Darstellung von Werten die beiden Attributetext und status.

Mit dem Attribut status wird der dargestellte Text farblich hervor-gehoben. Das Einfärben wird beim Status über die gültigen Wertedes Typs sap.ui.core.ValueState ermöglicht. So ist z. B. der Value-State Success im SAP-Standarddesign mit der Farbe Grün verknüpft,der ValueState Error mit der Farbe Rot. Die Farbzuweisung könnenSie über ein Theme individuell anpassen. Zur Erinnerung: Das Con-trol sap.m.ObjectStatus umfasst zwei Assoziationen des Typs: Sietragen die Bezeichner FirstStatus und SecondStatus. In unseremBespiel wollen wir lediglich das Feld FirstStatus befüllen.

Mögliche Werte Der HDI kann fünf verschiedene Werte beinhalten. Wie Sie dem Lis-ting 10.4 entnehmen können, besteht der HDI lediglich aus einemZeichen. In dem hier vorgestellten Beispiel möchten wir jedocheinen etwas verständlicheren Text anstelle des einzelnen Zeichensdarstellen. Hierzu implementieren wir ein Mapping. Ein weiteres


SAPUI5 10.1

337

Mapping benötigen Sie, um aus den Werten aus dem Model die Ein-färbung des Textes zu übernehmen. Tabelle 10.2 zeigt, welcher Wertaus dem Model mit welchem Text in der Liste dargestellt werden sollund welcher ValueState verwendet wird.

Formatter anlegenUm die Mappingregeln umzusetzen, implementieren wir einen For-matter. Dieser Formatter bewirkt, dass das UI-Control beim Ausfüh-ren des Databindings nicht den Wert aus dem Model, sondern dasErgebnis eines JavaScript-Funktionsaufrufs in der Liste darstellt.

Extendend Binding Syntax

SAPUI5 bietet unter anderem für die Nutzung von Formattern dieExtended Binding Syntax an. Mithilfe der Extended Binding Syntaxkönnen Sie zum einen den Pfad zum Modelattribut angeben. Zumanderen können Sie eine Funktion angeben, die aufgerufen werdensoll, nachdem der Wert aus dem Model gelesen wurde. Für die Im-plementierung einer solchen Funktion erstellen Sie im Ordner Web-

Content des Projekts einen Ordner util und legen dort eine Dateimit dem Namen Formatter.js an.

Die Implementierung beinhaltet zwei Funktionen:

� eine Funktion für das Mapping von Modelwert und text-Attribut

� eine Funktion für das Mapping von Modelwert und state-Attribut

Dementsprechend implementiert der Formatierer die Funktion sta-tusText bzw. die Funktion statusState. Wie es Listing 10.8 zeigt,implementieren wir den Formatierer in einem eigenem Paket mitdem Namen fioribuch.util.

jQuery.sap.declare("fioribuch.util.Formatter");fioribuch.util.Formatter = {

_statusStateMap : {"V" : "Success","H" : "Success",

Wert des Modellattributs Darzustellender Text Formatierung im UI

V Very High HDI Success

J High HDI Success

M Medium HDI Warning

L Low HDI Error

N No Data about HDI None

Tabelle 10.2 Mappingregeln für den HumanDevelopmentIndex


338

"M" : "Warning","L" : "Error","N" : "None",

},_statusTextMap : {"V" : "Very High HDI","H" : "High HDI","M" : "Medium HDI","L" : "Low HDI","N" : "No Data about HDI",

},statusText : function (value) {var map = fioribuch.util.Formatter._statusTextMap;return (value && map[value]) ?map[value] : "No Data about HDI";

,statusState : function (value) {

var map = fioribuch.util.Formatter._statusStateMap;return (value && map[value]) ?map[value] : "None";

}};

Listing 10.8 Implementierung des Formatierers

Nachdem die Implementierung der Formatierungsfunktionen abge-schlossen ist, implementieren Sie den Status in dem MainView. FügenSie nach dem schließenden Attribut-Tag den Tag firstStatus ein.Anschließend fügen Sie ein Objekt vom Typ ObjectStatus hinzu unddeklarieren über die Extended Binding Syntax, dass die Formatie-rungsfunktionen aufgerufen werden sollen (siehe Listing 10.9).

<firstStatus><ObjectStatustext="{path:'countryModel>detailInfo/HumanDevelopmentIndex',formatter:'fioribuch.util.Formatter.statusText'

}"state="{path:'countryModel>detailInfo/HumanDevelopmentIndex',formatter:'fioribuch.util.Formatter.statusState'

}"/>

</firstStatus>

Listing 10.9 Implementierung des Objektstatus


SAPUI5 10.1

339

Umgang mit experimentellen Eigenschaften

Die Nutzung der Extended Binding Syntax in XML-Views ist derzeitnoch experimentell. Experimentelle Eigenschaften von SAPUI5 sindEigenschaften, die zwar bereits durch den Entwickler genutzt wer-den können, bei denen sich SAP jedoch vorbehält, noch Änderungendurchzuführen. Für die Extended Binding Syntax bedeutet dies, dasssie explizit aktiviert werden muss. Fügen Sie hierfür ein weiteresBootstrapping-Attribut der Datei index.html hinzu. Das entsprechen-de Attribut trägt den Namen data-sap-ui-xx-bindingSyntax="Com-plex". Ohne diese Angabe werden die Formatierfunktionen nichtaufgerufen. Dazu muss, gemäß der require- und declare-Logik vonSAPUI5, das Laden der Formatter.js-Ressource initiiert werden. Ge-ben Sie dazu in der Controller-Implementierung unseres StartViewsMyApp.controller.js die Zeile jQuery.sap.require("fioribuch.util.Formatter") zu Beginn der Implementierung ein.

Die Navigation implementieren

Die Liste der Länder erscheint nun in der Masterliste. Im nächstenSchritt implementieren Sie die Navigation. Für unser Beispiel nutzenSie die Implementierung mit dem EventBus von SAPUI5. In Ab-schnitt 10.2.4, »Routing«, zeigen wir Best Practices für die Imple-mentierung der Navigation-API und gehen dort auch auf die Nut-zung des neuen Konzepts der Targets ein.

EventBusDer EventBus basiert auf einem einfachen Event-Konzept: Ein Teil-nehmer löst Events aus, und ein oder mehrere Akteure registrierensich für ein Event. In unserer Beispielanwendung ist der MyApp-View der zentrale Ausgangspunkt, über den die Anwendung bzw.das sap.m.SplitApp-Objekt erzeugt und entsprechend mit demMaster- und Detail-View bestückt wird. Das sap.m.SplitApp-Objektverfügt (wie auch die Implementierung von sap.m.App) über dieFunktionen to und back, mit denen Sie zu der gewünschten Seite ei-ner Anwendung navigieren können. Der MyApp-View soll im Con-troller zwei Funktionen implementieren, welche die Navigation zueiner Seite bzw. von einer Seite zurück zur Vorgängerseite ermög-licht. Möchte z. B. der MasterView zur DetailView navigieren, feuerter einen Event. Der MyApp-View reagiert auf dieses Event und löstdie Navigation über die to-Funktion zur Detailseite aus.



340

Damit MyApp auf die Events reagieren kann, muss sie sich zu Beginnfür spezifische Events über die Funktion subscribe des EventBus re-gistrieren. Die Funktion erhält vier Parameter:

� ChannelDer erste Parameter ist der sogenannte Channel, man könnte ihnauch als Namenraum bezeichnen.

� Event-NameMithilfe des zweiten Parameters, dem Event-Namen, kann manzusammen mit dem Channel einen Event eindeutig identifizieren.

� CallbackAls dritten Parameter übergibt man die Referenz auf eine Funkti-on, die aufgerufen werden soll, falls das Event ausgelöst wird.

� ListenerÜber den vierten Parameter können Sie den JavaScript-Kontextübergeben, über den Sie in der Funktion dann via this zugreifen.

Wir erweitern für den EventBus die onInit-Funktion mit den in Lis-ting 10.10 dargestellten Codezeilen. Mit diesem Listung führen Siezwei Events ein: navTo und navBack. Beide Events werden demChannel nav zugeordnet. Tritt eines der Events ein, wird die entspre-chende angegebene JavaScript-Funktion aufgerufen.

onInit : function() {//…var bus = sap.ui.getCore().getEventBus();bus.subscribe("nav", "navTo",this.navToHandler, this);

bus.subscribe("nav", "navBack",this.navBackHandler, this);

},

Listing 10.10 Registrierung für die Navigations-Events

Nachdem die Registrierung implementiert ist, werden die beidenFunktionen navToHandler und navBackHandler im MyApp-Controllerausgeprägt. In der Funktion navToHandler definieren Sie in derFunktionssignatur drei Parameter. Diese Parameter werden durchden EventBus befüllt. Sie erhalten den Namensraum und den Event-bezeichner sowie ein Objekt, über den der Eventauslöser Informa-tionen an den Eventempfänger senden kann. Listing 10.11 zeigt dieImplementierung eines einfachen Lazy-Loadings. Mithilfe des Lazy-


SAPUI5 10.1

341

Loadings wird geprüft, ob die Seite, die der Eventoriginator überdas Eventkommunikationsobjekt weiterleitet, bereits instanziiertwurde. Ist dies nicht der Fall, wird die Seite instanziiert und demApp-Objekt hinzugefügt. Im nächsten Schritt wird dem Navigations-ziel der BindingContext des ausgewählten Listeneintrags aus derMasterliste über die Funktion bindElement hinzugefügt. Im An-schluss wird über die to-Funktion des sap.m.App-Objekts die Navi-gation zur Seite ausgelöst.

navToHandler : function(channelId, eventId, eventParams) {if (eventParams && eventParams.data.id) {if (this.app.getPage(eventParams.data.id) === null) {

this.app.addPage(sap.ui.xmlview(eventParams.data.id,"view."+ eventParams.data.id));

}var oPage = this.app.getPage(eventParams.data.id);oPage.bindElement(

eventParams.data.bindingContext.getPath());this.app.to(eventParams.data.id);

} else {// handle error

}}

Listing 10.11 Implementierung der Navigation über die to-Funktion von sap.m.App

Navigation mit dem EventBus

Im letzten Schritt schauen Sie sich die Implementierung der Naviga-tion in dem MasterView an. Wie Sie in Listing 10.7 weiter vorne indiesem Abschnitt gesehen haben, wurde das select-Event der Listemit dem Event-Handler handleListItemPress verbunden. Diese Funk-tion implementieren Sie im Controller des Views (siehe Listing 10.12).Die Funktion liest den BindingContext des selektierten Listenein-trags aus und ruft im Anschluss die Funktion propagateSelectionauf. Diese Funktion ruft auf dem EventBus daraufhin die Funktionpublish auf. Die Funktion löst das übergebene Event navTo aus demEventchannel nav aus. Dabei wird ein selbstdefiniertes JavaScript-Objekt übergeben, mit dem der Eventempfänger die weitere Verar-beitung der Navigation übernehmen kann.

handleListItemPress : function(evt) {var context = evt.getSource().getBindingContext();this.propagateSelection(context);

},propagateSelection : function(context) {var bus = sap.ui.getCore().getEventBus();



342

bus.publish("nav", "navTo", {data : {id :"DetailView",bindingContext : context,tab : "countryDetails"

}});

}

Listing 10.12 Implementierung des List-Event-Handlers

Die Detailansicht implementieren

Im Anschluss an die Implementierung der Hauptansicht und derAusprägung der Navigation, wechseln wir in die Datei Detail-View.view.js. In der Detailansicht soll im oberen Bereich der Seite dieInformationen zum selektierten Objekt angezeigt werden. Verwen-den Sie dazu das Control sap.m.ObjectHeader.

sap.m.Object-Header-Control

Das Control hat die gleichen Eigenschaften wie das sap.m.Object-ListItem und wird auch analog zu diesem Control an die Attributeaus dem JSON-Model gebunden. Listing 10.13 zeigt die Implementie-rung des sap.m.ObjectHeader-Controls in der Detailanzeige.

<ObjectHeadertitle="{name}"number="{detailInfo/area}"numberUnit="{detailInfo/areaUnit}" >

<attributes><ObjectAttribute text="{short}" />

</attributes><firstStatus><ObjectStatus

text="{path: 'detailInfo/HumanDevelopmentIndex',formatter: 'fioribuch.util.Formatter.statusText'

}"state="{

path: 'detailInfo/HumanDevelopmentIndex',formatter: 'fioribuch.util.Formatter.statusState'

}"/>

</firstStatus></ObjectHeader>

Listing 10.13 Implementierung des sap.m.ObjectHeader-Controls


SAPUI5 10.1

343

Direkt unter den Objekt-Informationen zeigen wir gemäß dem Ob-jectView-Muster das UI-Control sap.m.IconTabBar. Die sap.m.Icon-TabBar erhält zwei sap.m.IconTabFilter-Objekte, hierfür weist mansie dem Feld items zu. Dem ersten Item fügen wir eine Tabelle an.Diese Tabelle bekommt drei Spalten und zeigt die Städte, Bevölke-rung und Bereiche eines Landes an. Das zweite IconTabFilter-Ob-jekt in der IconTabBar wird verwendet, um die Landesflagge anzu-zeigen. Listing 10.14 zeigt die Implementierung des IconTabBar-Controls.

<IconTabBarexpanded="false" id="idIconTabBar" >

<items><IconTabFilter

icon="sap-icon://activity-items"key="countryDetails">

<Table headerText="Cities" items="{cities}" ><columns>

<Column><header><Label text="Name" /></header></Column><Column minScreenWidth="Tablet"

demandPopin="true"hAlign="Right" >

<header><Label text="Population" /></header></Column><Column minScreenWidth="Tablet"

demandPopin="true"hAlign="Right" >

<header><Label text="Area" /></header></Column>

</columns><ColumnListItem type="Navigation"

press="handleLineItemPress" ><cells><ObjectIdentifier title="{name}" /><Text text="{population}"/><ObjectNumber number="{area}"

numberUnit="{areaUnit}" /></cells>

</ColumnListItem></Table>

</IconTabFilter><IconTabFiltericon="sap-icon://flag" key="countryFlag">



344

<Image src="{detailInfo/flagUrl}"></Image></IconTabFilter>

</items></IconTabBar>

Listing 10.14 Das sap.m.IconTabBar-Control

Nachdem wir die Detailansicht vollständig implementiert haben,können wir die Anwendung ausführen. Nach dem Start erhalten wirdie in Abbildung 10.3 eingeführte Anwendung. Durch die Auswahleines Listeneintrags werden die Details zu dem Eintrag angezeigt.

10.2 Best Practices bei der Entwicklung

Die im vorigen Abschnitt implementierte Anwendung stellt einefunktionstüchtige mobile SAPUI5-Anwendung dar. Damit Sie aufBasis einer einfachen SAPUI5-Anwendung eine Anwendung gemäßden SAP-Fiori-Grundsätzen implementieren können, gilt es jedoch,einiges zu beachten. In diesem Abschnitt stellen wir Ihnen BestPractices vor, mit deren Hilfe Sie die in diesem Kapitel vorgestellteAnwendung zu einer SAP-Fiori-ähnlichen Applikation ausbauenkönnen.

10.2.1 Asynchronous Module Definitions

Mit Release 1.28 der SAPUI5-Version wurde ein neues Konzept fürdas Definieren von Modulen eingeführt. Das neue Konzept folgt da-bei der sogenannten Asynchronous Module Definition (AMD) und re-präsentiert den Wandel vom synchronen Laden von Ressourcen hinzum asynchronen Laden. Die Funktionen hierfür sind sap.ui.defi-ne bzw. sap.ui.require. Beachten Sie, dass die Implementierung inder aktuellen Version noch synchron ist. Beide Funktionen ersetzendabei die bekannten Funktionen jQuery.sap.declare und jQue-ry.sap.require.

Dependency Injec-tion unter SAPUI5

Mit der Verwendung von sap.ui.define geht auch die Änderungder Implementierung von View- oder Komponenten-Controllerneinher. Das Codebeispiel aus Listing 10.15 zeigt die Nutzung vonsap.ui.define bei der Implementierung eines Controllers.


Best Practices bei der Entwicklung 10.2

345

sap.ui.define(['sap/ui/core/UIComponent'],function(UIComponent) {"use strict";return UIComponent.extend("fioribook.Component",{

// Implementierung der Komponente});

});

Listing 10.15 Implementierung einer Komponente mit sap.ui.define

Die Implementierung aus Listing 10.15 ruft die Funktion sap.ui.de-fine mit zwei Parametern auf.

� Der erste Parameter ist ein Array und erhält in einer mit Kommagetrennten Wertemenge eine Aufzählung von abhängigen Modu-len. Die abhängigen Module werden als Resourcepfade angege-ben. Die Dateiendung .js wird bei dieser Angabe nicht benötigt.Zur Laufzeit werden die angegebenen Module durch SAPUI5 in-stanziiert.

� Als zweiten Parameter übergeben Sie eine factory-Funktion. Die-se Funktion erhält für jede beschriebene Abhängigkeit einen Para-meter als Platzhalter für das von SAPUI5 erzeugte Objekt des ent-sprechenden Typs. Die Übergabe der Referenzen erfolgt in derReihenfolge der Definition in der Liste der abhängigen Module(Dependency Injection). In der factory-Funktion selbst implemen-tieren Sie die eigene Komponente bzw. den eigenen Controller.

10.2.2 Das Komponentenmodell von SAPUI5

Wiederverwendbarkeit ist seit Jahrzehnten eines der zentralen Schlag-worte bei der Softwareentwicklung. Häufig wird dabei auf die Ver-wendung von Komponenten gesetzt. Auch SAPUI5 bietet ein Kom-ponentenmodell an. Dabei unterscheidet SAPUI5 zwei verschiedeneArten von Komponenten:

� Die faceless-KomponenteBei dieser Art der Komponente handelt es sich um eine wieder-verwendbare Einheit, welche jedoch nicht an der Oberfläche an-gezeigt wird. Die Implementierung wird lediglich innerhalb derAnwendung integriert und erlaubt es beispielsweise, die Kom-munikation mit dem Backend flexibler und austauschbarer zu



346

implementieren. Die Basis-Implementierung dieser Art derKomponente befindet sich unter sap.ui.core.Component.

� Die facefull-KomponenteDieser Komponententyp bietet die Möglichkeit, UI-Aspekte in ei-ne wiederverwendbare Einheit zu kapseln. Beispielsweise kannman so ein Suchformular implementieren, welches in unterschied-lichen Anwendungen zum Einsatz kommt und dabei ein konsis-tentes Nutzererlebnis bietet. Die Implementierung der Basis istunter sap.ui.core.UIComponent zu finden und erbt von der Klassesap.ui.core.Component.

Die Implementierung beider Komponenten erfolgt über ähnlicheGrundstrukturen. Komponenten werden in einem separaten Ordnerim Projekt abgelegt. Dieser Ordner enthält alle Ressourcen, die dieKomponente benötigt, um erfolgreich verwendet werden zu kön-nen. In diesem Ordner werden zwei Dateien angelegt.

� Component.jsDie Datei component.js wird als Komponenten-Controller be-zeichnet. Sie enthält die komplette Definition der Metadaten so-wie die Implementierung aller für die Komponente relevantenFunktionen.

� Component.jsonDie Datei component.json ist der sogenannte Componente Descrip-tor. Er enthält die Metainformationen, die zur Entwicklungszeit(designtime) verwendet werden können. Das sind z. B. Defini-tionen über Abhängigkeiten zu anderen Komponenten oder UI-Controls sowie Schlüsselworte, mit denen sie die Komponentebeschreiben kann. Die Datei component.json wird zur Laufzeit(runtime) auf der Clientseite nicht benötigt. Aus diesem Grundwird sie auch nicht durch den Browser geladen. Die Datei soll es inder Zukunft Werkzeugen ermöglichen, für die SAPUI5-Entwick-lung auf Informationen zuzugreifen. Aktuell gibt es jedoch solcheWerkzeuge nicht.

Component-preload.js

verwenden

Zusätzlich zu den beiden notwendigen Dateien wird Ihnen bei derVerwendung von Komponenten zur Laufzeit eine Fehlermeldung inder Browserkonsole angezeigt: Die Datei component-preload.js konn-te nicht gefunden werden. Das Auftreten dieser Fehlermeldung hat



347

zur Laufzeit keinerlei negative Nebenwirkungen. Sie können denFehler ausbessern, indem Sie den beiden genannten Dateien die Da-tei Component-preload.js hinzufügen. Die Datei kann leer sein, oderaber sie kann verwendet werden für das Laden von Ressourcen oderdas Bereitstellen von Funktionen, die später durch die Komponentebenötigt werden. Sie lösen damit das Lazy-Loading (das Laden vonRessourcen zum Zeitpunkt der Nutzung) ab und laden stattdessenbereits zum Zeitpunkt des Ladens der Komponente alle Ressourcen.Hierzu fügen Sie den Aufruf der Funktion jQuery.sap.require in dieDatei component-preload.js ein, so wie Sie es aus SAPUI5 bereits ken-nen. Die require-Aufrufe innerhalb der Datei component.js und denanderen JavaScript-Ressourcen Ihrer Komponente sind damit hin-fällig.

Komponenten-Container

Komponenten werden durch den Verwender der Komponente nichtdirekt instanziiert, sondern über einen sogenannten Komponenten-Container erzeugt. Das dazugehörige Objekt heißt sap.ui.core.Com-ponentContainer. Die Funktion beschreibt unter anderem die fol-genden Parameter:

� name: Der Namensraum, in dem die zu erzeugende Komponentezu finden ist.

� settings: Parameter, die an die zu erzeugende Komponente wei-tergegeben werden sollen. Die Parameter müssen dabei in derKomponente beschrieben sein.

� propagteModel: Dieser boolesche Parameter gibt an, ob der Kom-ponente der Zugriff auf die Modelle der Komponente erlaubt ist.

Der Vollständigkeit halber sei an dieser Stelle angemerkt, dass esauch möglich wäre, eine Instanz der Komponente über die Funktionsap.ui.getCore().createComponent selbst zu erzeugen, um diesedann wiederum dem Komponenten-Container zu übergeben.

Komponenten in SAP-Fiori-Anwen-dungen

In jeder SAP-Fiori-Anwendung kommt das Komponenten-Konzeptzum Einsatz. Es dient zur Entkopplung der Datei index.html vom Restder Anwendung. Normalerweise startet, wie in unserem Einfüh-rungsbeispiel gezeigt, die SAPUI5-Anwendung aus der index.html.Der erste Hauptview, der das Gesamtlayout beschreibt, wird gestar-tet. Nach dem Start kümmert sich der Controller des Views um alle



348

notwendigen Schritte, um die Anwendung mit Daten, Übersetzungs-texten und Ähnlichem zu versorgen. In diesem Fall enthält die in-dex.html jedoch sehr viel Wissen über die Anwendung und ist somitunwiderruflich mit ihr verknüpft. Diese Verknüpfung führt dazu,dass Sie die Anwendung nicht nahtlos in eine andere SAPUI5-An-wendung, z. B. einen Launchpad, integrieren können.

Metadaten einerKomponente

Komponenten implementieren innerhalb der component.js-Dateinicht nur JavaScript-Funktionen. Stattdessen können Komponentenüber ihre sogenannte Metadaten konfiguriert werden. Die Meta-daten kommen zum einen aus der Beziehung zur Basisklassesap.ui.core.ManagedObject (die Basis aller SAPUI5-Objekte), siewerden von der Basisklasse geerbt. Zum anderen werden auch in derKlasse sap.ui.core.UIComponent einige Attribute beschrieben. DieAttribute können wiederum zur Laufzeit durch den Entwickler selbstausgelesen werden. Alternativ werden einige Metadaten direktdurch die Unified Shell verarbeitet. Die Zentralisierung der Attributereduziert bei etwaigen Änderungen den Aufwand, um die zu ändern-den Stellen ausfindig zu machen und zu ändern. Beispielsweise kön-nen Service-URLs in der Komponenten-Konfiguration und nichtdirekt in den unterschiedlichen Controllern der Anwendung defi-niert werden.

Komponente inSAP-Fiori-

Anwendungen

Anders als normale SAPUI5-Anwendungen werden SAP-Fiori-An-wendungen nicht über die Datei index.html aufgerufen und laufenauch nicht in ihrem eigenen Container. SAP-Fiori-Anwendungenwerden in eine zentrale Seite der sogenannten Unified Shell geladen.Aus diesem Grund ist es zwingend erforderlich, eine SAPUI5-An-wendung immer als selbstständige Komponente zu implementieren.Die Shell lädt die SAPUI5-Anwendung über den Aufruf der Dateicomponent.js. Komponenten enthalten in SAPUI5 sogenannte Meta-daten. Diese Metadaten werden durch die Shell ausgelesen und beider Ausführung berücksichtigt.

Aufbau einer SAP-Fiori-Anwendung

SAP-Fiori-Anwendungen besitzen generell einen identischen Auf-bau, der zentrale Bestandteil ist der Component Controller. Über ihnwird der Rest der Anwendung, bestehend aus Views, View Control-lern und Modellen, ausgeführt. Abbildung 10.9 zeigt den Aufbau.



349

Abbildung 10.9 Bestandteile einer SAP-Fiori-Anwendung

Die Datei »component.js« verwenden

Um aus unserer mobilen Beispielanwendung eine SAP-Fiori-Anwen-dung zu machen, legen Sie im Ordner WebContent eine Datei mitdem Namen component.js an. Nach dem Öffnen der Datei fügen Siein der ersten Zeile die Deklaration des Moduls hinzu. Wie es Listing10.16 zeigt, verwenden Sie hierzu den Namensraum fioribuch.com-ponent. Der Name der Komponente muss immer den Bestandteil»Component« haben. Im Anschluss implementieren wir eine neueUI-Componente, wie in SAPUI5 üblich, rufen wir hierzu die extend-Funktion auf und geben als ersten Parameter den vollqualifiziertenNamen unserer Komponente an, und als zweiten Parameter überge-ben wir ein im Moment noch leeres JavaScript. Dieses Objekt wer-den Sie jetzt sukzessive erweitern.

jQuery.sap.declare("fioribuch.component.Component");sap.ui.core.UIComponent.extend(

"fioribuch.component.Component", {// code here

});

Listing 10.16 Implementierung einer Komponente

View

ViewControllers

Models(Resource Model)

ComponentController

Models(Device Model)

Models(Application Data)

View View

ViewControllers

FragmentsControlsControls

ComponentContainer

Fiori Launchpad

Fiori App

application descriptor



350

Metadaten-Definition in der

Komponente

Innerhalb der geschweiften Klammern beschreiben Sie die Meta-daten der Komponente. Einige Parameter werden durch die Shellausgelesen, andere wiederum haben lediglich informativen Charak-ter und werden von der Laufzeitumgebung nicht berücksichtigt. Diein Listing 10.17 gezeigte Konfiguration enthält z. B. die beiden Para-meter name, version oder dependencies. Diese Parameter sind fürdie Shell nicht relevant, sondern haben lediglich dokumentierendenCharakter. Eine besondere Bedeutung hat der Parameter rootView.Diesem Parameter wird der View zugewiesen, der das sap.m.App-Objekt bzw. eines der abgeleiteten Objekte beinhaltet. In dem hiergezeigten Beispiel handelt es sich um den View mit dem Namenfioribuch.view.MyApp.

metadata : {name : "Eine einfache SAP Fiori Anwendung",version : "1.0",includes : [],dependencies : {libs : [ "sap.m", "sap.ui.layout" ],components : []

},rootView : "fioribuch.view.MyApp",

}

Listing 10.17 Definition und Implementierung einer Komponente

Nachdem die ersten Teile der Komponente implementiert sind, mussdie Datei index.html angepasst werden. Registrieren Sie dazu eine an-onyme Funktion für das init-Event der Core (siehe Listing 10.18).Nachdem diese initialisiert ist, wird die Funktion aufgerufen und eswird ein Objekt vom Typ sap.m.Shell erzeugt. Der Funktion wirddabei der Parameter app mit einem neuen sap.ui.core.Component-Container zugewiesen. Dieses Objekt erhält den Parameter name.Diesem wird dabei der Namensraum unserer zuvor implementiertenKomponente übergeben. Der Component Container lädt im An-schluss die Datei component.js aus dem Namensraum und bettet sieim entsprechenden HTML-DIV ein.

Instanziierung mitsap.ui.core.Com-ponentContainer

Achten Sie darauf, dass Sie an dieser Stelle nicht die Funktionsap.ui.getCore().createComponent verwenden und das erzeugteObjekt dann selbstständig über placeAt dem DIV-Tag zuordnen. Sieerhalten zwar keine Fehlermeldung, können aber die Komponente



351

bzw. die Anwendung selbst im Browser nicht sehen. Es wird ledig-lich die toString-Repräsentation des Objekts angezeigt.

<script>// sap.ui.xmlview("appView",// "fioribuch.view.MyApp").placeAt("content");

sap.ui.getCore().attachInit(function() {new sap.m.Shell({app : new sap.ui.core.ComponentContainer({name : "fioribuch.component"

})}).placeAt("content");

})</script>

Listing 10.18 Starten der neuen Komponente über den Component Container

Nachdem Sie die Datei index.html angepasst haben, können Sie dieAnwendung wieder starten.

10.2.3 Der App Descriptor

SAP unterstützt nicht nur eigene Standards, sondern öffnet sich ver-mehrt echten Standards. Dieses Bestreben gilt auch für SAPUI5: VonBeginn an wurden in jeder Version weitere offene Standards inte-griert. Der in Abschnitt 10.2.1, »Asynchronous Module Definitions«,beschriebene Ansatz der wiederverwendbaren Komponenten imple-mentiert ein Standard-Pattern der Softwareentwicklung.

Allerdings ist dieses Pattern im Bereich der Web-Programmierungkein echter Standard für die Beschreibung von Konfigurationspara-metern, die zur Laufzeit ausgewertet werden. Aus diesem Grund hatSAP im Rahmen der SAPUI5-Version 1.28 den sogenannten Applica-tion Descriptor eingeführt. Die Funktionsweise des Application Des-criptors ist an das sogenannte Web Application Manifest des W3C an-gelehnt. Er stellt einen zentralen, maschinenlesbaren und leicht zu-gänglichen Ort zur Ablage von Metadaten bereit, der mit einerAnwendung oder einer Komponente verknüpft ist. Im Gegensatz zurVorgehensweise in der Datei component.js ist jedoch ein Mischenvon Programmcode und Metadaten bei diesem Ansatz nicht ge-wünscht. Ist in der Version 1.28 der Application Descriptor nochsehr rudimentär, wird er ab der Version 1.30 von SAPUI5 noch bes-



352

ser genutzt. Ab dieser Version werden Modelle, die innerhalb desDescriptors beschrieben werden, automatisch instanziiert. Andersals bei der Komponente geschieht dies ohne Zutun des Entwicklers.

Arbeiten mit demApplicationDescriptor

Der Application Descriptor wird über die Datei manifest.json be-schrieben. Die Datei wird zum Entwicklungszeitpunkt im Ordnerwebapp des Projekts angelegt. Der Descriptor wird mit der Anwen-dung auf dem Frontend-Server installiert. Zur Laufzeit ist der Zugriffauf diese Datei nur lesend möglich. Eine Modifikation zur Laufzeitüber eine API ist nicht möglich. Anders als bei der Komponente wirddiese Datei nicht automatisch von SAPUI5 erkannt und verarbeitet,sondern muss über die Komponente bekanntgegeben werden. Hier-für legen Sie in den Metadaten der Komponente einen Eintrag mitdem Bezeichner manifest an und weisen diesem Attribut den Wertjson zu. Der Zugriff auf die Konfigurationsinformationen des Appli-cation Decriptors zur Laufzeit ist über die Metadaten der Komponen-te möglich. Listing 10.19 zeigt, wie der Application Descriptor in denMetadaten der Komponente bekanntgegeben wird.

sap.ui.define(["sap/ui/core/UIComponent","sap/ui/model/json/JSONModel"

], function (UIComponent, JSONModel) {"use strict";return UIComponent.extend("fioribook.Component", {

metadata : {manifest: "json"

},// Rest der Implementierung

Listing 10.19 Bekanntgabe des Application Descriptors in den Komponenten-Metadaten

Die Konfiguration des Application Descriptors gliedert sich in dreiKonfigurationsabschnitte. Diese sogenannten Namensräume tragendie Bezeichner sap.app, sap.ui und sap.ui5. Das Programmbei-spiel in Listing 10.20 zeigt die Konfiguration eines Application De-scriptors.

Der Namensraumsap.app

Der Namensraum sap.app enthält folgende anwendungsspezifischenAttribute:

� id: Bei der id handelt sich um ein Pflichtattribut. Es enthält die An-gabe des Namensraums der Anwendungskomponente.



353

� type: Gibt an, um welche Art von Konfiguration es sich handelt.Für SAP-Fiori-Anwendungen gibt man den Wert application an.

� i18n: Dieses Attribut beschreibt den Pfad zur Resource-Bundle-Datei.

� title: Enthält den Titel der Anwendung. Er kann auch einen Bin-dingpfad zu einem Eintrag in der Resource-Bundle-Datei enthalten.

� description: Das Attribut description kann einen beschreiben-den Text enthalten.

� applicationVersion: Dieses Attribut enthält die Angabe der Ap-plikationsversion.

Der Namensraum sap.ui

Der Namensraum sap.ui wird für UI-spezifische Attribute verwen-det. Er enthält dabei folgende Attribute:

� technology: Gibt die Art der verwendeten UI-Technologie an.Normalerweise steht hier der Wert UI5.

� deviceTypes: Wird zur Angabe der unterstützten Endgeräte ver-wendet. Folgende Werte können hier angegeben werden: desktop,tablet, phone. Die Werte besitzen standardmäßig den Wert true.

� supportedThemes: Enthält die Angabe der unterstützten SAP Themes.Beispielsweise kann hier sap_bluecrystal angegeben werden.

Der Namensraum sap.ui enthält SAPUI5-spezifische Konfigurations-parameter. Die Parameter werden zur Laufzeit von SAPUI5 automa-tisch verarbeitet. Die wichtigsten Parameter sind die folgenden:

� rootView: Die Angabe dieses Parameters hat zur Folge, dass dieSAPUI5-Komponente den angegebenen View automatisch instan-ziiert und als Hauptview verwendet.

� dependencies: Enthält die Konfiguration der Abhängigkeiten zwi-schen der eigenen Anwendung und anderen Bibliotheken. Beidem Parameter dependencies können Sie auch angeben, in wel-cher Versionsnummer SAPUI5 mindestens vorliegen muss.

� models: Der Parameter models wird für die Konfiguration der inder Anwendung benutzten Modelle eingesetzt. Die angegebenenModelle werden durch SAPUI5 automatisch instanziiert. Die In-stanziierung der Modelle in der init-Funktion der Komponenteentfällt dadurch.



354

{"_version": "1.1.0","sap.app": {"_version": "1.1.0","id": "fioribook","type": "application","i18n": "i18n/i18n.properties","title": "{{appTitle}}","description": "{{appDescription}}","applicationVersion": {"version": "1.0.0"

},},"sap.ui": {"_version": "1.1.0","technology": "UI5","deviceTypes": {"desktop": true,"tablet": true,"phone": true

},"supportedThemes": ["sap_bluecrystal"

]},"sap.ui5": {"_version": "1.1.0","rootView": "fioribook.view.App","dependencies": {"minUI5Version": "1.30","libs": {"sap.m": {}

}},"models": {"i18n": {"type": "sap.ui.model.resource.ResourceModel","settings": {"bundleName": "sap.ui.demo.wt.i18n.i18n"

}}

}}

}

Listing 10.20 Der Application Descriptor



355

10.2.4 Routing

Es gibt in SAPUI5 für den Anwender verschiedene Möglichkeiten,von einer Seite zur nächsten zu navigieren. In vielen Anwendungenwird das EventBus-Objekt genutzt, das Sie in unserer sehr einfachenSAPUI5-Beispielanwendung implementiert haben. Sie erhalten eineReferenz auf das Objekt über sap.ui.getCore().getEventBus. SAP-Fiori-Anwendungen sollten jedoch tunlichst auf die Nutzung desEventBus-Objekts verzichten. Zum einen ist die Verwendung diesesglobalen Objekts (»global« deshalb, weil man es über das Core-Objekt erhält) nicht zu empfehlen, weil es in dem SAP-Fiori-Kontextzu ungewünschten Nebenwirkungen führen kann. Zum anderenzeigt die URL bei der Nutzung des EventBus-Konzepts immer auf dieStartseite der Anwendung. Es ist nicht möglich, in dem MasterViewunserer vorgestellten Master-Detail-Anwendung ein Land auszuwäh-len und ein Lesezeichen (Bookmark) auf das ausgewählte Land zu set-zen, um sich später das Land nochmals anzeigen zu lassen. Dies giltim Übrigen nicht nur für das Setzen von Lesezeichen, sondern auchbei der Navigation zwischen zwei Anwendungen. Die Navigation-API, die SAPUI5 seit der Version 1.16 anbietet, ist für solche Zweckesehr viel besser geeignet.

Arbeiten mit der Navigation-API

Die Navigation-API besteht aus zwei Teilen:

� Navigationsregeln definierenIm ersten Teil werden Navigationsregeln definiert. Bei diesen Re-geln wird festgelegt, von welchem View X zu welchem View Y na-vigiert wird und welche Informationen bei dieser Navigationübergeben werden müssen bzw. optional werden können.

� Navigationsregeln an einen Router übergebenDer zweite Teil besteht darin, dass man dieses Navigationsregel-werk einem sogenannten Router übergibt. Der Router wird wie-derum von den Navigationsinitiatoren aufgerufen. Dabei wirdihm mitgeteilt, welche Navigationsroute verwendet werden sollund welche Parameter dabei ausgetauscht werden sollen. Das Na-vigationsziel wird durch ein Event informiert, dass eine Naviga-tion stattfindet und kann dann in einem entsprechenden Event-Handler auf die Navigation reagieren. Beispielsweise können dieübergebenen Parameter des Navigationsinitiators ausgelesen undweiterverarbeitet werden.



356

Die Navigation-API arbeitet bei der Navigation mit dem sogenanntenHash. Die Ursprungs-URL der Anwendung bleibt dabei immergleich, lediglich wird der URL ein durch die Anwendung definierterHash hinzugefügt. Durch die Erweiterung mit dem Hash ist es dannfür den Nutzer möglich, Bookmarks zu setzen und später die Anwen-dung aufzurufen.

Navigationsregel-werk konfigurieren

Um die Navigationsregeln zu implementieren, wird die Komponen-ten-Konfiguration erweitert. Hierzu fügen Sie hinter dem config-Eintrag eine neue Objektdefinition mit dem Bezeichner routing ein.Innerhalb der Routing-Implementierung wird eine erneute Objekt-definition dem Attribut config zugewiesen. Die in Tabelle 10.3 ge-zeigten Attribute legen wir in der Konfiguration des Routings an.

Aus den Attributen ergibt sich dann die in Listing 10.21 dargestellteKonfiguration.

routing : {config : {

viewType : "XML",viewPath : "fioribuch.view",targetAggregation : "detailPages",clearTarget : false

},routes : [

Attribut Wert Beschreibung

viewType XML Angabe, welches Development Paradigm für die Views ver-wendet wird

viewPath fioribuch.view Namensraum, dem die Views zugeordnet sind

targetAggregation targetAggregation Angabe in welcher Aggrega-tion des in der Route angege-benen Objekts der entspre-chende View angezeigt wer-den soll

clearTarget false gibt an, ob die targetAggrega-tion vor dem Hinzufügen des Navigationsendpunkts existie-rende Elemente entfernen soll

Tabelle 10.3 Routing-Konfigurationsattribute und ihre Werte



357

// noch zu definieren]

}

Listing 10.21 Routing-Konfiguration

Im Anschluss müssen Sie nur noch die einzelnen Routings definie-ren. Dies geschieht innerhalb des routes-Attributs aus Listing 10.21.Als erste Routing-Regel wird das default-Routing angelegt. Diese Na-vigationsregel wird beim ersten Aufruf der Anwendung ausgeführt.Über den Parameter pattern wird beschrieben, dass dieses Routingbeim Aufruf der Anwendung ohne Hash verwendet wird. Das view-Attribut legt fest, welcher SAPUI5-View aufgerufen werden soll. ImAnschluss an den View beschreibt man über die Parameter target-Aggregation und targetControl, wo der View angezeigt werdensoll. Das targetControl ist die ID eines App-Objekts, das sich in demrootView befindet, und die targetAggregation-Angabe gibt an, dassder MasterView in dem App-Objekt im Bereich masterPages ange-zeigt werden soll.

Ausgehend vom MasterView beschreiben wir noch eine weitereRoute. Diese soll aufgerufen werden, sobald Sie aus dem MasterVieweinen Listeneintrag auswählen. Diese Unterroute beschreiben Sieüber eine Array-Angabe mit dem Namen subroutes.

Zu Beginn definieren Sie ein Pattern. Das Pattern enthält zum einendas Land, das in der Länderliste auswählt wird, zum anderen soll esmöglich sein, bei der Navigation anzugeben, welches IconTabBar-Element im Navigationsziel ausgewählt werden soll. Das Pattern er-hält hierfür im ersten Teil der Angabe innerhalb von geschweiftenKlammern den Platzhalter country. Die geschweifte Klammer gibtan, dass man beim Ausführen der Navigation diesen Parameter be-füllen muss. Als zweiten Parameter zwischen zwei Doppelpunktengeben Sie den Parameter tab an. Die Doppelpunkte kennzeichnenden Parameter als optionalen Parameter. Die komplette Konfigura-tion sehen Sie in Listing 10.22.

{pattern : "",

name : "master",view : "MasterView",targetAggregation : "masterPages",targetControl : "myApp",



358

subroutes : [{pattern : "{country}/:tab:",name : "detail",view : "DetailView",targetAggregation : "detailPages",

}]},

Listing 10.22 Definition einer Navigationsroute in component.js

Aus dem Parameter targetControl in Listing 10.22 und dem Para-meter targetAggregation aus Listing 10.22 ergibt sich auch, dass Siesich nicht selbst um die Instanziierung des MasterViews bzw. Detail-Views kümmern müssen. Deshalb müssen Sie in der Beispielanwen-dung auch eine Anpassung in MyApp.view.xml durchführen. Die inListing 10.3 eingeführte Implementierung wird so angepasst, dass imcontent-Tag lediglich das sap.m.SplitApp-Control mit der ID myAppbelassen wird. Listing 10.23 zeigt die Implementierung nach der An-passung.

<content><SplitApp xmlns="sap.m" id="myApp"></SplitApp>

</content>

Listing 10.23 MyApp-View nach den Anpassungen für den Router

Neuerungen beim Routing

Mit der SAPUI5-Version 1.28 führt die SAP Neuerungen bei der Konfigu-ration und Implementierung des Routings ein. Die Änderungen betreffendie Definition der Patterns. War es bis 1.26 noch so, dass die Pattern-Konfiguration und die Navigationsendpunkt-Definition in einem Schrittbeschrieben wurden, wurde dieses Konzept in 1.28 überarbeitet. Es wur-den sogenannte Targets eingeführt. Einem Navigationspattern könnendabei mehrere Targets zugewiesen werden. Targets beschreiben das Ziel,also den View, der aufgerufen werden soll, sobald das entsprechende Pat-tern zutrifft. In Listing 10.24 stellen wir die Konfiguration des Routings für1.28 vor. Sie finden im Projekt SAP_Fiori2_MobileAnwendung zu diesemBuch eine component.js-Datei, die diese neue Target-basierte Implemen-tierung verwendet.

routing : {config : {

routerClass: fioribuch.router.FioriRouter,viewType : "XML",



359

viewPath : "fioribuch.view",targetAggregation : "detailPages",clearTarget : false,controlId:"myApp",

},routes : [

{pattern : "",name : "master",view : "MasterView",target : ["master"]

},{

pattern : "{country}/:tab:",name : "detail",target : ["detail"]

}],targets : {

"master" : {viewName:"MasterView",controlAggregation : "masterPages"

},"detail": {viewName : "DetailView",controlAggregation:"detailPages"

}}

}

Listing 10.24 Definition des Routings für SAPUI5 1.28 und höher

Damit der Router die Routing-Konfiguration aus der Datei compo-nent.js kennt und die Routen anwenden kann, muss man den Routernoch initialisieren. Dies geschieht in der init-Funktion der compo-nent.js. Listing 10.25 zeigt die Initialisierung des Routings. Zu Beginnwird über die Funktion getRouter die Referenz auf den Router aus-gelesen. Bei dieser Referenz kann es sich entweder um die mitSAPUI5 ausgelieferte Router-Implementierung handeln oder um ei-ne eigene Router-Implementierung. Auf dieser Instanz rufen Sie dieMethode initialize auf.

jQuery.sap.require("sap.ui.core.routing.History");jQuery.sap.require("sap.m.routing.RouteMatchedHandler");

sap.ui.core.UIComponent.prototype.init.apply(this, arguments);this.getRouter().initialize();

Listing 10.25 Initialisierung des Routers



360

Router ersetztEventBus

Mit dem Einführen des Routers ändert sich auch die Navigation vomMasterView zum DetailView. Es wird jetzt nicht mehr der EventBusverwendet, sondern das Routing. Hierfür ändern Sie in dem Master-View die Implementierung der Funktion propagateSelection. DieFunktion erhält noch immer als Aufrufparameter den BindingCon-text des ausgewählten Listeneintrags. Durch ein etwas seltsames Ver-halten des Routings bei der Verwendung von JSON-Modellen ist esnotwendig, dass die im BindingContext liegende Pfadangabe zumJSON-Model-Eintrag encodiert werden muss. Hierfür rufen Sie dieFunktion encodeURIComponent auf und übergeben den Pfad.

Im Anschluss wird über die Funktion getRouterFor auf dem UI-Component-Objekt die Referenz für den für diese Anwendung zu-ständigen Router besorgt. Auf diesem Router-Objekt rufen wir dieFunktion navTo auf. Sie erhält als ersten Parameter das Navigations-ziel, in unserem Fall die Angabe detail. Für detail wurde bei derRouting-Definition ein Pattern angegeben. Dieses Pattern wird nunüber ein JavaScript-Objekt als zweiter Aufrufparameter der navTo-Funktion übergeben. Listing 10.26 zeigt die Implementierung derpropagateSelection-Funktion.

propagateSelection : function (context) {var path = encodeURIComponent(context.getPath());sap.ui.core.UIComponent.getRouterFor(this).navTo(

"detail", {from: "master",country: path,tab: "countryDetails"

}, true);

Listing 10.26 Auslösen der Navigation im MasterView

Navigation inder Detailansicht

verarbeiten

Auch in der Implementierung der Detailansicht müssen Sie Anpas-sungen durchführen, weil zu diesem Zeitpunkt auf den Aufruf desRoutings reagiert werden muss. Sie müssen, nachdem der Router dieNavigation ausgelöst hat, den Kontext unserer Detailansicht auf dasselektierte Land setzen. Hierfür registrieren Sie einen Event-Handlerfür das routeMatched-Event. Dieses Event wird ausgelöst, sobaldeine Route »eingeschlagen« wurde. Der Event-Handler erhält überein Event-Objekt die Navigationsargumente, wie sie von dem Mas-terView befüllt wurden. Über den Parameter arguments erhalten SieZugriff auf das selektierte Land sowie auf den Parameter tab, der in



361

dem MasterView mit der auszuwählenden IconTabFilter-ID befülltist. Listing 10.27 zeigt die Implementierung und die Änderungenverglichen mit dem EventBus-Konzept.

onInit : function() {var oView = this.getView();sap.ui.core.UIComponent.getRouterFor(this).attachRouteMatched(function(oEvent) {

if (oEvent.getParameter("name") === "detail") {var sCountryPath =

decodeURIComponent(oEvent.getParameter("arguments").country);

oView.bindElement("countryModel>"+sCountryPath);var oIconTabBar = oView.byId("idIconTabBar");oIconTabBar.getItems().forEach(function(oItem) {

oItem.bindElement(sCountryPath)});var sTabKey = oEvent.

getParameter("arguments").tab || "countryDetails";if (oIconTabBar.getSelectedKey() !== sTabKey) {

oIconTabBar.setSelectedKey(sTabKey);}

}},this);

},

Listing 10.27 Implementierung der onInit-Funktion der Detailansicht

In SAP Fiori navigieren

Das Routing-Konzept soll es ermöglichen, innerhalb einer Anwen-dung zwischen verschiedenen View-Aspekten zu navigieren. Nebendem applikationsinternen Navigieren muss es auch möglich sein,zwischen verschiedenen SAP-Fiori-Anwendungen zu navigieren.Wie bereits angesprochen werden SAP-Fiori-Anwendungen nichtdirekt über den Browser aufgerufen, sondern über ein zentralesLaunchpad. Das Launchpad versteckt sich hinter der Datei Fiori-Launchpad.html. Über diese Anwendung startet die sogenannte Uni-fied Shell. Alle SAP-Fiori-Anwendungen, die über die Unified Shellgestartet werden, enthalten verschiedene zentrale Funktionen, z. B.den Navigations-Service.

Navigation mit URL-Fragmenten

Die einfachste Form der Navigation ist die Navigation mittels URL-Fragmenten:

http://<server>:<port>/<path>/FioriLaunchpad.html#<fragment>



362

Intent-basierteNavigation

Neben der Möglichkeit des direkten Aufrufs einer Anwendung bietetdie SAP-Fiori-Laufzeitumgebung auch eine etwas elegantere Lösungzur Navigation an: die sogenannte Intent-basierte Navigation. DieseArt der Navigation trägt ihren Namen aufgrund der Tatsache, dassdas Navigationsziel nicht direkt in der URL angegeben wird, sondernlediglich eine Art »Absichtserklärung«. Das eigentliche Navigations-ziel wird im Rahmen der Konfiguration im SAP-Fiori-Backend überein Mapping aufgelöst. Dieses Mapping heißt Target Mapping. Diesmag auf den ersten Blick umständlich erscheinen, auf den zweitenBlick ergibt sich durch die Entkopplung von Navigationsauslöser undNavigationsziel eine große Flexibilität, z. B.:

� Entkopplung der EntwicklungAnwendungen können unabhängig und nach und nach entwickeltwerden. Bei der Implementierung des Navigationsauslösers mussdas Navigationsziel noch nicht bekannt sein. Dadurch kann mangerade im Rahmen von New – Renew – Enablement Anwendun-gen im Unternehmen einfach und flexibel an die neue UI-Strategieanpassen, ohne den Programmcode des Navigationsauslösers an-zupassen, sollte das Navigationsziel eine neue Anwendung sein.

� Geräte- und benutzerspezifische NavigationIntent-basierte Navigation ermöglicht es, je nach Gerät oder Benut-zerrolle zu entscheiden, welche Anwendung hinter dem Naviga-tionsziel tatsächlich steht.

Die URL bei der Intent-basierten Navigation unterscheidet sich vonder direkten Navigation darin, dass als Hashwert ein zusammenge-setztes Fragment aus semantischem Objekt und Aktion übergebenwird. So sieht die exemplarische URL aus:

http(s)://<server>:<port>/<path>/FioriLaunchpad.html#<SemanticObject>-<Action>?param=paramValue

Für die Intent-basierte Navigation zwischen Anwendungen (die so-genannte Cross-App Navigation) verwenden Sie den sogenanntenCrossApplicationNavigation-Service. Die SAPUI5-API bietet hierfüreine JavaScript-API an, die im Objekt sap.ushell.services.Cross-ApplicationNavigation implementiert ist. Listing 10.28 zeigt dieNutzung des CrossApplicationNavigation-Services.

var oNavigationService = sap.ushell.Container.getService("CrossApplicationNavigation");



363

var href = (oNavigationService &&oNavigationService.hrefForExternal({target: {semanticObject: "SemanticObjectName",action:"nameOfAction"},params: {"param1":"value1"}}}) || "";

Listing 10.28 Konstruktion einer URL zur Intent-basierten Navigation

10.2.5 Arbeiten mit Modellen

Die Verwendung von Modellen ist in SAP-Fiori-Anwendungen obli-gatorisch. SAP-Fiori-Anwendungen nutzen verschiedene Modelle. Eswerden nicht nur die Backend-Daten in einem OData-Model gehal-ten und verarbeitet, sondern auch Modelle für die Internationalisie-rung und für die endgeräteabhängige Konfiguration erzeugt und vor-gehalten. Grundsätzlich ist bei der Arbeit mit Modellen die Frage, anwelcher Stelle die Modelle registriert werden. Für die Registrierungvon Modellen bietet SAPUI5 die Methode setModel an. Diese Me-thode ist in sap.ui.core.ManagedObject implementiert und steht so-mit allen Implementierungen zur Verfügung, die davon erben.

Typische FehlerEine weit weitverbreitete Unart ist es, dass Modelle über sap.ui.getCore().setModel registriert werden. Dies mag zwar den Zugriffauf das Model sehr stark vereinfachen, ist jedoch in SAP-Fiori-Anwendungen nicht zu empfehlen. Diese Vorgehensweise kannunerwünschte Folgen haben: Das SAPUI5-Core-Objekt, das mit dersap.ui.getCore()-Funktion zurückgeliefert wird, ist ein globalesObjekt. (Global deshalb, weil es durch das SAP Fiori Launchpadinitial erzeugt wird.) Legt eine Anwendung in diesem Objekt Model-Informationen ab, sind sie nicht nur für die Anwendung selbst sicht-bar, sondern für alle Anwendungen, die aus diesem Launchpadgestartet werden.

AblageModelle werden aus diesem Grund entweder in Wurzelkomponentenoder in dem Wurzel-View abgelegt. Dadurch ist sichergestellt, dasszwar die eigenen Anwendungsbestandteile Zugriff auf das Modelhaben, andere Anwendungen die Daten jedoch nicht sehen können.Damit die Modelle nicht an verschiedenen Stellen verstreut im Codeerzeugt und über setModel gesetzt werden, sollten Sie dies in dieKomponente verlagern. Hierfür können Sie eine Konfiguration



364

direkt unter dem Eintrag rootView anlegen. Die Konfiguration wirdüber ein config-Objekt deklariert und erhält dabei zwei Attribute:

� das Attribut resourceBundle. Diesem Attribut weisen Sie den Pfadzur Standardübersetzungsdatei zu.

� das Attribut serviceConfig. Dem serviceConfig-Attribut weisenSie ein Objekt zu. Dieses Objekt wiederum wird mit den Attribu-ten name und serviceUrl versehen.

Konfiguration inder Komponente

anlegen

Das erste Attribut name wird später ausgelesen und als ID für das Mo-del genutzt. Das zweite Attribut serviceConfig erhält den Pfad zumService. In unserem Fall wird der Pfad zur Datei mock.json spezifi-ziert. Listing 10.29 zeigt die beschriebene Konfiguration. Falls Sie diePfade zu lokalen Ressourcen wie im gezeigten Listing relativ ange-ben, stellt das Launchpad sicher, dass diese Pfade immer relativ zurDatei component.js sind und nicht zur Datei index.html. Letztere spieltin einer SAP-Fiori-Anwendung keine Rolle.

config: {resourceBundle: "i18n/i18n.properties",serviceConfig : {name : "countryModel",serviceUrl : "model/mock.json"

}},

Listing 10.29 Definition des config-Objekts

Die Konfiguration allein wird noch nicht von der Komponente auto-matisch verarbeitet, sondern muss durch den Entwickler ausgelesenund mit der SAPUI5-API ausgewertet werden. Implementieren Siedazu die Funktion init innerhalb der Komponente. Die Funktioninit wird während der Konstruktion der Komponente durch dasFramework aufgerufen. Sie müssen nichts weiter tun, als die Funk-tion zu implementieren.

Implementierungder init-Funktion

Zu Beginn der Methode lesen Sie über die Funktion getMetadata dieMetadaten der Komponente aus. Auf den ausgelesenen Metadatenwird die Funktion getConfig aufgerufen. Mit diesem Aufruf werdendie in Listing 10.29 definierten Konfigurationsparameter gelesen. Imnächsten Schritt beziehen Sie mittels der Funktion jQuery.sap.get-ModulePath den Pfad für den Namensraum fioribuch.component.Das Ergebnis des Aufrufs ist das Wurzelverzeichnis. Diese Informa-tion wird später beim Beschreiben der Pfade zu den unterschied-



365

lichen Ressourcen verwendet, die über eine lokale Pfadangabe an-gesprochen werden. In dem hier vorgestellten Beispiel sind das diePfade zum Resource-Model für die Mehrsprachigkeit und zum JSON-Model. Die beiden Modelle werden erzeugt und über sogenanntenamend-Models im Kontext der Komponente abgelegt. Dies ent-spricht den bereits zu Beginn des Abschnitts eingeführten Empfeh-lungen bei der Arbeit mit Modellen im SAP-Fiori-Umfeld.

init : function() {sap.ui.core.UIComponent.prototype.init.apply(this, arguments);

var mConfig = this.getMetadata().getConfig();var oRootPath = jQuery.sap.getModulePath("fioribuch.component");

var i18nModel = newsap.ui.model.resource.ResourceModel({bundleUrl: [oRootPath,mConfig.resourceBundle].join("/")

});this.setModel(i18nModel, "i18n");var sServiceUrl = mConfig.serviceConfig.serviceUrl;var oModel = newsap.ui.model.json.JSONModel([oRootPath,sServiceUrl].join("/"));

this.setModel(oModel,mConfig.serviceConfig.name);}

Listing 10.30 Die init-Funktion der component.js

Nachdem Sie die init-Funktion implementiert haben, können Sie dieAnwendung erneut über die Datei index.html starten. Sie sollten nochimmer die Applikation erfolgreich im Browser ausführen können.

Im nächsten Schritt führen Sie ein Device-Model ein. Mit diesemModel ist es möglich, die endgeräteabhängigen Eigenschaften zu set-zen. Fügen Sie hierfür den Code aus Listing 10.31 direkt nach demSetzen des oModel-Objekts in Listing 10.30 ein.

var deviceModel = new sap.ui.model.json.JSONModel({isTouch : sap.ui.Device.support.touch,isNoTouch : !sap.ui.Device.support.touch,isPhone : sap.ui.Device.system.phone,isNoPhone : !sap.ui.Device.system.phone,listMode : sap.ui.Device.system.phone ?"None" : "SingleSelectMaster",

listItemType : sap.ui.Device.system.phone ?



366

"Active" : "Inactive" });deviceModel.setDefaultBindingMode("OneWay");this.setModel(deviceModel, "device");

Listing 10.31 Das Device-Model

Device-Models inViews nutzen

Nachdem Sie das Device-Model eingeführt haben, müssen Sie so-wohl den MasterView als auch den DetailView anpassen: Öffnen Siedie Datei MasterView.view.js und ersetzen Sie den Eintrag Single-SelectMaster beim Attribut mode mit dem Pfad zum Attribut list-Mode des Device-Models {deviceModel>/listMode}. Das AttributlistMode nimmt auf einem Smartphone den Wert None an. Das be-deutet, dass das ausgewählte Element in der Liste nicht als selektiertmarkiert wird. Damit wird das Problem gelöst, dass auf einem Smart-phone bei einer Zurück-Navigation das entsprechende Element nichtgleich wieder ausgewählt werden kann, nachdem der erste Eintraggewählt wurde und auf die Detailansicht navigiert wurde. Nebendem Attribut mode binden Sie das Attribut type des ObjectListItem-Elements an das Feld listItemType aus dem Model. Über diesen Ein-trag wird zusammen mit dem mode-Attribut die Selektion gesteuert.Beachten Sie, dass bei dem Wert Active das Event nicht durch denEvent-Handler handleListSelect prozessiert wird, sondern durchden Event-Handler handleListItemPress.

<List mode="{deviceModel>/listMode}"select="handleListSelect"items="{countryModel>/countries}">

<ObjectListItem type="{deviceModel>/listItemType}"press="handleListItemPress"

Listing 10.32 Verwendung des Device-Models zur Konfiguration der Masteransicht

Sichtbarkeit derNavigations-schaltfläche

Bis jetzt wurde in der Detailansicht die Schaltfläche zur Zurück-Na-vigation angezeigt, obwohl bei einer Darstellung der Anwendungauf einem Tablet im Querformat oder auf einem Desktop das Zu-rück-Navigieren gar nicht möglich war und auch gar nicht nötig ist.Dieses unschöne Verhalten lässt sich dank des Device-Models an-passen. Öffnen Sie die Datei DetailView und ändern Sie den Wertbeim Attribut showNavButton von true auf {deviceModel>/isPho-ne}. Dadurch wird der Button nur noch auf einem Smartphone an-gezeigt. Listing 10.33 zeigt die Anpassung des Attributs showNav-Button.



367

<Page title="Länderdetails"showNavButton="{deviceModel>/isPhone}"navButtonPress="handleBack">

Listing 10.33 Anpassung der Zurück-Navigation in der Detailansicht

10.2.6 Die Datei localIndex.html

SAP-Fiori-Anwendungen werden als eigenständige Komponente im-plementiert und im Launchpad nach entsprechender Konfigurationauch als solche gestartet. Die Datei index.html, die üblicherweise beireinen SAPUI5-Anwendungen zum Aufrufen der Anwendung ver-wendet wird, spielt dabei keine Rolle. Wenn Sie Ihre SAP-Fiori-An-wendung testen möchten, ist es zwar möglich, die Anwendung überdie Datei index.html aufzurufen – allerdings werden dabei die Beson-derheiten, die durch das Launchpad und der clientseitigen SAP-Fiori-Infrastruktur verwendet werden, nicht berücksichtigt. Aus diesemGrund sollten Sie neben der Datei index.html eine zusätzliche HTML-Seite implementieren, um die Anwendung so zu starten, wie dasim Launchpad der Fall wäre. Diese Seite wird üblicherweise local-Index.html genannt. Die localIndex.html implementiert dabei eineSandbox-Umgebung. Die Sandbox-Umgebung wird als Teil des SAPUI5-Demo-Kits ausgeliefert und steht somit in jeder lokalen Entwick-lungsumgebung sowie in der SAP Web IDE zur Verfügung. Die Sand-box-Umgebung soll sicherstellen, dass die Anwendung in das SAPFiori Launchpad integriert werden kann und die Unified-Shell-Ser-vices verwendet werden können. Dabei müssen Sie selbst keinerleiProgrammanpassungen durchführen.

Beispiel-Anwen-dungen für SAP Fiori Launchpads

Die SAP Fiori Sandbox enthält zusätzlich verschiedene Beispiel-anwendungen, die die Konzepte von SAP Fiori demonstrieren. Siekönnen auf diese Beispielanwendungen zugreifen, indem Sie eineSAPUI5-Anwendung anlegen. Starten Sie dann Ihre Anwendung,z. B. direkt aus Eclipse heraus und erweitern die Adresszeile mitder Pfadangabe /test-resources/sap/ushell/shells/sandbox/fioriSand-box.html. Hat Ihre Anwendung den Projektnamen DemoApplication,rufen Sie folgende URL im Browser auf: http://localhost:PORT/DemoApplication/test-resources/sap/ushell/shells/sandbox/fioriSandbox.html. Sie se-hen dann die in Abbildung 10.10 dargestellte Startseite.



368

Abbildung 10.10 Beispielanwendungen der Unified Shell Sandbox

Die erste Kachel mit dem Namen Default Application enthält eineListe von Links auf die anderen dargestellten Anwendungen. Die an-deren Anwendungen zeigen unterschiedliche Navigationsmöglich-keiten. Dabei wird nicht nur die applikationsinterne Navigation ge-zeigt, sondern auch, wie man applikationsübergreifend von einerSAP-Fiori-Anwendung zu einer anderen Anwendung navigierenkann. Sie finden den Quelltext zu den Beispielen innerhalb IhrerAnwendung in Eclipse. Navigieren Sie hierzu über Java Resouces �Libraries � SAP UI5 Core Libraries � com.sap.ushell.ushell-lib-

testresources_<Version>.jar. Navigieren Sie dort weiter überMETA-INF � test-resources � sap � ushell � demoapps. Die Startseiteder Demos finden Sie unter dem Ordner shells � demo.

Implementierungder localIndex.html

Die Implementierung der Datei localIndex.html ist eigentlich eineErweiterung der bereits gezeigten Implementierung der Dateiindex.html aus Listing 10.18. Konfigurieren Sie zunächst in einer ers-ten Script-Deklaration die Unified Shell im Sandbox-Modus. DieKonfiguration wird dabei in einem globalen Unified-Shell-Objekt mitdem Namen sap-ushell-config durchgeführt. Geben Sie an, wel-cher Renderer verwendet werden soll, um die Anwendung eingebet-



369

tet darzustellen. Ein sehr einfacher Renderer ist fiorisandbox. Er hatkeine eigenen UI-Elemente, unterstützt Sie jedoch bei einer applika-tionsübergreifenden Navigation.

Konfiguration der Navigation in der localIndex.html

Der Navigation Target Resolution Service dient dazu, Navigationsziel-informationen aufzulösen und zu verarbeiten. Diesen Service kön-nen Sie ebenfalls konfigurieren. Dabei können Sie festlegen, wie Na-vigationsziele in der Testumgebung gefunden werden können.

<script type="text/javascript">window["sap-ushell-config"] = {defaultRenderer : "fiorisandbox",services: {NavTargetResolution: {config : {resolveLocal : [ {"linkId" : "",resolveTo : {additionalInformation :"SAPUI5.Component=fioribuch.component",applicationType : "URL",url : "./" +window.location.search

}}]

}}

} // services};

</script>

Listing 10.34 Konfiguration der Unified Shell

Nach dem Implementieren der in Listing 10.34 dargestellten Konfi-guration wird in einer weiteren Script-Anweisung die Sandbox ge-startet. So sieht die Script-Anweisung zum Starten der Sandbox aus.

<script src="test-resources/sap/ushell/bootstrap/sandbox.js"id="sap-ushell-bootstrap">

</script>

10.2.7 Simulation von Backend-Systemen

Bei der Entwicklung stehen die Backend-Systeme, über die Daten indie UI geliefert werden, nicht immer zur Verfügung. Ein Grund kannsein, dass die Entwicklung des Backend-Dienstes noch nicht fertig-



370

gestellt ist. Oder der Entwickler arbeitet offline, benötigt aber Datenfür den lokalen Test. Auch in Testszenarien kann es erforderlich sein,Backend-Dienste zu simulieren. Das ist der Fall, wenn Sie bei auto-matisierten Tests eine konstante Datenbasis benötigen, um sinnvolleAussagen darüber zu treffen, ob Tests positiv oder negativ verlaufen.Natürlich können Sie beim Testen auch ein echtes Backend-Systemverwenden und die Datenbasis nach jedem Testlauf wieder auf ihrenUrsprungszustand bringen. Meist ist es einfacher so zu tun, als ob einechtes Backend-System vorhanden wäre.

Der MockServervon SAPUI5

SAPUI5 bietet für die Simulation eines Backend-Systems im SAPUI5-Framework eine Implementierung, die HTTP-Anfragen an ein Back-end simuliert. Die Implementierung ist unter dem Objektsap.ui.core.util.MockServer zu finden. Der sogenannte Mock-Server schiebt sich bei der Kommunikation mit einem HTTP-Servicezwischen den Konsumenten des Dienstes und den eigentlich Service.Alle Aufrufe werden somit nicht nach außen gegeben, sondern durchden MockServer beantwortet. Daraus, wie ein Aufruf eines OData-Services aussehen kann, ergibt sich, wie ein MockServer-Objekt ini-tialisiert werden muss. Damit bei der Simulation des Backends derMockServer informiert ist, welche URL simuliert werden soll, erhälter beim Aufruf der MockServer-Funktion die URL über den Parame-ter rootUri. Im zweiten Schritt rufen Sie die Funktion simulate aufdem MockServer-Objekt auf. Diese Funktion erhält zwei Parameter:

� Der erste Parameter enthält den Pfad mit Dateinamen zu der Datei,welche die Metadaten des OData-Services beschreibt. Also das,was Sie erhalten, wenn Sie den OData-Service mit der Query-Option $metadata aufrufen.

� Der zweite Parameter der Funktion enthält den Ordner, in demsich die Simulationsdaten für die in den Metadaten beschriebenenEntitäten befinden. Die Dateien müssen den Namen der Entitäthaben und im JSON-Format vorliegen.

Die Nutzung der MockServer-Implementierung wird in Listing 10.35dargestellt.

var responderOn =jQuery.sap.getUriParameters().get("simulate");

var url = [oRootPath,sServiceUrl].join("/");if ("true" === responderOn) {



371

var oMockServer = new sap.ui.core.util.MockServer({rootUri: url

});oMockServer.simulate("model/metadata.xml", "model/");oMockServer.start();

}

Listing 10.35 Initialisierung des MockServers

10.2.8 Dos and Don’ts

In diesem Abschnitt geben wir Ihnen, zusätzlich zu den in den vor-herigen Abschnitten vorgestellten Best Practices, weitere Empfeh-lungen mit auf den Weg.

Verwenden von Komponenten

Implementieren Sie SAP-Fiori-Anwendungen immer als eigenstän-dige Komponente. Sie werden technisch gesehen in einem Objektevom Typ Component Container im SAP Fiori Launchpad gestartet.Eine andere Art der Integration als diese ist nicht möglich.

Lediglich einen OData-Service verwenden

Eine SAP-Fiori-Anwendung basiert lediglich auf einem OData-Ser-vice. Die Anwendung wird über das individuelle Entity Data Modeldes OData-Services beschrieben, und der Service ist genau auf dieDaten zugeschnitten, die durch die Anwendung benötigt werden. Eswerden dabei keine zusätzlichen Daten geliefert, die von dieser kon-kreten Anwendung nicht benötigt werden. Diese Vorgehensweiseerleichtert das Management der Anwendung ungemein. Dies giltz. B. für die Aktivierung des Dienstes auf dem Server. Überdies sindBerechtigungen sehr viel einfacher zu verwalten. Auch das Upgradewird einfacher, da klar definiert ist, wer von wem abhängig ist. Esentstehen keine Probleme bei einer Mehrfach- und Überkreuznut-zung. Diese Restriktion gilt jedoch nur für den selbst entwickeltenTeil einer SAP-Fiori-Anwendung. Technisch gesehen kann eine An-wendung durch die Wiederverwendung von Anwendungsteilen an-dere OData-Services indirekt nutzen. Zudem verwenden SAP-Fiori-Anwendungen bei der internen Navigation im Launchpad des UI2-Service eine Intent-basierte Navigation.



372

IDs nicht selbst erzeugen

Verzichten Sie bei der Implementierung von UI-Controls auf die An-gabe von eigenen IDs für UI-Controls. Die Angabe eigener IDs kannzu Problemen führen, falls im DOM-Baum des Browsers andere UI-Controls von anderen SAPUI5-Anwendungen vorliegen. Wenn SieIDs benötigen, benutzen Sie alternativ die Funktion createId. DieseFunktion kann auch mit einem String-Parameter aufgerufen wer-den. Dieser Übergabeparameter wird dann von SAPUI5 als Teil dergenerierten ID verwendet. Die Funktion createId wird auf demView-Objekt angeboten.

Referenzen auf UI-Controls auslesen

Um an Referenzen auf UI-Controls zu gelangen, bietet SAPUI5 dieFunktion sap.ui.getCore().byId an. Als Parameter erhält dieseFunktion die ID des UI-Controls. Diese Funktion kann unter Um-ständen zu unerwünschten Nebenwirkungen führen. Dies gilt be-sonders dann, wenn Sie die Anwendung im SAP-Fiori-Kontext nut-zen. Stattdessen sollten Sie die byId-Funktion auf dem View aufru-fen. Der Aufruf sieht dann in einem Controller wie folgt aus:this.getView().byId("idOfControl").

Anwendungsspezifische Layout-Anpassungen über CSS

Eine weitverbreitete Praxis bei der Programmierung von SAPUI5-Anwendungen ist es, kunden- bzw. anwendungsspezifisches CSS zunutzen. In eigenen CSS-Dateien werden die CSS-Klassen, die SAPausliefert, überschrieben, um besondere Layout-Effekte zu erzielen.Diese Vorgehensweise birgt jedoch sehr große Gefahren bei derNutzung in SAP-Fiori-Anwendungen. Die Architektur von SAPFiori definiert SAPUI5 als zwischen den SAP-Fiori-Anwendungengeteilte Ressource. Ändert eine Anwendung über ein individuellesÜberschreiben einer CSS-Klasse das Layout, kann das gravierendeAuswirkungen auf andere Anwendungen im SAP Fiori Launchpadhaben. Hinzu kommt, dass bei einem Update der SAPUI5-Versiondie individuellen CSS-Angaben möglicherweise nicht mehr korrektarbeiten. Dies gilt natürlich nicht für selbst definierte CSS-Klassen,die z. B. für selbst entwickelte UI-Controls definiert wurden. VieleParameter im CSS können zudem gar nicht überschrieben werden,da sie im Theme Designer über LESS-Anweisungen erstellt wurden



373

und somit über kundenspezifische CSS-Angaben gar nicht über-schrieben werden können. Änderungen am CSS sollen lediglichüber den Theme Designer erfolgen. Ab der Version 1.28 von SAPUIführt die SAP vordefinierte margin- und padding-Klassen ein, diefür die Abstände zwischen UI-Aspekten verwendet werdenkönnen. In der Dokumentation zu SAPUI5 finden Sie unter derÜberschrift Using Predefined CSS Margin Classes weiterführende In-formationen (https://sapui5.netweaver.ondemand.com/sdk/#docs/gui-de/777168ffe8324873973151dae2356d1c.html).


7

Inhalt

Einleitung .................................................................................. 17

TEIL I SAP Fiori im Überblick

1 Was ist SAP Fiori? ................................................... 25

1.1 SAP Fiori – das Konzept .......................................... 261.1.1 Strategie zur Umsetzung der neuen

Benutzerfreundlichkeit .............................. 271.1.2 Die SAP-Fiori-Grundsätze .......................... 291.1.3 Aus Transaktionen werden Apps ................ 301.1.4 Das SAP Fiori Launchpad ........................... 31

1.2 SAP Fiori – das Design ............................................ 321.2.1 Templates und Applikationstypen .............. 34

1.3 SAP Fiori – die Technologie .................................... 351.3.1 Technische Applikationstypen ................... 361.3.2 Das Frontend – SAPUI5 ............................. 371.3.3 Die Kommunikationsprotokolle ................. 431.3.4 SAP Gateway ............................................. 441.3.5 Das Backend – SAP HANA und

SAP HANA XS ........................................... 451.4 Übersicht über die SAP-Fiori-Apps .......................... 46

1.4.1 Übersicht über SAP-Fiori-Anwendungen .... 491.4.2 Die SAP-Fiori-Anwendung »Kundenauftrag

anlegen« .................................................... 52

2 User-Experience-Strategien entwickeln ................. 59

2.1 Grundlagen ............................................................. 592.1.1 Was ist User Experience? ........................... 602.1.2 Design Thinking ......................................... 632.1.3 UI vs. UX ................................................... 65

2.2 Benutzeroberflächen gestalten ................................ 672.2.1 Mensch-Maschine-Kommunikation ........... 672.2.2 Interaktionsdesign ..................................... 692.2.3 Interaktionskonzepte ................................. 722.2.4 Visual Design ............................................. 72


Inhalt

8

2.2.5 Einfluss der UX-Konzepte auf den Entwicklungsprozess .................................. 75

2.3 Ihre eigene UX-Strategie entwickeln ........................ 762.3.1 Was ist eine UX-Strategie ........................... 772.3.2 Anwendungsfallzentrierte Strategie-

entwicklung ............................................... 802.3.3 Analytische Strategieentwicklung ............... 822.3.4 Taktische Strategieentwicklung .................. 832.3.5 Fazit ........................................................... 83

3 SAP Fiori Design Guidelines .................................... 85

3.1 Grundlagen ............................................................. 863.1.1 Unterstützung verschiedener Gerätetypen ... 863.1.2 Das Grid-Layout ......................................... 883.1.3 Letterboxing .............................................. 893.1.4 Cozy Form Factor und Compact Form

Factor ........................................................ 913.1.5 Schriftart .................................................... 953.1.6 Icons .......................................................... 95

3.2 Floorplans ............................................................... 973.2.1 Seitenlayouts .............................................. 973.2.2 Startseite .................................................... 1053.2.3 Objektansicht ............................................. 1063.2.4 Objekte bearbeiten .................................... 1083.2.5 Listenbasierte Darstellung .......................... 1133.2.6 Arbeitslisten ............................................... 114

3.3 Konzeptionelle Fiori-Applikationstypen ................... 1153.3.1 Approval App ............................................. 1163.3.2 Master-Detail-App ..................................... 1213.3.3 Shopping App ............................................ 1213.3.4 Analysis Path Framework (APF) .................. 1223.3.5 SAP Smart Business Framework .................. 126

4 Das SAP Fiori Launchpad ........................................ 129

4.1 Bestandteile des SAP Fiori Launchpads .................... 1294.1.1 Die SAP Fiori Launchpad Homepage .......... 1294.1.2 Kacheln (Tiles) ............................................ 1304.1.3 Globale Suche ............................................ 133


Inhalt

9

4.1.4 Die Startseite personalisieren ..................... 1354.1.5 Key Performance Indicators modellieren .... 140

4.2 Das Launchpad aus technischer Sicht ...................... 1414.2.1 Anwendungen integrieren ......................... 1424.2.2 Die Rolle des Shell-Containers ................... 142

4.3 SAP-Fiori-Anwendungen bereitstellen .................... 143

TEIL II SAP Fiori implementieren

5 Architektur .............................................................. 147

5.1 Architekturüberblick und technische Fiori-Applikationstypen .......................................... 1475.1.1 Das SAP Fiori Launchpad ........................... 1495.1.2 App-Typen ................................................ 151

5.2 SAP HANA XS ......................................................... 1525.2.1 Virtuelle Datenmodelle ............................. 1535.2.2 OData-Services .......................................... 153

5.3 SAP NetWeaver AS ABAP und die SAP Business Suite ....................................................................... 1555.3.1 OData-Service-Implementierungen und

Geschäftslogik ........................................... 1555.3.2 Eingebettete Suche und Infoblätter ........... 157

5.4 ABAP-Frontend-Server ............................................ 1585.4.1 Zentrales UI-Add-on und SAPUI5 .............. 1585.4.2 SAP Gateway und das OData-Protokoll ..... 1615.4.3 Installationsoptionen für den ABAP-

Frontend-Server ........................................ 1665.5 SAP Web Dispatcher ............................................... 1675.6 Endgeräte ............................................................... 167

5.6.1 HTML5-Browser auf Desktop, Tablet und Smartphone ............................................... 168

5.6.2 Hybride Apps auf mobilen Endgeräten ....... 168

6 Installation .............................................................. 171

6.1 Installation planen .................................................. 1726.1.1 SAP Fiori Apps Reference Library ............... 1736.1.2 Rapid Deployment Solutions ..................... 174


Inhalt

10

6.1.3 SAP-Online-Hilfe ........................................ 1756.1.4 SAP-Hinweise ............................................ 180

6.2 Installationsvoraussetzungen überprüfen ................. 1816.2.1 Voraussetzungen für die Installation

auf SAP HANA ........................................... 1836.2.2 Voraussetzungen für den ABAP-Backend-

Server ........................................................ 1846.2.3 Voraussetzungen für den ABAP-Frontend-

Server ........................................................ 1866.3 Softwarekomponentenversionen herunterladen ....... 188

6.3.1 Software-Download-Center ........................ 1886.3.2 SAP Solution Manager ............................... 188

6.4 Installationswerkzeuge ............................................ 1906.4.1 SAP HANA Application Lifecycle

Manager .................................................... 1906.4.2 Add-on Installation Tool ............................ 1906.4.3 Software Update Manager .......................... 191

6.5 Plattformkomponenten installieren .......................... 1916.5.1 Smart Business Foundation Component

auf SAP HANA installieren ......................... 1946.5.2 SAP-Gateway-Komponenten auf den

ABAP-Backend-Servern installieren ............ 1956.5.3 SAP-Gateway-Komponenten auf dem

ABAP-Frontend-Server installieren ............. 1956.5.4 UI-Add-on auf dem ABAP-Frontend-

Server installieren ....................................... 1966.5.5 SAP Web Dispatcher installieren ................ 197

6.6 Produktspezifische Komponenten installieren .......... 1996.6.1 Virtuelle Datenmodelle und OData-

Services auf SAP HANA XS installieren ....... 1996.6.2 Produktspezifische Komponenten auf

den ABAP-Backend-Servern installieren ..... 2006.6.3 Produktspezifische OData-Services und

UI-Komponenten auf dem ABAP-Frontend-Server installieren ....................................... 202

7 Konfiguration .......................................................... 205

7.1 Kommunikationskanäle und Single Sign-On konfigurieren ........................................................... 2057.1.1 HTTPS einrichten ....................................... 206


Inhalt

11

7.1.2 Routing im SAP Web Dispatcher einrichten .................................................. 210

7.1.3 RFC-Vertrauensbeziehung vom ABAP-Backend- zum ABAP-Frontend-Server einrichten .................................................. 213

7.1.4 Initiale Authentifizierung durch den ABAP-Frontend-Server .............................. 215

7.1.5 Authentifizierung am ABAP-Backend-Server für Suchanfragen ............................. 216

7.1.6 Authentifizierung an SAP HANA XS ........... 2177.1.7 Benutzerabgleich zwischen den Servern ..... 218

7.2 ABAP-Frontend-Server konfigurieren ...................... 2197.2.1 Spracheinstellungen festlegen .................... 2197.2.2 SAP-Systemaliasse einrichten ..................... 2207.2.3 SAP Gateway aktivieren ............................. 2217.2.4 OData-Services für die zentralen

UI-Komponenten registrieren .................... 2227.2.5 SICF-Services für die zentralen

UI-Komponenten freischalten .................... 2237.2.6 Rollen für SAP Fiori Launchpad kopieren,

pflegen und zuordnen ............................... 2247.3 SAP Fiori Launchpad und transaktionale Apps ........ 225

7.3.1 Konzept der Launchpad-Konfiguration ...... 2267.3.2 LPD_CUST-Launchpads und

-Anwendungen anlegen ............................. 2277.3.3 Semantische Objekte anlegen .................... 2307.3.4 Kataloge anlegen ....................................... 2327.3.5 Zielzuordnungen konfigurieren .................. 2357.3.6 Statische und dynamische App-Launcher-

Kacheln konfigurieren ................................ 2367.3.7 Nachrichtenkachel konfigurieren ............... 2387.3.8 Gruppen anlegen ....................................... 2397.3.9 Kataloge und Gruppen zu Rollen

zuordnen ................................................... 2407.4 SAP-Fiori-Suche und Infoblätter konfigurieren ........ 242

7.4.1 SAP-Hinweise implementieren .................. 2437.4.2 Business Functions aktivieren .................... 2437.4.3 Sekundäre Datenbankverbindung

einrichten .................................................. 244


Inhalt

12

7.4.4 Konnektorbasierte Berechtigungs-prüfungen aktivieren .................................. 245

7.4.5 ICF-Services auf dem Backend aktivieren .... 2457.4.6 Konnektoren anlegen und Indizierung

starten ....................................................... 2467.4.7 Enterprise-Suche für mehrere Backend-

Server konfigurieren ................................... 2487.4.8 Rollen und Benutzerzuordnung auf dem

Backend-Server anpassen ........................... 2487.4.9 Rollen und Benutzerzuordnung auf dem

Frontend-Server anpassen .......................... 2497.4.10 SICF- und OData-Services auf dem

Frontend-Server aktivieren ......................... 2507.5 KPI Modeler und analytische Apps .......................... 251

7.5.1 KPI Framework freischalten ........................ 2517.5.2 Privilegien auf SAP HANA gewähren .......... 2527.5.3 Konfiguration hybrider Apps ...................... 2537.5.4 KPIs anlegen .............................................. 2547.5.5 KPI-Kacheln verwenden ............................. 261

8 Anpassungen mit dem UI Theme Designer ............. 263

8.1 Konzept des UI Theme Designers ............................ 2648.1.1 CSS und LESS ............................................. 2658.1.2 Parameter .................................................. 265

8.2 Mit dem UI Theme Designer arbeiten ...................... 2668.2.1 Schnelles Theming ..................................... 2708.2.2 Experten-Theming ...................................... 2728.2.3 Paletten-Editor ........................................... 2758.2.4 Eigenen LESS- und CSS-Code einfügen ....... 275

8.3 Themen verwalten ................................................... 2768.4 Themen verwenden ................................................. 279

9 Administration von SAP-Fiori-Anwendungen ........ 283

9.1 Aufgaben eines SAP-Fiori-Administrators ................ 2839.1.1 Periodische Aufgaben ................................. 2839.1.2 Benutzermanagement ................................ 2849.1.3 Transportmanagement ............................... 285

9.2 Monitoring .............................................................. 2869.2.1 Überwachen von SAP Gateway .................. 286


Inhalt

13

9.2.2 Überwachen des UI-Add-ons für SAP NetWeaver ......................................... 301

9.3 Troubleshooting ..................................................... 3029.3.1 SAP Fiori Launchpad und Launchpad

Designer .................................................... 3029.3.2 SAP-Fiori-Apps .......................................... 3069.3.3 SAP Gateway ............................................. 309

TEIL III SAP-Fiori-Anwendungen entwickeln

10 Grundlagen der SAP-Fiori-Entwicklung .................. 321

10.1 SAPUI5 ................................................................... 32110.1.1 Die Entwicklungsumgebung ...................... 32110.1.2 Aufbau einer mobilen Anwendung ............ 32310.1.3 Implementierung einer mobilen SAPUI5-

Anwendung ............................................... 32510.2 Best Practices bei der Entwicklung .......................... 344

10.2.1 Asynchronous Module Definitions ............. 34410.2.2 Das Komponentenmodell von SAPUI5 ....... 34510.2.3 Der App Descriptor ................................... 35110.2.4 Routing ..................................................... 35510.2.5 Arbeiten mit Modellen .............................. 36310.2.6 Die Datei localIndex.html .......................... 36710.2.7 Simulation von Backend-Systemen ............ 36910.2.8 Dos and Don’ts ......................................... 371

11 Entwicklung von Backend-Diensten ....................... 375

11.1 SAP Gateway und OData-Services ........................... 37511.1.1 Beschreibung des Datenmodells ................ 37611.1.2 Generierung der Laufzeitartefakte .............. 38311.1.3 Implementierung der Data-Provider-

Klasse ........................................................ 38711.2 SAP HANA und SAP HANA XS ................................ 401

11.2.1 Entwicklung von OData-Services auf SAP HANA XS ........................................... 410

11.2.2 Entwicklung von XS-Services ..................... 415


Inhalt

14

12 Entwicklung einer SAP-Fiori-Anwendung mit Eclipse ............................................................... 421

12.1 Erste Schritte ........................................................... 42112.1.1 SAPUI5-Plug-in .......................................... 42112.1.2 SAP Fiori Toolkit ........................................ 423

12.2 Implementierung des SAP-HANA-XS-Backends ....... 42412.2.1 Information-View-Typen von SAP HANA ... 42512.2.2 Design eines analytischen Views ................ 42512.2.3 Implementierung des Backend-Services ...... 433

12.3 Implementierung einer analytischen SAP-Fiori-Anwendung ............................................................. 43512.3.1 Diagramme und die SAP Fiori Guidelines ... 43512.3.2 Die Implementierung ................................. 43712.3.3 Eingrenzen der angezeigten Daten über

Filter .......................................................... 46412.3.4 Datensimulation mit dem MockServer ....... 473

13 Entwicklung einer SAP-Fiori-Anwendung mit SAP Web IDE .................................................... 475

13.1 Einführung in die SAP Web IDE ............................... 47613.1.1 Die Architektur der SAP Web IDE .............. 48013.1.2 SAP HANA Cloud Connector ...................... 48113.1.3 Lokale Installation ...................................... 485

13.2 Mit der SAP Web IDE arbeiten ................................ 48613.2.1 Die Versionsverwaltung .............................. 48613.2.2 Konfiguration der Backend-Konnektivität ... 48913.2.3 Weiterführende Konfigurations-

einstellungen ............................................. 49113.2.4 Mit Projekten arbeiten ............................... 492

13.3 Eine Anwendung mit der SAP Web IDE entwickeln .............................................................. 49513.3.1 Projekt anlegen .......................................... 49613.3.2 Oberfläche entwickeln ............................... 50113.3.3 Anwendung ausliefern ................................ 50613.3.4 Mock-up-Möglichkeiten für die Simulation

von Backend-Systemen nutzen ................... 509


Inhalt

15

14 Erweiterung von SAP-Fiori-Anwendungen ............. 515

14.1 Einführung und Überblick ....................................... 51614.1.1 Erweiterungen im Backend ........................ 51614.1.2 Erweiterung von OData-Services ............... 51914.1.3 Erweiterungen von Infoblättern ................. 52014.1.4 Erweiterung des User Interface .................. 52014.1.5 Dokumentation der Erweiterungs-

möglichkeiten ............................................ 52114.2 Erweiterungen im Backend ..................................... 522

14.2.1 Erweiterung im ABAP Dictionary ............... 52214.2.2 Erweiterungen von analytischen Views ...... 52314.2.3 Erweiterungen der Geschäftslogik .............. 524

14.3 Erweiterung von OData-Services ............................. 52914.3.1 Backend-Server ......................................... 52914.3.2 SAP HANA XS ........................................... 534

14.4 Erweiterung von Infoblättern .................................. 53514.4.1 Erweiterung des Suchmodells .................... 53614.4.2 Anpassung der Annotationsdatei ............... 54214.4.3 Konfiguration des SAP Fiori Launchpads .... 545

14.5 Erweiterung des User Interfaces .............................. 54614.5.1 Einrichten der Entwicklungsumgebung ...... 54914.5.2 Vorbereitung des Erweiterungsprojekts ..... 55414.5.3 Erweiterung von Views .............................. 55614.5.4 Erweiterung von Texten ............................. 55814.5.5 Konfiguration von Service-URLs ................. 55914.5.6 Erweiterung von Controllern ...................... 56014.5.7 Modifikation von Views ............................. 56414.5.8 Ersetzen von Views .................................... 56514.5.9 Konfiguration der Navigations-Routings .... 56814.5.10 Hochladen und Konfigurieren der

Erweiterung ............................................... 56814.6 Erweiterung der Approval App mit BAdIs ................ 570

14.6.1 Kurze Einführung zu SAP Business Workflow .................................................. 571

14.6.2 Implementierung der Approval App .......... 57814.6.3 Implementierung der BAdIs für das

Resultat ..................................................... 584


Inhalt

16

14.6.4 Implementierung der BAdIs für Zusatzanzeigen ........................................... 590

14.7 Ausblick .................................................................. 593

A Quellenhinweise ................................................................ 595

B Die Autoren ....................................................................... 599

Index ......................................................................................... 601


601

Index

$filter 164$format 164$inlinecount 164$orderby 164$select 164$skip 164$top 164

A

ABAP Debugger 318ABAP Dictionary erweitern 522ABAP Runtime Error 318ABAP-Backend

RFC 213Routing 211

ABAP-FrontendAuthentifizierung 215Konfiguration 219OData-Service 250RFC 214Rolle 249SICF-Service 250

ABAP-Frontend-Server 158Installation 166Kommunikation 207Routing 210

Absichtsanalyse 305ADAPT 78Administration 283

Benutzermanagement 284mit SAP Gateway 283wiederkehrende Aufgaben

einplanen 283ADOPT 78Analysepfadanzeige 124Analysis Path Framework � APFAnalytic View

Attributtyp 429Ausgabefeld 428Design 425testen 430

Anhang 118Anmeldesprache 219Anwendungsprotokoll 298, 300, 318

Apache Cordova 169Apache Tomcat installieren 549APF 122App

administrieren 283analytische 152, 229analytische App erweitern 523analytische App implementieren 424Approval App 116Approval App erweitern 570Approval App implementieren 578bereitstellen 143Deployment 506erweitern 515hybride 168, 253implementieren 226Infoblätter 151transaktionale 151transaktionale App erweitern 524Troubleshooting 306

Append-Struktur 522Application Descriptor 352, 412Arbeitsliste 114Architektur 147Assoziation 163Asynchronous Module Definition

344, 351Atom-Syndication 162attachContentChange 459Ausnahmebehandlung 287

B

Backend 150Dienst entwickeln 375erweitern 516, 522

Backend-Server 144Backend-Service implementieren 433Backend-Simulation 370BAdI 518, 570

bearbeiten 586Builder 585für Zusatzanzeigen 590implementieren 584implementierende Klasse 587


602

Index

Balkendiagramm 457Basis-Thema 267Bearbeitungsfluss

global 112lokal 112

Benutzer replizieren 218Benutzermanagement 284Benutzeroberfläche 60, 68Benutzeroberfläche, Interaktions-

design 69Berechtigungsprüfung 245Best Practices 344Bewertung 256bindData 472Browser 168, 306BSP-Anwendung 568Business Function aktivieren 243Business Workplace 571

C

Cache Management 317Central Hub Deployment 166Chart Container 127Chart-Container-Control 435Cockpit 127Code Check 492Code Completion 492Code Editor 492Compact Form 91Complex Type 163Component Controller 348component.js 441Computer Center Management

System 290Conceptual Schema Definition

Language 162Controller 560Cozy Form 91createColumnChart 458CSDL � Conceptual Schema

Definition LanguageCSS 265

D

Data Preview Editor 430Databinding 337Data-Provider-Basisklasse 388

Data-Provider-Klasse 155erweitern 525implementieren 387

Datenbankmodell 424Datenbankschema 406Datenbankverbindung,

sekundäre 244Datenbankzugriff 417Datenbindung 159Datenmodell

Beschreibung 376in SAPUI5 159OData 162virtuelles 152, 153

Datensimulation 473demilitarisierte Zone 166Design Guideline 85Design Thinking 63, 64Designvorgaben 85Detailansicht 104DEVELOP 79Device-API 88Device-Model 365Diagramm 435, 436Dialog 93Dimension 449dimensionSelector 454Drilldown 229Dynpro 78

E

Eclipse 322, 421analytische App implementieren 424SAPUI5-Plug-in 421

EDM � Entity Data ModelEEMon � End-User Experience

Monitoringem 88Embedded Deployment 166Enable 78Endgerät, Anforderungen 167End-user Experience Monitoring 288Entität 162, 376

anlegen 377Assoziation 381aus dem ABAP Dictionary

importieren 377Datentyp 163


603

Index

Entität (Forts.)Eigenschaft 162, 377, 380Menge 378Relation 162

Entity Container 162Entity Data Model 162Entity Key 163Entity Set 162, 163Entity Type 163Entscheidungsoption 581Entwicklungsumgebung 321Ereignis 159Ereignisbehandler 159Error Log 292Erweiterung 515

Controller 560explizite 517hochladen 568implizite 518, 525mit BAdI 570mit Eclipse 549mit SAPUI5 520

Erweiterungskomponente 547Erweiterungsprojekt 79, 548ExtensionPoint 79

F

Feed-Kachel 132Fehlerprotokoll 292, 298Filter 464Filterkriterien 465Floorplan 97Floorplan Manager 79Footer 99, 103Formatter 337Frontend 150Frontend-Server 143Full-Screen-Layout 98Funktion

extListItemInfo 500onRouteMatched 499

G

Gedächtnisspanne 69Genehmigerfolge 118Geschäftslogik erweitern 517, 524

Gestaltungspsychologie 73Figuren-Grund-Trennung 73Gesetz der Ähnlichkeit 74Gesetz der Geschlossenheit 74Gesetz der guten Form /

Einfachheit 74Gesetz der Kontinuität 74Gesetz der Nähe 74Gesetz der Prägnanz 74Gesetz der Symmetrie 73Gesetz der Verbundenheit 74Gesetz des gemeinsamen Schicksals 74

Gestensteuerung 92, 436Git Settings 492Google Chrome, Werkzeuge 306Grid-Layout 88Gruppe 137

anlegen 239Rolle zuweisen 240

H

handleListClose 470handleSelection 455Hauptliste 101HCP � SAP HANA Cloud PlatformHeaderContent 104Hook-Methode 562HTTP 161HTTPS

einrichten 206Sicherheitseinstellungen 208

I

ICF-Service 156, 223ICM Monitor 318Icon 95Icon Explorer 96IconTabBar 106Importparameter 389InA 152Infoblatt

Aufbau 157Erweiterung 520, 535

Information View 425Analytic View 425Attribute View 425Calculation View 425


604

Index

Instanziierung von Komponenten 350

Interaktionsdesign 69, 70Interaktionskonzept 72Interaktionsmuster 67Interaktionsstil 71, 75Interface-Design, goldene Regeln 70Internationalisierung 445

J

Java Servlet 552JavaScript 165JavaScript Object Notation 159, 162,

164, 165, 512jQuery.sap.declare 344jQuery.sap.require 344jQuery.sap.syncStyleClass 94JSON � JavaScript Object Notation

K

Kachel 130bearbeiten 136Bild festlegen 239dynamische Kachel konfigurieren 236für Diagramme 131Katalog 132KPI 131, 260Nachrichtenkachel konfigurieren 238Rolle zuweisen 240statische Kachel konfigurieren 236

Kataloganlegen 232Transportauftrag zuordnen 233

Kerberos 215Kopfzeile 104KPI 122, 131

anlegen 254Framework 251Kachel 131modellieren 140, 252

KPI Modeler 140

L

Landscape Management Database 287

Laufzeitartefaktgenerieren 383Typ 383

Launchpad Shell Bar 130LESS 265Letterboxing 89Linien-Diagramm 447Link 163localIndex.html 367LPD_CUST-Anwendung 545

M

Map 449Master-Detail-App 121, 325Measure 449Mehrsprachigkeit 442Mensch-Maschine-Kommuni-

kation 67Metadata Cache Refresh 317Methode

BUSINESSPARTNER_CREATE_ENTITY 396

BUSINESSPARTNERS_DELETE_ENTITY 400

BUSINESSPARTNERS_GET_ENTITY 394

BUSINESSPARTNERS_GET_ENTITYSET 388

BUSINESSPARTNERS_UPDATE_ENTITY 398

GET_ENTITY 394GET_ENTITYSET 388

Mobile first 87MockServer 370, 513Model View Controller 159Model-Provider-Basisklasse 384Model-Provider-Klasse 155Monitoring 286, 301Muster, Bearbeiten von Objekten 108


605

Index

N

Namensraum 88Navigation

Cross-App-Navigation 362Eigenschaften 163Routing 362Routing konfigurieren 568Service 361Target 362

New 78Notiz 118Nutzbarkeit 60Nutzererlebnis 63, 78Nutzung 61

O

Objekt anlegen 111Objektansicht 106

einfache 107Pattern 325

OData 159, 161, 410Datenmodell 162Query 163Response 433Service 153Service aktivieren 222Service anlegen 433Service auf Backend erweitern 529Service auf SAP HANA XS 410Service auf SAP HANA XS

erweitern 534Service CB_SALES_QUOTATION_

SRV 250Service entwickeln 375Service erweitern 519, 529Service implementieren 155, 411Service testen 309Services Runtime 410

Open Data Protocol � OData

P

Paket anlegen 405Panel-Objekt 108Payload Trace 317Performance Trace 314, 315

PFCG-Rolle 150Plug-ins 322, 492Primärschlüssel 163Prototyp 72

R

Redefinition 529rem 89Remote Function Call 213Renew 78Report /UI5/UI5_REPOSITORY_

LOAD 568Repository Workspace 404Responsive Web Design 85, 86RFC � Remote Function CallRight-to-Left-Version 269Rolle 224, 248

Administrator 224Benutzer 225

Routing 210, 358

S

SAML 2.0 216SAP Build 75SAP Business Workflow 571SAP Cloud Connector 489SAP EPM 494SAP ERP Foundation Extension

powered by SAP 48SAP Fiori

Design Guide 85, 476Toolkit 423

SAP Fiori Approve Requests App 570SAP Fiori Client 168SAP Fiori Launchpad 129, 325

Bestandteile 129Checks 302Intent Analysis 302Kachel 130Kachelkatalog 132Konfiguration 226, 545Konfigurationsparameter 280Personalisierung 135Prüfung 303Report 303Sandbox konfigurieren 551SAPUI5 integrieren 142


606

Index

SAP Fiori Launchpad (Forts.)Schnittstelle 142Server 141Shell Bar 130Startseite 129Technik 141Web Dynpro ABAP integrieren 142

SAP Fiori Navigation 361SAP Fiori Sandbox 367SAP Fiori Toolkit 423SAP Gateway 161, 322, 375

aktivieren 221Central Hub Deployment 166Client 309Core-Komponente 166Embedded Deployment 166Error Log 292Monitoring 286Service Builder 156, 376Troubleshooting 309

SAP HANA 80, 242, 401, 413Architektur 401Information View 425Rechte 252Table Import Definition 408Workbench 413

SAP HANA Calculation View 523SAP HANA Cloud Cockpit 477SAP HANA Cloud Connector 323, 481SAP HANA Cloud Platform 323, 476

HTML5-Anwendung 487lokale Installation 485System registrieren 483Versionsverwaltung 486

SAP HANA Development Perspective 425

SAP HANA Extended Application Services � SAP HANA XS

SAP HANA Studio 403SAP HANA Web-based Development

Workbench 409SAP HANA XS 80, 152, 401, 534

App implementieren 424Authentifizierung 217Client-Anfrage 416Code to Data 402Data to Code 402Entwicklung 403JavaScript API 415OData-Service 410

SAP HANA XS (Forts.)Projekt 413PRojektassistent 403Service entwickeln 415Service mit Datenbankzugriff 417

SAP HCP � SAP HANA Cloud PlatformSAP Jam 132SAP Mobile 322SAP NetWeaver AS ABAP 318SAP NetWeaver Gateway Productivity

Accelerator 423SAP River Rapid Development

Environment 475SAP River RDE � SAP River Rapid

Development EnvironmentSAP Screen Personas 70, 75, 78SAP Smart Business Framework 126SAP Solution Manager 286SAP Web Dispatcher 167, 206

Routing 210SAP Web IDE 321, 322, 476, 485

App implementieren 495Architektur 480Backend konfigurieren 489Beispielanwendung 494Datensimulation 509Deployment 506Detailbild-Konfiguration 497Einführung 475GUI-Design 501Konfiguration 491Layout-Editor 502Mock-up 509Projekt anlegen 493, 496Template 493

sap.hba.apps.kpi.s.roles::SAP_SMART_BUSINESS_MODELER 252

sap.hba.apps.kpi.s.roles::SAP_SMART_BUSINESS_RUNTIME 252

sap.m.Button 97sap.m.Dialog 94sap.m.FacetFilter 464, 469sap.m.FacetFilterList 468sap.m.FeedInput 118sap.m.FeedListItem 118sap.m.IconTabBar 106, 117, 343sap.m.Input 105sap.m.List 333sap.m.ListItemBase 333sap.m.ObjectHeader 106, 342


607

Index

sap.m.ObjectListItem 116, 334, 335sap.m.Page 323, 324sap.m.PullToRefresh 102sap.m.Shell 90sap.m.SplitApp 323, 330, 339sap.m.SplitContainer 324sap.m.Table 121sap.m.UploadCollection 118sap.ui.comp.filterbar.FilterBar 113sap.ui.comp.smartfilterbar.Smart-

FilterBar 113sap.ui.comp.variants.Variant-

Management 113sap.ui.core.Icon 95sap.ui.core.ManagedObject 348, 363sap.ui.core.util.MockServer 473sap.ui.define 344sap.ui.Device.support.touch 92sap.ui.model.json.JSONModel 332sap.ui.require 344sap.viz 435SAP-Anmeldeticket 215SAP-Jam-Kachel 132SAPUI5 158, 322, 325

Bootstrapping 339Chart Container 446Component-preload.js 347CSS 372Datenmodell 159Dependency Injection 344Diagnostics 307Dimensionsselektor 454EventBus 339Extended Binding Syntax 337, 338ExtensionPoint 500facefull-Komponte 346faceless-Komponente 345Formatter 335in Eclipse 550Mobile 88MockServer 370Model 332named-Model 365Navigation-API 355Plug-in für Eclipse 421ResourceModel 365Routing 355, 443Theming 264und SAP Web IDE 480

sapUiSizeCompact 92

Scalar Type 163Schnittstelle 144Schriftart 95SEGW 156Seitenlayout 97semantisches Objekt 230Server-Benutzer 218Servicedokument 163, 222Service-Metadaten-Dokument 163Service-URL 559Shell-Container 142Shopping App 121SICF

Recorder 318Service 245

Single Point of Entry 129Single Sign-On 206Softwareentwicklungsprozess 75Split-Screen-Layout 100SPNego 215Spracheinstellungen 219SSL konfigurieren 209SSO � Single Sign-OnStandard-Kachel 131Startseite 105Suche 102, 133

Authentifizierung 216einrichten 242Enterprise-Suche 248Konnektor 246, 540

Suchkomponente 246Suchmodell

anlegen 246erweitern 520, 536

System Trace 318Systemalias 220Systemlandschaft 147

T

tabellarische Darstellung 462Tabelle erweitern 516Tabellenerzeugung implemen-

tieren 407technischer Service 155technisches Model 155Teilweises Bearbeiten von

Objekten 111Template 422


608

Index

ThemaBild hinzufügen 272löschen 279publizieren 270Upload 279verwalten 277verwenden 279

Theme Repository 276Theme Repository Browser 277Theme sichern 269Theming Editor

Experte 272Palette 275Schnell 270

Tile � KachelTracing 289Transaktion

/UI2/FLC 303/UI5/THEME_TOOL 277LPD_CUST 150, 227, 545, 570SBWP 571SE11 523SEGW 156, 519SICF_SESSIONS 208

Transportmanagement 285Troubleshooting 302, 318

U

Übersetzung 445Überwachungs-Kachel 132UI Add-on 158, 301UI Theme Designer 78, 263UI-Framework 321URI 162Usability 60, 61User Experience 59

Definition 60Strategie 77

User Interface 65, 520, 546User-Centered-Design 60UX-Strategie, analytischer Ansatz 82

V

Variante 113, 256View

definieren 260ersetzen 565erweitern 556modifizieren 564Private 153Query 153Reuse 153

Visual Design 72, 75

W

W3C 351Wahrnehmung, visuelle 68Web Dynpro ABAP 79Wertehilfe 105Wir-Intelligenz 63Workflow

Aufgabe 576Bearbeiter 578Definition 574Konfiguration 578Muster 573Szenario 579

Workitem 571

X

X.509-Zertifikat 216XML 159XML-Annotationsdatei 157

Z

Zielzuordnung 235


Wir hoffen sehr, dass Ihnen diese Leseprobe gefallen hat. Sie dürfen sie gerne empfehlen und weitergeben, allerdings nur vollständig mit allen Seiten. Bitte beachten Sie, dass der Funktionsumfang dieser Leseprobe sowie ihre Darstel- lung von der E-Book-Fassung des vorgestellten Buches abweichen können. Diese Leseprobe ist in all ihren Teilen urheberrechtlich geschützt. Alle Nut-zungs- und Verwertungsrechte liegen beim Autor und beim Verlag.

Teilen Sie Ihre Leseerfahrung mit uns!

Dipl.-Inf. (FH) Michael Englbrecht ist seit 2010 Senior Consultant bei der 10 point software GmbH in Neu-Ulm. Dort ist er für den Bereich Enterprise Java und SAP NetWeaver J2EE/JEE verantwortlich.

Michael Englbrecht, Michael Wegelin

SAP Fiori – Implementierung und Entwicklung608 Seiten, gebunden, Dezember 2015 69,90 Euro, ISBN 978-3-8362-3828-1

www.sap-press.de/3894

Dr. Michael Wegelin ist seit 2010 geschäftsführender Ge-sellschafter der 10 point software GmbH in Neu-Ulm. Dort ist er für den Bereich ABAP und SAP NetWeaver Process Integration verantwortlich.

Wissen aus erster Hand.

https://www.rheinwerk-verlag.de/sap-fiori_3894/?GPP=lpn

https://www.facebook.com/rheinwerkverlag

https://plus.google.com/118435207805510651040

http://twitter.com/rheinwerkverlag

SAP Fiori – Implementierung und Entwicklung · PDF file10 Grundlagen der...

Documents

Transcript of SAP Fiori – Implementierung und Entwicklung · PDF file10 Grundlagen der...