Einführung in SAPUI5

LeseprobeIn dieser Leseprobe lernen Sie, die SAPUI5-Bibliothek auf einem ABAP-Backend-System zu installieren und die Entwicklungsumge-bung in Eclipse einzurichten. Außerdem machen wir Sie mit der cloudbasierten Entwicklungsumgebung SAP Web IDE vertraut.

Miroslav Antolovic

Einführung in SAPUI5484 Seiten, gebunden, 2. Auflage 2015 69,90 Euro, ISBN 978-3-8362-3908-0

www.sap-press.de/3986

Kapitel 4: »Entwicklungsumgebung einrichten«

Inhaltsverzeichnis

Index

Der Autor

Leseprobe weiterempfehlen

Wissen aus erster Hand.

mailto:?body=Leseproben-Empfehlung: �Einf�hrung in SAPUI5� von SAP PRESS, http://gxmedia.galileo-press.de/leseproben/3986/leseprobe_sappress_einfuehrung_in_sapui5.pdf&subject=Leseprobe: �Einf�hrung in SAPUI5�

https://www.rheinwerk-verlag.de/einfuhrung-in-sapui5_3986/?GPP=lpn

111

Kapitel 4

In diesem Kapitel installieren Sie die SAPUI5-Bibliothek und richten die Entwicklungsumgebung ein.

4 Entwicklungsumgebung einrichten

SAPUI5-Anwendungen können Sie entweder in einer Eclipse-basier-ten Umgebung oder in der neuen SAP Web IDE entwickeln. Zusätz-lich müssen Sie die SAPUI5-Bibliothek auf dem Backend installieren.Wie Sie dabei vorgehen und wie Sie die Entwicklungsumgebungenauf dem Frontend einrichten, zeige ich Ihnen in diesem Kapitel.

Checkliste

Was Sie für dieses Kapitel brauchen:

� S-User für den SAP Service Marketplace

� Zugang zu einem SAP-ERP- und zu einem SAP-Solution-Manager-System

� Für die SAP Web IDE benötigen Sie einen installierten SAP HANACloud Connector und einen Zugang zur SAP Web IDE.

Lokaler WebserverSollten Sie über kein SAP-Backend-System verfügen, können Sie IhreAnwendungen auch auf einem lokalen Webserver, z. B. einen Apa-che-HTTPD-Server (als Download von der Homepage apache.org ver-fügbar), deployen. Sollten Sie keinen Zugang zum SAP Service Mar-ketplace haben, können Sie die benötigten SAPUI5-Dateien unterhttps://tools.hana.ondemand.com herunterladen.

Für die ersten Gehversuche ist es auch ausreichend, wenn Sie ledig-lich Eclipse und die SAPUI5-Frontend-Tools installieren. In diesemSzenario können Sie die Vorschaufunktion in Eclipse nutzen undsich das Ergebnis dort anzeigen lassen. In diesem Fall können Sie Ab-schnitt 4.1, »SAPUI5-Bibliothek in der SAP Business Suite installie-ren«, überspringen und direkt mit Abschnitt 4.2.1, »Entwicklungs-umgebung in Eclipse einrichten«, bzw. Abschnitt 4.2.2, »SAP Web

3908.book Seite 111 Dienstag, 1. Dezember 2015 9:48 09

Entwicklungsumgebung einrichten4

112

IDE einrichten«, fortfahren – je nachdem, welche der beiden Ent-wicklungsumgebungen Sie verwenden möchten.

4.1 SAPUI5-Bibliothek in der SAP Business Suite installieren

Systemarchitektur Die Entwicklung von Anwendungen in SAPUI5 ist grundsätzlich mitzwei alternativen Systemarchitekturen möglich:

� Embedded DeploymentVon Embedded Deployment spricht man, wenn die SAPUI5-Res-sourcen auf jedem SAP-System Ihrer Landschaft installiert werdenund auch direkt in diesen Systemen ausgeführt werden. Das heißt,Sie müssen die im Folgenden beschriebenen Schritte für jedes Sys-tem, z. B. für SAP ERP HCM, SAP CRM, SAP ERP, durchführen.

� Central HubBei der Central-Hub-Architektur installieren Sie eine neue System-linie, auf der die Komponente SAP Gateway und alle SAPUI5-Res-sourcen liegen. Jede SAPUI5-Anwendung wird auf diesem soge-nannten Central Hub deployt und ausgeführt. Der Central Hub isttechnisch nichts anderes als ein SAP NetWeaver AS ABAP. DieDatenübermittlung in das jeweilige Backendsystem (SAP ERPHCM, SAP CRM usw.) erfolgt über SAP Gateway über eine Trusted-/Trusting-Beziehung via Remote Function Call (RFC). Abbildung 4.1veranschaulicht diese Architektur.

Abbildung 4.1 Central-Hub-Systemarchitektur

Das Embedded-Deployment-Szenario hat drei gravierende Nachteile:

ReverseProxy

ABAP-Central-Hub

(SAP Gateway +

SAPUI5)

SAP ERP

SAP CRM

SAP SRM

SAP SCM

ABAP-Backend-Server (SAP Business Suite)

SAP HANA/ beliebige

Datenbank

SAP HANAXS Engine


SAPUI5-Bibliothek in der SAP Business Suite installieren 4.1

113

� Es besteht ein hoher Wartungsaufwand.

� Der Benutzer muss zum Teil viele URLs zum Aufruf der Anwendun-gen kennen, da der zentrale Einstiegspunkt des Central Hubs fehlt.

� Die Sicherheit zu gewährleisten ist aufwendig, vor allem beimmobilen Datenzugriff. Beim Central Hub müssen Sie lediglicheinen Server überwachen, wenn Sie dagegen den mobilen Daten-zugriff auf allen SAP-Systemlinien zulassen, müssen Sie den Netz-werkverkehr auf allen Servern verstärkt überwachen.

Wahl des richtigen Szenarios

Aus diesen Gründen hat sich die Central-Hub-Architektur bewährtund etabliert. Da Sie den Central Hub in aller Regel neu installieren,installieren Sie damit auch gleich das aktuelle Release des SAP Net-Weaver Application Servers ABAP (AS ABAP). Zum Zeitpunkt desSchreibens dieses Buches ist das Release 7.40. Dieser ABAP-Stackbeinhaltet bereits die SAPUI5- und SAP-Gateway-Komponenten, sodass Sie keine zusätzliche Softwarekomponente installieren müssen.Auf den Backend-Systemen der SAP Business Suite müssen Sie ledig-lich die Softwarekomponente für SAP Gateway, IW_BEP, installie-ren. In den neueren Enhancement Packages (EHPs) der SAP BusinessSuite ist jedoch auch diese Softwarekomponente integriert, nichtzuletzt, weil SAP Fiori auf dieser Architektur aufbaut.

SAP Fiori

SAP Fiori ist mehr als nur eine Sammlung von SAPUI5-basierten Apps. Eshandelt sich um eine neue SAP-Philosophie, wie die User Experience (UX)über strikte Design Guidelines und eine rollen- und aufgabenbasierteImplementierung von Anwendungen verbessert werden kann. Technischhandelt es sich um SAPUI5-Anwendungen, die zentral auf dem CentralHub über das SAP Fiori Launchpad ausgeführt werden können.

Auch wenn Sie sich als Nicht-SAP-Mitarbeiter nicht an die Design Guide-lines für SAP Fiori halten müssen, empfehle ich Ihnen, sich mit diesen zubeschäftigen. Diese Richtlinien wurden von erfahrenen UX-Designernerstellt, und Sie können von diesem Wissen profitieren. Unter https://experience.sap.com können Sie sich über den Ansatz von SAP Fiori und diedaraus resultierenden Design Guidelines informieren.

Da so jede SAPUI5-Anwendung auf dem gleichen Server läuft, benö-tigt der Anwender in der Regel nur noch eine URL zum Zugriff auf dieAnwendungen. Auch unter Sicherheitsaspekten ist die Central-Hub-Architektur von Vorteil. Es ist wesentlich einfacher, ein einzelnes Sys-tem – meistens mit einem vorgeschalteten Reverse Proxy – netzwerk-



114

technisch abzusichern und zu überwachen, als mehrere Systeme. Dereinzige Nachteil der Central-Hub-Architektur ist der Betrieb derzusätzlichen Systemlinie mit den damit verbundenen Kosten.

Installation mitAS ABAP 7.31

Viele SAP-Kunden entscheiden sich in der Pilotphase dazu, mit demEmbedded Deployment zu starten. Damit können Sie in einem Proofof Concept zunächst einmal die neue Technologie evaluieren und imAnschluss die neue Central-Hub-Systemlinie aufbauen. Aus diesemGrund beschreibe ich an dieser Stelle zunächst die Installation aufeinem existierenden ABAP-Stack 7.31. Möchten Sie direkt die Cen-tral-Hub-Architektur umsetzen, können Sie diesen Schritt übersprin-gen und einen Central Hub auf der Basis von SAP NetWeaver 7.40installieren. Hier ist, wie bereist erwähnt, die SAPUI5-Komponentebereits enthalten.

SAPUI5 ist als Add-on in die SAP Business Suite integriert. Die Instal-lationspakete finden Sie im SAP Software Download Center (http://service.sap.com/swdc) unter Installations and Upgrades � A-Z-Index

� N � UI Add-On for NetWeaver � <Entsprechendes EHP-/ERP-Release> � Installation. Die dazugehörigen Support Packages fin-den Sie unter Support Packages and Patches � A-Z-Index � N � UI

Add-On for NetWeaver � <Entsprechendes EHP-/ERP-Release>.

1. Starten Sie im SAP Solution Manager den Maintenance Optimizer,und wählen Sie UI ADD-ON 1.0 FOR NW 7.03 als Produktver-

sion (siehe Abbildung 4.2).

Abbildung 4.2 Maintenance Optimizer im SAP Solution Manager


SAPUI5-Bibliothek in der SAP Business Suite installieren 4.1

115

2. Laden Sie die berechneten Support Packages und das Stack-XMLherunter. Entpacken Sie anschließend die Support Packages in dasEPS-Verzeichnis, und installieren Sie die Pakete mit dem SAP Add-On Installation Tool (Transaktion SAINT), bzw. führen Sie einUpdate (Transaktion SPAM) durch. Eine ausführliche Installations-anleitung finden Sie im SAP-Hinweis 1747308.

SAP UI Development Toolkit for HTML5

Ob die Installation erfolgreich war, können Sie durch den Aufruf derURL http://<HOSTNAME>:<SERVICE>/sap/public/bc/ui5_ui5 über-prüfen, wobei Sie <HOSTNAME> und <SERVICE> durch die WerteIhres SAP-Systems ersetzen. Ihnen sollte als Ergebnis das SAP UI

development toolkit for HTML 5 angezeigt werden (siehe Abbil-dung 4.3).

Abbildung 4.3 SAP UI Development Toolkit for HTML 5

ICF-Service aktivieren

Sollten Sie ein anderes Ergebnis erhalten, prüfen Sie, ob der entspre-chende Service aktiv ist. Gehen Sie dazu in die Transaktion SICF, undaktivieren Sie gegebenenfalls den ICF-Service (Internet Communica-tion Framework) default_host/sap/public/bc/ui5_ui5/ (siehe Abbil-dung 4.4).



116

Die in diesem Buch gezeigten Beispiele basieren auf der zum Zeit-punkt des Schreibens dieses Buches aktuellen Version SAP_UI 740SP 0013. Prüfen Sie daher mithilfe der Product Availability Matrix(PAM), die Sie unter http://service.sap.com/pam aufrufen können,welches die aktuell unterstützte Version ist, und installieren Siediese.

Abbildung 4.4 UI5-Service aktivieren

4.2 Frontend-Tools einrichten

Eclipse oderSAP Web IDE

Nach der erfolgreichen Installation der Backend-Komponente müs-sen Sie nun noch die SAPUI5-Frontend-Tools installieren. Hier ste-hen Ihnen zwei Möglichkeiten zur Verfügung:

� Eclipse-Plug-ins für SAPUI5

� die SAP Web IDE, eine cloudbasierte Entwicklungsumgebung fürSAPUI5


Frontend-Tools einrichten 4.2

117

Bei Eclipse handelt es sich um ein Open-Source-Projekt. Eclipse wirdals Integrated Development Environment (integrierte Entwicklungsum-gebung, kurz IDE) für verschiedenste Programmiersprachen genutzt.SAP hat auf Basis von Eclipse Plug-ins entwickelt, die es ermöglichen,SAPUI5-Entwicklungen in Eclipse zu programmieren. Die SAP WebIDE wird in der Cloud zur Verfügung gestellt und als Nachfolger derEclipse-Entwicklungsumgebung betrachtet.

In den folgenden Abschnitten zeige ich Ihnen die Einrichtung dieserbeiden Umgebungen. Wir beginnen mit der Eclipse-Umgebung.

4.2.1 Entwicklungsumgebung in Eclipse einrichten

Eclipse-ToolsDie UI-Entwicklungstools sind Teil der SAPUI5-Bibliothek. Es han-delt sich dabei um eine Reihe von Eclipse-basierten Tools und Edito-ren, die Sie bei der Entwicklung von SAPUI5-Anwendungen unter-stützen. Der SAPUI5 ABAP Repository Team Provider unterstützt Siebeim Einchecken der in Eclipse entwickelten Anwendungen in einABAP-Backend-System.

Installations-voraussetzungen

Die Entwicklerwerkzeuge für SAPUI5 müssen separat als Eclipse-Plug-ins installiert werden. Prüfen Sie vor der Eclipse-Installation, obdie installierte Laufzeitumgebung Java Runtime Environment (JRE)mindestens in der Version 1.6 vorliegt, und aktualisieren Sie die JREgegebenenfalls vor der Installation des Plug-ins. Öffnen Sie das JavaControl Panel über Start � Systemsteuerung � Programme � Java.Über den Button Info wird Ihnen Ihre JRE-Version angezeigt.

Eclipse-Umgebung installieren

Welche Eclipse-Version von SAPUI5 aktuell unterstützt wird, erfah-ren Sie unter https://tools.hana.ondemand.com. Im Abschnitt SAPUI5

� Procedure erfahren Sie, für welche Eclipse-Versionen eine Update-Site für die SAPUI5-Entwicklungswerkzeuge angeboten wird. Vondieser Update-Site können Sie die SAPUI5-Entwicklertools installie-ren (siehe auch Abbildung 4.12). Zum Zeitpunkt des Schreibens die-ses Buches wurden die Eclipse-Versionen Luna und Mars unterstützt,die neueste Version Neon noch nicht.

Eclipse IDE for Java EE Developers

Haben Sie noch keine Eclipse-Umgebung auf Ihrem Rechner instal-liert, laden Sie als Erstes die Eclipse IDE for Java EE Developers unterwww.eclipse.org/downloads herunter. Hat Ihr SAP-Backend-System



118

den Stand SAP NetWeaver 7.40 Service Pack 7 oder kleiner, müssenSie die 32-Bit-Version von Eclipse herunterladen, da der SAPUI5ABAP Repository Team Provider nur mit der 32-Bit-Version funktio-niert. Ab Service Pack 8 wird auch die 64-Bit-Version unterstützt.

Eclipse starten Nach dem Entpacken der heruntergeladenen ZIP-Datei können SieEclipse direkt mit einem Doppelklick auf eclipse.exe starten. Eclipseläuft im Arbeitsspeicher und muss daher nicht installiert werden.Beim ersten Start von Eclipse werden Sie nach einem Verzeichnis fürden Workspace gefragt (siehe Abbildung 4.5). Bei der Entwicklung inEclipse arbeiten Sie in Projekten, und der Workspace ist der Verzeich-nisort auf Ihrer Festplatte, an dem die Dateien Ihrer Projekte abge-legt werden.

Abbildung 4.5 Verzeichnis für den Eclipse-Workspace angeben

Sie können auch mit mehreren Workspaces arbeiten und den Work-space im Menü über File � Switch Workspace jederzeit wechseln.

Die SAPUI5-Plug-ins können Sie auf zwei Wegen installieren:

� über die Update-Site

� über den SAP Service Marketplace

Auf der Update-Site können Sie immer nur die jeweils aktuelle Ver-sion installieren. Sollte sich Ihr ABAP-System auf einem älterenSAPUI5-Releasestand befinden und möchten Sie in Eclipse die glei-che Version wie auf Ihrem Backend installieren, müssen Sie die ent-



119

sprechende Version vom SAP Service Marketplace herunterladen.Aus diesem Grund beschreibe ich an dieser Stelle beide Vorgehens-weisen.

Kernkomponenten der SAPUI5-Tools

Für die Entwicklung benötigen Sie die folgenden drei Kernkompo-nenten, die Sie in der folgenden Reihenfolge installieren:

� ABAP IN ECLIPSE

� SAPUI5 TOOLS IDE PLUGIN

� SAPUI5 TEAM PROV IDE

Installation vom SAP Service MarketplaceKomponenten herunterladen

Welche SAPUI5-Version auf Ihrem ABAP-System installiert ist, fin-den Sie am einfachsten heraus, indem Sie das Development Toolkitaus Ihrem System heraus aufrufen, wie in Abschnitt 4.1, »SAPUI5-Bibliothek in der SAP Business Suite installieren«, beschrieben (sieheAbbildung 4.3). Laden Sie dann vom SAP Service Marketplacezunächst die beiden benötigten SAPUI5-Komponenten SAPUI5TOOLS IDE PLUGIN und SAPUI5 TEAM PROV IDE herunter. Sie fin-den die Dateien im SAP Service Marketplace unter Support Packa-

ges and Patches � A-Z-Index � N � UI Add-On for NetWeaver �

<Entsprechendes EHP-/ERP-Release>.

Fügen Sie die jeweils aktuelle Version der beiden Komponenten überden Button Zum Download Basket hinzufügen zu Ihrem Down-load-Basket hinzu. Für den SAPUI5 ABAP Repository Team Providerbenötigen Sie zusätzlich noch das Plug-in für ABAP in Eclipse. Diesesfinden Sie am einfachsten, indem Sie im SAP Software DownloadCenter nach »ABAP in Eclipse« suchen. Fügen Sie auch diese DateiIhrem Download-Basket hinzu. Laden Sie im Anschluss die drei ZIP-Dateien mithilfe des SAP Download Managers herunter.

Standard-Plug-insJe nachdem, welche Version Sie installieren möchten, benötigen Sienoch weitere Standard-Plug-ins. So setzt die zum Zeitpunkt desSchreibens dieses Buches aktuelle Version von ABAP in Eclipse z. B.das Eclipse-Grafik-Plug-in Graphiti und einige EMF-Komponenten(Eclipse Modeling Framework) voraus. Ich zeige Ihnen an dieserStelle einen Weg zur Installation der Komponenten, der für mich ambesten funktioniert hat. Weitere Informationen zur Installation fin-den Sie in der Installationsdokumentation.



120

SAPUI5-Plug-insinstallieren

Nachdem Sie die Dateien aus dem SAP Service Marketplace herun-tergeladen haben, können Sie diese in Eclipse installieren:

1. In der Eclipse-Oberfläche starten Sie dazu im Menü über den PfadHelp � Install New Software den Installationsassistenten (sieheAbbildung 4.6).

Abbildung 4.6 Plug-in-Komponenten installieren

2. Da die SAPUI5-Tools lokal auf Ihrer Festplatte gespeichert wur-den, müssen Sie diese manuell in den Installationsassistenten ein-binden. Beginnen Sie bei der Installation mit dem Plug-in ABAP in

Eclipse. Klicken Sie hierzu neben dem Eingabefenster Work with

auf den Button Add, und wählen Sie im folgenden Pop-up-Fenster,das in Abbildung 4.7 zu sehen ist, per Doppelklick die entspre-chende ZIP-Datei aus.

Abbildung 4.7 SAPUI5-Tools auswählen

3. Bestätigen Sie Ihre Auswahl mit OK (siehe Abbildung 4.8).



121

Abbildung 4.8 Archivdatei einbinden

4. Wählen Sie nun über den Installationsassistenten das gewünschtePlug-in aus, und bestäigen Sie Ihre Auswahl mit Next (siehe Abbil-dung 4.9).

Abbildung 4.9 Komponenten zur Installation auswählen

5. Eclipse prüft nun die Installationsvoraussetzungen für das Plug-in.In unserem Beispiel fehlt als Voraussetzung für die Installation desPlug-ins das Eclipse-Plug-in Graphiti (siehe Abbildung 4.10).



122

Abbildung 4.10 Hinweis auf fehlendes Plug-in

6. Gehen Sie daher über Back einen Schritt zurück, tragen Sie unterWork with die Update-Site der verwendeten Eclipse-Version ein,und suchen Sie dann nach dem erforderlichen Plug-in, wie inAbbildung 4.11 dargestellt.

Abbildung 4.11 Installation des fehlenden Plug-ins



123

7. Wählen Sie das Plug-in aus, und bestätigen Sie Ihre Auswahl mitNext.

8. Akzeptieren Sie im Folgebild die Lizenzvereinbarungen, und star-ten Sie über den Button Finish die Installation. Bei manchen Kom-ponenten erscheint ein Warnhinweis, dass Sie unsignierte Kompo-nenten installieren. Bestätigen Sie dieses Pop-up-Fenster mit OK.Nach der erfolgreichen Installation müssen Sie Eclipse neu starten.

9. Versuchen Sie im Anschluss, das Plug-in für ABAP in Eclipseerneut zu installieren. Sollten Sie eine weitere Fehlermeldungerhalten, wiederholen Sie das beschriebene Verfahren so lange,bis Sie alle erforderlichen Plug-ins installiert haben.

Alle vorausgesetzten Plug-ins installieren

Der beschriebene Weg ist zwar sehr mühsam, ist aber die einzige Mög-lichkeit, eine Version passgenau zu installieren. Für die von mir verwen-dete Version musste ich diese Schritte für die folgenden Plug-ins wieder-holen:

� EMF Query

� EMF Validation

� EMF Model Transaction Workbench Integration

Nach der erfolgreichen Installation des Plug-ins für ABAP in Eclipsewiederholen Sie den Vorgang für die beiden Plug-ins für die SAPUI5-Tools-IDE und den SAPUI5 ABAP Repository Team Provider. Damitist die Installation der Eclipse-Entwicklungsumgebung für SAPUI5abgeschlossen.

SAP-Hinweise

Die zum Zeitpunkt des Schreibens dieses Buches aktuelle Version SAPUI51.00 SP13 setzt z. B. ABAP in Eclipse in der Version 2.44 voraus. WelcheVersionen Sie jeweils installieren müssen, können Sie den SAP-Hinweisen1747308 und 1718399 entnehmen.

Installation von der Update-SiteAktuelle Version installieren

Wenn sich Ihr ABAP-Backend annähernd auf dem aktuellen Standbefindet, können Sie die SAPUI5-Update-Site für die Installation nut-zen. Diese Vorgehensweise hat zwar den Nachteil, dass Sie nur diegerade aktuellste Version installieren können, bringt aber den gro-ßen Vorteil mit sich, dass die vorausgesetzten Plug-ins automatisch



124

mit installiert werden. Dadurch vereinfacht sich der Installationspro-zess erheblich.

1. Auf der Internetseite https://tools.hana.ondemand.com finden Sieunter SAPUI5 � Procedure den Link zu der entsprechendenUpdate-Site: https://tools.hana.ondemand.com/<Eclipse-version>,also z. B. https://tools.hana.ondemand.com/mars für die Eclipse-Version Mars.

2. Starten Sie über den Menüpfad Help � Install New Software denInstallationsassistenten, und tragen Sie unter Work with die pas-sende Update-Site ein.

3. Wählen Sie die gewünschten Komponenten aus, wie in Abbildung4.12 zu sehen, und starten Sie die Installation über Next.

Abbildung 4.12 Installation über die Update-Site



125

Eclipse-Komponenten aktualisieren

Übersicht der installierten Komponenten

Es wird empfohlen, die Eclipse-Komponente Eclipse IDE for Java EEDeveloper regelmäßig zu aktualisieren. Diese Komponente beinhal-tet die Codevervollständigung, die in niedrigeren Versionen zuAbstürzen der Anwendung führen kann. Um eine Komponente zuaktualisieren, rufen Sie über den Menüpfad Help � About Eclipse dieÜbersicht der installierten Komponenten auf (siehe Abbildung 4.13).Über den Button Installation Details können Sie sich die Versio-nen der installierten Komponenten anzeigen lassen.

Abbildung 4.13 Information zu den installierten Eclipse-Komponenten

Update der installierten Komponenten

Um ein Update durchzuführen, markieren Sie die entsprechende Kom-ponente und klicken auf den Button Update (siehe Abbildung 4.14).

Abbildung 4.14 Installierte Komponenten aktualisieren



126

Es erscheint nun ein Pop-up-Fenster mit den verfügbaren Updates.Bestätigen Sie die Installation mit Next, akzeptieren Sie die Lizenz-vereinbarungen, und starten Sie die Installation mit Install.

Als Alternative zu Eclipse stelle ich Ihnen nun die SAP Web IDE vor.

4.2.2 SAP Web IDE einrichten

Die SAP Web IDE ist eine browserbasierte Entwicklungsumgebung,die auf der SAP HANA Cloud Platform (HCP) läuft. Sie wurde speziellfür die Entwicklung von SAPUI5- und SAP-Fiori-Anwendungen kon-zipiert und soll langfristig alle bisherigen Tools und Add-ons fürEclipse ersetzen. Die SAP Web IDE stellt u. a. einen WYSIWYG-Edi-tor (»What you see is what you get«) zur Verfügung, wie er ähnlich inEclipse über das AppBuilder-Plug-in realisiert ist. Außerdem findenSie hier einen OData Modeler, der den Funktionen des Ogee-Plug-ins in Eclipse entspricht.

Einsatzvarianten Grundsätzlich haben Sie drei Möglichkeiten, die SAP Web IDE zunutzen, wobei nicht jede Variante für die produktive Nutzung freige-geben ist:

� SAP Web IDE auf der HCPDiese Möglichkeit ist für den produktiven Einsatz freigegeben.

� Testzugang zur SAP Web IDEEs gibt einen kostenlosen Testzugang, der nicht für die produktiveNutzung freigegeben ist.

� Lokale Version der SAP Web IDEAuch die Verwendung dieser Variante ist nur zu Testzweckenerlaubt.

In den folgenden Abschnitten erkläre Ihnen die Einrichtung dieserdrei Varianten der SAP Web IDE.

SAP Web IDE auf der SAP HANA Cloud Platform

Entwicklerlizenzen Im Gegensatz zu den Eclipse-Plug-ins ist die SAP Web IDE kosten-plichtig. Entsprechende Lizenzen können Sie über den SAP Storebeziehen (https://www.sapstore.com/solutions/60009/SAP-Web-IDE).



127

An HCP anmeldenVerfügen Sie über die erforderliche Entwicklerlizenz, können Siesich über die URL https://account.hana.ondemand.com am HCP Cock-pit anmelden. Starten Sie die SAP Web IDE dann wie folgt:

1. Unter Subscriptions finden Sie im Abschnitt Subscribed HTML5

Applications den Eintrag zur SAP Web IDE (siehe Abbildung 4.15).

Abbildung 4.15 SAP HANA Cloud Platform Cockpit

2. Klicken Sie in der Spalte Application auf webide, wird Ihnen dieURL zur SAP Web IDE angezeigt (siehe Abbildung 4.16).

Abbildung 4.16 Link zur SAP Web IDE

3. Über diesen Link erreichen Sie die SAP Web IDE. Beim ersten Öff-nen sehen Sie den Willkommensbildschirm aus Abbildung 4.17und können sofort mit der Entwicklung starten.



128

Abbildung 4.17 Startbildschirm der SAP Web IDE

Testzugang zur SAP Web IDE

Der Testzugang zur SAP Web IDE wird ebenfalls über die HCP bereit-gestellt, und der Zugriff erfolgt fast genau so wie beim produktivenHCP-Account, lediglich die URL zum HCP Cockpit lautet anders:https://trialaccount.hana.ondemand.com. Hier können Sie sich füreinen nicht produktiv nutzbaren Testzugang registieren. Nach Erhaltder Bestätigungs-E-Mail können Sie sich genau wie beim produkti-ven Zugang am HCP Cockpit anmelden und finden die URL zur SAPWeb IDE dort ebenfalls unter Subscriptions.

Lokale Installation der SAP Web IDE

Im SAP Community Network (SCN) können Sie den Quellcoude undeine Anleitung zur Installation einer lokalen SAP Web IDE unter derURL http://scn.sap.com/docs/DOC-58926 herunterladen. Auch dieseVersion ist nicht für den produktiven Einsatz freigegeben.



129

Funktionen der SAP Web IDE

In Kapitel 10, »Beispielentwicklung einer SAP-Fiori-App«, werden wir einAnwendungsbeispiel mithilfe der SAP Web IDE implementieren, und Siewerden die wichtigsten Funktionen dieser Entwicklungsumgebung ken-nenlernen.

SAP HANA Cloud Connector installieren und konfigurieren

Unabhängig davon, ob Sie sich für den kostenlosen Testzugang odereine produktive SAP Web IDE entscheiden – damit diese cloudba-sierte Webanwendung mit Ihren ABAP-Backendsystemen kommuni-zieren kann, müssen Sie den sogenannten SAP HANA Cloud Connec-tor installieren und konfigurieren. Der Cloud Connector stellt einesichere Verbindung zwischen der SAP Web IDE in der Cloud undIhren On-Premise-Systemen her. Wie in Abbildung 4.18 veranschau-licht, installieren Sie den SAP HANA Cloud Connector auf einemseparaten Server und verbinden Ihre On-Premise-Systeme übereinen sicheren SSL-Tunnel (Secure Sockets Layer) mit der Cloud-In-stanz.

Abbildung 4.18 Rolle des SAP HANA Cloud Connectors

InstallationDen SAP HANA Cloud Connector können Sie unter der URL https://tools.hana.ondemand.com herunterladen. Wählen Sie hier die für IhrBetriebssystem passende Version aus (siehe Abbildung 4.19), undinstallieren Sie diese, wie in der Dokumentation beschrieben.

SAP HANA Cloud Connector

On-Premise-Landschaft

SAP Web IDE(SAP HANA Cloud

Platform)



130

Abbildung 4.19 Download des SAP HANA Cloud Connectors

Verbindungeinrichten

Nachdem Sie den SAP HANA Cloud Connector installiert haben, kön-nen Sie die Verbindung zur SAP Web IDE über die Administrations-oberfläche herstellen:

1. Rufen Sie dazu das Cockpit Ihres HCP-Accounts unter der URLhttps://account.hana.ondemand.com/cockpit# (für produktive In-stanzen) bzw. https://account.hanatrial.ondemand.com/cockpit#(beim kostenlosen Testzugang) auf.

2. Dort finden Sie unter Account � Account Details � Account

Name den Namen Ihres HCP-Accounts (siehe Abbildung 4.20).Diese Account-ID benötigen Sie für die Konfiguration des SAPHANA Cloud Connectors.

Abbildung 4.20 Name des HCP-Accounts abfragen



131

3. Melden Sie sich nun als Administrator am SAP HANA CloudConnector an. Sollten Sie nicht über Administratorrechte verfü-gen, wenden Sie sich für die nachfolgenden Schritte an den verant-wortlichen Administrator.

4. Legen Sie eine neue Verbindung an, indem Sie im BereichAccount Dashboard auf Add… klicken (siehe Abbildung 4.21).

Abbildung 4.21 Neue Verbindung anlegen

5. Tragen Sie nun die Verbindungsdaten, wie in Abbildung 4.22 zu se-hen, ein. Wählen Sie als Landscape Host »hana.ondemand.com«für den produktiven Zugang bzw. »hanatrial.ondemand.com« beiVerwendung des Testzugangs. Als Account Name geben Sie die Ac-count-ID ein, die Sie zuvor nachgesehen haben. In den Feldern Ac-

count User und Password geben Sie Ihren Benutzernamen undIhr Passwort ein.

Abbildung 4.22 SAP HANA Cloud Connector konfigurieren



132

6. Nachdem Sie Ihre Eingaben mit OK bestätigt haben, stellt der SAPHANA Cloud Connector eine Verbindung zur HCP her. Wenn Siealle Daten richtig eingegeben haben, erscheint ein neuer Eintragim Account Dashboard (siehe Abbildung 4.23). Eine aktive Ver-bindung wird mit einem grünen Symbol angezeigt.

Abbildung 4.23 Neuer Account im SAP HANA Cloud Connector

Virtueller Host Als nächsten Schritt verbinden Sie Ihr ABAP-Backend-System mitdem Cloud Connector. Dies geschieht durch einen sogenannten vir-tuellen Host.

1. Wechseln Sie dazu in den Bereich Access Control, und klickenSie auf Add…

2. Im folgenden Pop-up-Fenster geben Sie einen virtuellen Host undeinen virtuellen Port an (siehe Abbildung 4.24). Sie können hierIhrer Kreativität freien Lauf lassen, Sie müssen sich die Angabennur merken, da Sie diese im Folgeschritt wieder benötigen.

Abbildung 4.24 System-Mapping im SAP HANA Cloud Connector



133

3. Als Internal Host und Internal Port tragen Sie die Daten IhresCentral Hubs bzw. die Daten des Systems, auf dem SAP Gatewayläuft, ein.

4. Sichern Sie Ihre Eingaben.

Ressourcen hinzufügen

Als nächsten Schritt tragen Sie die erreichbaren Ressourcen auf demABAP-Backend-System ein. Letztlich geben Sie an dieser Stelle ICF-Pfade bekannt (siehe auch Abschnitt 4.1, »SAPUI5-Bibliothek in derSAP Business Suite installieren«), die über den SAP HANA CloudConnector erreichbar sein sollen. Markieren Sie dazu im oberenBereich Mapping Virtual To Internal System den Eintrag mitIhrem virtuellen Host. Im unteren Bereich erscheint nun eine neueTabelle, in der Sie über Add… die Ressourcen hinzufügen können,wie in Abbildung 4.25 gezeigt.

Abbildung 4.25 Ressourcen hinzufügen

Wiederholen Sie diesen Schritt für die folgenden ICF-Knoten:

� /sap/bc/ui5_ui5 – Path and all sub-paths

� /sap/opu/odata – Path and all sub-paths

� /sap/bc/bsp – Path and all sub-paths

� /sap/bc/adt – Path and all sub-paths



134

Als Ergebnis sollten Sie nun vier Einträge in der Ressourcen-Tabellemit dem Status resource is enabled sehen, der durch ein grünesSymbol erkennbar ist (siehe Abbildung 4.26).

Abbildung 4.26 Anzeige der verfügbaren Ressourcen

SAP Web IDEanbinden

Damit ist der SAP HANA Cloud Connector konfiguriert und mit demSAP-Gateway-System verbunden. Als nächsten Schritt verbinden Siedie SAP Web IDE mit dem SAP HANA Cloud Connector:

1. Wechseln Sie dazu wieder in das HCP Cockpit. Legen Sie imBereich Destination eine neue Verbindung an. An dieser Stellekommt der virtuelle Host ins Spiel. Wie Sie Abbildung 4.24 ent-nehmen können, habe ich als virtuellen Host sapui5.buch und alsvirtuellen Port 6666 gewählt. Daraus ergibt sich die URLsapui5.buch:6666, wie in Abbildung 4.27 zu erkennen.

Abbildung 4.27 SAP Web IDE an den SAP HANA Cloud Connector anbinden



135

2. Neben der URL müssen Sie noch drei zusätzliche Attribute pfle-gen. Klicken Sie dazu auf New Property, und geben Sie die folgen-den Eigenschaften und Werte ein:

– »WebIDEEnabled«: »True«

– »WebIDESystem«: »<System-ID Ihres Central Hubs>«

– »WebIDEUsage«: »odata_abap.ui5_execute_abap«

Verbindung testenNach dem Sichern Ihrer Einstellungen können Sie diese nun in derSAP Web IDE testen:

1. Starten Sie die SAP Web IDE wie im Abschnitt »SAP Web IDE aufder SAP HANA Cloud Platform« beschrieben.

2. Legen Sie über den Menüpfad File � New � Project from Template

ein neues Projekt an. Ein Wizard zum Anlegen eines neuen Pro-jekts startet.

3. Wählen Sie im ersten Schritt zur Demonstration einmal das TemplateSAP Fiori Full Screen Application aus (siehe Abbildung 4.28), undklicken Sie auf Next.

Abbildung 4.28 Template für eine SAP-Fiori-Anwendung in der SAP Web IDE auswählen

4. Geben Sie im Folgebild einen Projektnamen ein, z. B. »sapui5-Buch«, und klicken Sie auf Next (siehe Abbildung 4.29).



136

Abbildung 4.29 Projektnamen für die Entwicklung eingeben

5. Jetzt kommt der eigentlich spannende Teil: Im Folgebild könnenSie die Datenverbindung auswählen. Wenn Sie alles richtig konfi-guriert haben, können Sie wie in Abbildung 4.27 unter Service

Catalog den Eintrag zu Ihrem Central Hub sehen. Die SAP WebIDE liest nun alle OData-Services von diesem System ein und zeigtdiese im unteren Teil des Bildes an (siehe Abbildung 4.30).

Geschafft! Können Sie die Services hier sehen, funktioniert dieVerbindung zwischen der SAP Web IDE und dem SAP HANACloud Connector sowie zwischen dem SAP HANA Cloud Connec-tor und dem SAP-Backend-System.

Abbildung 4.30 Servicekatalog aus dem Central Hub



137

Auch wenn ich mir sehr gut vorstellen kann, dass es Sie jetzt in denFingern juckt und Sie dieses Beispiel gerne zu Ende bringen möch-ten, muss ich Sie leider an dieser Stelle noch ein paar Seiten lang ver-trösten. Sie können den Wizard an dieser Stelle abbrechen, ich kannIhnen jedoch versprechen, dass wir in Kapitel 10, »Beispielentwick-lung einer SAP-Fiori-App«, wieder an diese Stelle zurückkehren wer-den und dieses Beispiel zu Ende bringen. Dafür benötigen Siezunächst noch ein besseres Verständnis von OData, SAP Gatewayund natürlich auch SAPUI5.

Bevor Sie die erste SAPUI5-Seite anlegen, erläutere ich Ihnen daherim folgenden Kapitel die möglichen Entwicklungsszenarien und dieKommunikation zwischen dem Browser und dem SAP-Backendnäher. Im Anschluss daran lernen Sie das Architekturmuster ModelView Controller (MVC) kennen und sind damit bestens gerüstet, ummit der Entwicklung von Anwendungen in SAPUI5 zu starten.

Ecplise und SAP Web IDE in diesem Buch

Für mich als Autor war es eine schwierige Entscheidung, ob ich Ihnen dieBeispiele in diesem Buch in Eclipse oder der SAP Web IDE zeige. Die SAPWeb IDE ist eine zukunftsträchtige IDE, zum Zeitpunkt des Schreibensdieses Buches ist Eclipse jedoch nach wie vor sehr stark verbreitet. Beieinigen Aufgaben, z. B. beim Anlegen eines Projekts, wie in diesemAbschnitt gezeigt, ist der Unterschied zwischen der SAP Web IDE undEclipse gering. Auch bei der eigentlichen Entwicklung unterscheidet sichdie Arbeit in der SAP Web IDE nur geringfügig von der Arbeit in Eclipse.In der SAP Web IDE ist u. a. die Codevervollständigung derzeit etwas bes-ser. Die Stärken der SAP Web IDE liegen in den zur Verfügung gestelltenTemplates und Plug-ins, die es sehr einfach machen, auch komplexereAnwendungen – geführt durch einen Assistenten – zu erstellen.

Daher habe ich mich dazu entschlossen, die Beispiele in diesem Buchzunächst in Eclipse zu zeigen. In Kapitel 10, »Beispielentwicklung einerSAP-Fiori-App«, werdern Sie dann eine Genehmigungs-App in der SAPWeb IDE entwickeln. In diesem Kapitel werden Sie die Stärken der SAPWeb IDE kennenlernen. Selbstverständlich können Sie auch alle Beispielein der SAP Web IDE oder alle Beispiele in Eclipse entwickeln.


7

Inhalt

Einleitung .................................................................................. 13

1 HTML5 und CSS3 .................................................... 19

1.1 Einführung in HTML5 ............................................. 201.1.1 Grundgerüst eines HTML-Dokuments ........ 201.1.2 Wichtige Sprachelemente .......................... 25

1.2 Einführung in CSS ................................................... 351.2.1 Allgemeiner Aufbau ................................... 351.2.2 CSS in HTML einbinden ............................. 361.2.3 Selektoren ................................................. 401.2.4 Beispiel ..................................................... 43

2 JavaScript ................................................................ 47

2.1 Grundlagen ............................................................. 472.1.1 Protokollierung ......................................... 482.1.2 Positionierung von JavaScript-Code ........... 492.1.3 Kommentare ............................................. 502.1.4 Funktionen ................................................ 502.1.5 Objekte ..................................................... 53

2.2 Variablen ................................................................ 592.3 Operatoren ............................................................. 62

2.3.1 Rechenoperatoren ..................................... 632.3.2 Inkrement- und Dekrementoperatoren ...... 632.3.3 Zuweisungsoperatoren .............................. 632.3.4 Vergleichsoperatoren ................................. 642.3.5 Operator »typeof« ..................................... 642.3.6 Logische Operatoren ................................. 65

2.4 Kontrollstrukturen – Bedingungen und Schleifen ..... 662.4.1 Anweisung »if« .......................................... 662.4.2 Anweisung »switch« .................................. 672.4.3 for-Schleife ................................................ 702.4.4 while-Schleife ............................................ 712.4.5 do…while-Schleife .................................... 732.4.6 for…in-Schleife .......................................... 74

2.5 Document Object Model ........................................ 762.5.1 DOM-Baum .............................................. 77


Inhalt

8

2.5.2 Elemente ansprechen ................................. 772.5.3 DOM-Manipulation ................................... 78

2.6 Ereignisse ................................................................ 84

3 jQuery ...................................................................... 87

3.1 Grundlagen ............................................................. 873.2 Selektoren und Ereignisse ........................................ 88

3.2.1 Selektoren .................................................. 893.2.2 Ereignisse ................................................... 94

3.3 DOM-Manipulation ................................................ 963.4 AJAX ....................................................................... 100

4 Entwicklungsumgebung einrichten ........................ 111

4.1 SAPUI5-Bibliothek in der SAP Business Suite installieren .............................................................. 112

4.2 Frontend-Tools einrichten ....................................... 1164.2.1 Entwicklungsumgebung

in Eclipse einrichten ................................... 1174.2.2 SAP Web IDE einrichten ............................ 126

5 Erste Schritte in SAPUI5 ......................................... 139

5.1 Webentwicklung auf dem SAP NetWeaver Application Server ABAP ......................................... 140

5.2 Model-View-Controller-Architekturmuster .............. 1495.3 SAPUI5-Entwicklungsprojekt anlegen ...................... 150

5.3.1 Projekt in Eclipse anlegen ........................... 1515.3.2 Projekt in der SAP Web IDE anlegen .......... 155

5.4 SAPUI5-Demokit ..................................................... 1575.5 Ihre ersten SAPUI5-Anwendungen .......................... 160

5.5.1 SAPUI5-Anwendung auf Basis eines JavaScript-Views ........................................ 160

5.5.2 SAPUI5-Anwendung auf Basis eines XML-Views ................................................ 167

5.5.3 Anwendung in das Backend laden .............. 1715.5.4 Download und Import der Beispiele ........... 180

5.6 Debugging .............................................................. 1815.6.1 Eigene Ressourcen debuggen ..................... 1825.6.2 Core-Komponenten debuggen ................... 187


Inhalt

9

6 SAPUI5-Laufzeitumgebung ..................................... 191

6.1 Initialisierung der Anwendung ................................ 1916.1.1 Bootstrapping ............................................ 1926.1.2 Generierung des Model-View-Controller-

Musters in SAPUI5 .................................... 2016.2 Modelle zur Datenbindung ..................................... 210

6.2.1 JSON Model .............................................. 2146.2.2 XML Model ............................................... 2256.2.3 Resource Model ........................................ 2276.2.4 OData Model ............................................ 231

6.3 Datenbindungstypen .............................................. 2326.3.1 Property Binding ....................................... 2336.3.2 Aggregation Binding .................................. 2346.3.3 Element Binding ........................................ 2396.3.4 Named Binding ......................................... 2446.3.5 Extended Data Binding .............................. 2446.3.6 Complex Binding ....................................... 2456.3.7 Expression Binding .................................... 2486.3.8 Custom Data Binding ................................. 249

7 Weitere Techniken in SAPUI5 ................................. 253

7.1 SAPUI5-Datentypisierung ....................................... 2537.1.1 Datum ....................................................... 2547.1.2 Uhrzeit ...................................................... 2557.1.3 Datum und Uhrzeit .................................... 2557.1.4 Datentypisierung zur Eingabeprüfung

verwenden ................................................ 2557.1.5 Eigene Datentypen .................................... 258

7.2 Layoutanpassungen ................................................ 2617.2.1 CSS anpassen ............................................. 2617.2.2 Theme Designer ........................................ 2657.2.3 Standardabstände ...................................... 276

7.3 Components ........................................................... 2787.3.1 Component anlegen .................................. 2807.3.2 Automatische Instanziierung des Views ..... 2847.3.3 View kontextabhängig laden ..................... 2867.3.4 Navigation ................................................. 2887.3.5 Fehlerseite bei falschem Aufruf .................. 2967.3.6 View-übergreifende Werteübergabe .......... 299


Inhalt

10

7.4 Fragments ............................................................... 3057.4.1 Dynamisches Fragment in einem View ....... 3067.4.2 Fragment als Pop-up-Fenster ..................... 310

7.5 Kundeneigene Controls ........................................... 3157.6 Kommunikation mit dem SAP-Backend ................... 321

8 Systemanbindung mit SAP Gateway ...................... 327

8.1 Open Data Protocol ................................................ 3278.2 SAP Gateway ........................................................... 333

8.2.1 Installation ................................................. 3348.2.2 Konfiguration ............................................. 334

8.3 OData-Service implementieren ................................ 3368.3.1 Service definieren ....................................... 3368.3.2 Service implementieren .............................. 3448.3.3 Service aktivieren ....................................... 3538.3.4 Service testen ............................................. 356

8.4 OData-Service konsumieren .................................... 3608.4.1 Datenbindung ............................................ 3608.4.2 Query-Optionen ........................................ 3658.4.3 CRUD-Operationen .................................... 3728.4.4 Stapelverarbeitung ..................................... 3758.4.5 Smart Controls ........................................... 381

8.5 Mit Mockdaten arbeiten .......................................... 385

9 Beispielentwicklung einer Portalanwendung ......... 391

9.1 User-Interface-Design entwerfen ............................. 3919.2 Datenmodell erstellen ............................................. 3989.3 Benutzeroberfläche implementieren ........................ 399

9.3.1 Grundgerüst der Portalanwendung ............. 3999.3.2 Home-View ................................................ 4109.3.3 Routenplaner ............................................. 4149.3.4 Aufgabenliste ............................................. 4209.3.5 Zeiterfassung .............................................. 4279.3.6 Urlaubsantrag ............................................. 436

10 Beispielentwicklung einer SAP-Fiori-App ............... 439

10.1 SAP Web IDE .......................................................... 44110.2 Mobile Lösungen mit SAPUI5 entwickeln ................ 445


Inhalt

11

10.3 Anwendungsbeispiel ............................................... 44810.3.1 Grundgerüst der Anwendung .................... 44810.3.2 Grundgerüst erweitern .............................. 452

10.4 Bereitstellung über das SAP Fiori Launchpad ........... 45610.4.1 Launchpad-Rolle anlegen .......................... 45810.4.2 Semantisches Objekt pflegen ..................... 45910.4.3 SAP Fiori Launchpad Administrator ........... 46010.4.4 Berechtigungen anlegen ............................ 465

Anhang............................................................................ 469

A Weiterführende Informationsquellen ................................. 469

B Über den Autor ................................................................. 471

Index ........................................................................................ 473


473

Index

/UI5/THEME 265<blockquote> 26<body> 21, 24<br> 26<datalist> 33<div> 26, 28<footer> 24<form> 33<h> 25<head> 21<header> 24<hr> 26<html> 21<input type="radio"> 33<input> 33<label> 33<li> 26<ol> 26<p> 20<script> 50<section> 24<select> 33<table> 32<tbody> 32<td> 32<textarea> 33<th> 32<thead> 32<tr> 32<ul> 26$batch 332, 375$expand 332$filter 332$format 332$metadata 329$orderby 332$select 332$skip 332$top 332

A

ABAP Debugger 148ABAP Dictionary 344ABAP in Eclipse 119ABAP Workbench 352

ABAP-Dictionary-Struktur importieren 344

Abschnitt 20Abstand 276action 33ActionSheet 160addEventListener() 85addStyleClass 261, 264Adressierbarkeit 328Aggregation 160, 234Aggregation Binding 234Aggregation Binding, Factory-

Funktion 235AJAX 100, 321

asynchrone Verarbeitung 102Aufruf 217Objekt 101, 104synchrone Verarbeitung 102

alert 53Android 439Anfangs-Tag 20Anfrage 321Animation 82Anker 30Anmeldesprache 228Annotation 364, 383Annotation Binding 350, 364Annotation, OData 227Apache Tomcat 166API-Referenz 161, 441App 399, 445

Referenz-App 442Template 442

App Descriptor 279App-Control 288, 292Applikationsdaten 149apply 285Architekturmuster 149Argument 52Array 74, 75, 77Assoziation 329Asynchronous JavaScript and XML

� AJAXAtom Publishing 327Atom Syndication 327Attribut 192


474

Index

Attribut-Binding 226Ausdruck 248Auswahlliste 33Auszeichnungssprache 20Außenabstand 276Axure 392

B

BackendAnwendung einchecken 175Deployment 456Kommunikation 321

Basis-Controller 401, 406Basis-Theme 267Batch

ID 375OData 375Verarbeitung 380

Benutzeraktion 149Berechtigung 464Berechtigungsprofil 466Berechtigungsrolle 465Beschriftung 33Bibliothek einbinden 198Binding � DatenbindungBlackBerry OS 439Blockelement 28Blue Crystal 201, 267Bookmark � Lesezeichenboolescher Wert 62Bootstrapping 161, 191, 192Box-Modell 276break 69Breakpoint 146, 182Breakpoint, Bedingung 183Browser 19

Anfrage 140Cache 314Entwicklertools 48Spezifika 44

BSP-Anwendung 176BSP-Seite 173BUILD 392Button 161, 185, 209, 316, 370, 454

C

Cache zurücksetzen 314Calendar 436Call by Reference 56Call by Value 56Callback 102, 217Callstack 183Cascading Style Sheet � CSSCatch-all-Route 297Central Hub 112, 334, 353Central Hub Deployment 112, 334Changeset 375

definieren 379ID 377

Chart 427Checkbox 421Chrome 182Class Builder 352Client 149clientseitiges OData Model 232Cloud Connector � SAP HANA

Cloud ConnectorCodeschnipsel 282Code-Template 282Codevervollständigung 163ComboBox 235Complex Binding 245Component 278, 399, 400, 404

Aufbau 279Navigation 288, 290

ComponentContainer 279Container 403Container Padding 276Control 159, 196

ActionSheet 160App 288, 292, 399Beispiele 158Bibliothek 261Button 161, 185, 196, 209, 261,

316, 370, 454Calendar 436Chart 427, 431ColumListItem 310ComboBox 235ComponentContainer 279Dialog 311Erweiterung 315Form 200GridLayout 307


475

Index

Control (Forts.)HeaderBar 399IconTabBar 197Input 199, 224, 257, 378kundeneigenes 315, 414Layout 200List 197MassageStrip 377MessagePage 297MessageToast 204, 257, 320NavContainer 289ObjectHeader 197Page 289, 421RatingIndicator 227, 245, 395Responsive 201sap.ui.core 160Search 366SearchField 197Select 429Shell 281, 399Slider 294SmartTable 382SplitApp 197, 289, 446Table 197, 214, 361Text 207Tile 274, 403Timeline 395, 420Toolbar 366, 370, 454ToolbarSpacer 370Tree 236, 237Vererbung 159ViewSettingsDialog 366, 369

Controller 149, 155Basis-Controller 401Datenbindung 237Struktur ab Version 1.30 204Struktur bis Version 1.28 204

Corporate Design 139Cross Origin Request 107CRUD-Operation 231, 333

implementieren 352OData 372

CSS 14, 35, 261, 417anpassen 261Deklaration 35Generator 45Hierarchie 37, 40, 41Klasse 261Parameter 261Selektor 41

CSS (Forts.)Spezifität 41

CSS3 44, 139Custom Control 315, 414Custom Data Binding 249CustomData-Attribut 250, 454Customizing 457

D

Data Binding � DatenbindungData Provider Class 352data-Attribut 192Date 254Datenbankoperation 333Datenbankzugriff 149Datenbindung 191, 210, 211,

226, 450bidirektionale 211Binding-Pfad 242JSON Model 212Kontext 236Muster 212OData Model 212One-Time-Binding 212Resource Model 212Syntax 220Two-Way-Binding 211Typen 211, 232XML Model 212

Datencontainer 234Datendefinition 213Datenmodell 149, 344, 398Daten-Provider-Klasse 336Datentyp 253

Date 254DateTime 255eigener 258Time 255

Datenübertragung, asynchrone 100DateTime 255Datum 254Datum, Ausgabeformat 254DDIC 344Debug-Befehl 186Debugging 181, 182Debug-Modus 195Deklaration, CSS 35Dekrementoperator 63


476

Index

Demokit 115, 157Design Guideline 113Desktopanwendung 152Detailbereich 446, 450Detail-Page 289Development Paradigm � Entwick-

lungsmodellDevice-Bibliothek 445DHTML 47Dialog 311Dispatcher 141do…while-Schleife 73document 76Document Object Model � DOMDokumentkompatibilitätsmodus 24Dokumentkörper 24Dokumenttypdeklaration 21DOM 62, 76

Baum 77DOMContentLoaded 89Eigenschaft 77Manipulation 78, 96

Domain Model 280Drop-down-Liste 33dynamische Webseite 100

E

Eclipse 116, 11732-Bit-Version 11864-Bit-Version 118Code-Template 163Download 117, 118Project Explorer 174Projekt anlegen 151Projekt hochladen 171Projekt importieren 180Proxy-Einstellungen 324Vorschaufunktion 165

ECMAScript 48EDM 328, 398EDMX-Datei 344Eigenschaft, Binding 233Eingabefeld 33Eingabemaske 33Element Binding 239Elternobjekt 77Embedded Deployment 112,

114, 334

encodeURIComponent 249Endgerät 445Endgerät, Simulation 287End-Tag 20Entität modellieren 342Entitätsmenge 329, 336, 350, 427Entitätsmenge lesen 411Entitätstyp 328, 336, 346Entity Data Model 328, 399Entity Set � EntitätsmengeEntwicklertools 181, 261Entwicklungsmodell 152, 156

HTML 152JavaScript 152, 160JSON 152XML 152

Ereignis 84, 94mobile Endgeräte 447Modell 84onAfterRendering 155onBeforeRendering 155onExit 155onInit 155vordefiniertes 155

Ereignisbehandler � Event HandlerEvent Handler 50, 84, 85, 89, 163Event Listener � Event HandlerEvent-Objekt 84, 184Expression Binding 248Expression Breakpoint 183Extended Data Binding 244extend-Funktion 284, 315, 401

F

Faceless Component 278Factory-Funktion 89, 235Favorit � LesezeichenFehleranalyse 284Feldattribut 349Filter, OData 366Firebug 80for…in-Schleife 74Formatfehler 254Formatter 246Formular 33, 308for-Schleife 70Fragment 305, 370Fullscreen-App 288


477

Index

function 50Funktion 57

G

Gateway-Service � OData-ServiceGET 103GET-Methode 33Git 177, 444Git-Historie 441Gold Reflection 201Google Maps 397, 414GridLayout 307Gruppe anlegen 463GW_CORE 333

H

HANDLE_REQUEST 142, 145Hard Reload 314HCP 126HeaderBar 399Hierarchie, CSS 37High Contrast Black 201Host, virtueller 132HTML 14, 19, 139

Attribut 192Dokument 20Dokumentkörper 20Dokumenttypdeklaration 20Element 20Kopfbereich 20Textabsatz 26Textauszeichnung 29Überschriften-Tag 25Validator 19Zeichenkodierung 21

HTML5 19, 20HTML-View 152, 153HTTP_DISPATCH_REQUEST 141HTTP-Anfrage 141HTTP-Datenstrom 321HTTP-Handler 146HTTP-Kommunikation 321HTTP-Methode 328HTTP-Request-Handler 141HTTP-Status setzen 145HTTP-Statuscode 103HTTP-Strom 141

Hybrid-Web-Container 440Hyperlink 29, 84, 328Hypermedia 328Hypertext Markup Language � HTML

I

i18n 227, 280ICF-Controller 141ICF-Knoten 145, 322ICF-Service 115

aktivieren 147anlegen 144Fehleranalyse 148

ICM 141ICM-Monitor 148ICM-Trace 148Icon 316ID

absolute 207relative 207

IDE 117ID-Selektor 40IF_HTTP_EXTENSION 144if-Anweisung 65, 66index.html 169, 170Indexvariable 70Inkognito-Modus 314Inkrementoperator 63, 70Innenabstand 276innerHTML 78Input 199, 224, 257, 378Installation

Cloud Connector 129SAPUI5 112, 114, 115UI5-Eclipse-Plug-in 120

Integrated Development Environment 117

Internationalisierung 227Internet Communication

Manager 141iOS 439IW_BEP 113, 333IW_FND 333


478

Index

J

Java Runtime 117JavaScript 14, 24, 47, 149

Ablauflogik 51Argument 52Bibliothek 87Code einbinden 49do…while-Schleife 73Ereignis 84for…in-Schleife 74for-Schleife 70Funktion 50, 57if 66Kommentar 50Kompressor 187Konstruktor 55Methode 57Objekt 53, 57Objekt-ID 208Punktnotation 56return 52Rückgabe 52Sichtbarkeit von Variablen 60switch 68this 57typeof 64Variablendeklaration 59Variablentyp 59Vererbung 286View 152, 160while-Schleife 71

JavaScript Object Notation � JSONJDBC 231jQuery 14, 87

AJAX-Objekt 104Bibliothek 87DOM-Manipulation 96einbinden 88Ereignis 94Factory-Funktion 89Funktion 90hasAttribute-Selektor 90Methoden verketten 92Objekt 89Punktnotation 92ready-Funktion 89Referenz 88Selektor 89, 90

jQuery-DOM-Funktion.addClass() 98.after() 98.append() 98.appendTo() 98.css() 98.insertAfter() 98.insertBefore() 98.prepend() 98.prependTo() 98.remove() 98.removeClass() 98.wrap() 98

jQuery-Ereignis.bind 95.blur 96.change 96.click 96.dbclick 96.hover 96.keypress 96.keyup 96.mousemove 96.on 95

JScript 47JSON 57, 59, 214

relativer Pfad 215Validator 223View 152

JSON Model 214JSON Model, lokales 424JSON with Padding 104JSONP 104JSON-Validator 409JSONView 331

K

Kachel 270anlegen 461konfigurieren 461

Katalog anlegen 460Klasse

.sapMBtnInner 261CL_HTTP_SERVER 141CSS 261Margin 277Padding 277sap.m.Button 185


479

Index

Klasse (Forts.)sap.ui.base.Event 184sap.ui.core.Component 278sap.ui.core.Control 164sap.ui.core.UIComponent 278

Klassenselektor 41Knoten 77Kommentar, JavaScript 50Kommunikationsschicht 333Kompressor 187Konditionaloperator 66Konsole 48, 184Konstruktor 55Konstruktorfunktion 162Kopfbereich, HTML-Dokument 23kundeneigenes Control 315

L

Label 201Laufzeit 100Laufzeitumgebung 191Laufzeitversion 195Launchpad-Rolle 458, 463Layout 261Layout Control 200Layout Editor 443LDML 254Lesezeichen 288, 296, 301Lesezeichen, Fehler bei Aufruf 297LESS 261Linie, horizontale 26Liste

Drop-down 33Eintrag 26geordnete 26ungeordnete 26

loadData 321Locale Data Markup Language 254Logging � Protokollierunglokale Entwicklung 174Loose Typing 60

M

main.controller.js 170main.view.xml 169manifest.json 279, 400, 404Margin 276

MassageStrip 377Master-Bereich 446, 450Master-Page 289Math 249MessagePage 297MessageToast 204, 320Metadata-Bereich 279Metadaten 329, 400method 33Methode 57Methode, statische 316mobile Anwendung 152Mobile first 152Mobile Lösung 445Mobile Visual Identity (MVI) 201Mockdaten 385, 398Mockserver 385, 387, 444Mockup 392Model 149

ID 244Sichtbarkeit 219

Model View Controller � MVCModel-Provider-Klasse 336, 352MVC 149, 150, 155, 201MVC, Webentwicklung 149

N

Nachfahrselektor 41Named Binding 244Named Model 229Namensraum 181, 197, 246, 401, 450

deklarieren 200XML-View 200

Namespace � NamensraumNaN 62NavContainer 289Navigation 288, 402, 406Negationsoperator 65null 62

O

OASIS 327Objekt 53

Instanz 55Konstruktor 54prototypisches 285, 286semantisches 459


480

Index

Objekt (Forts.)transportierbares 174vordefiniertes 55

Objektorientierung 53OData 231, 327

batch 375Bibliothek 333CRUD 372Filter 331, 365Navigation 331Objekt 336Paging 362Query 331, 365SAP-Annotationen 328Service implementieren 336Servicedokument 329Sorter 365URL 331

OData Channel 333OData Model 231, 232, 347, 360

anlegen 341Editor 339

OData Modeler 126, 337, 385OData-Service 232, 350, 451

aktivieren 353Annotation 383Datenmodell 344Fehleranalyse 148Fehlerprotokoll 359generieren 350Query-Option 357testen 353

ODBC 231Oder-Operator 65Ogee 337, 398onabort 84onblur 84onButtonPressed 320onchange 84onclick 84ondblclick 85onerror 85One-Time-Datenbindung 212One-Way-Datenbindung 211, 231onfocus 85onkeydown 85onkeypress 85onkeyup 85onload 85onmousedown 85

onmousemove 85onmouseout 85onmouseover 85onmouseup 85On-Premise-System 129onreadystatechange 102onreset 85onsearch 367onselect 85onsubmit 85onunload 85Open Data Protocol � ODataopen() 101Operation 328Operator 62Operator, logischer 65

P

Padding 276Paging 361, 362PAM 116Paragraph 20Parent-Child-Datenbindung 239parseFloat 246Parser 220, 242Parser-Fehler 254Pattern 292Pattern, Navigation 288Phishing 323placeAt 164Platinum 201Plattform 139Portalanwendung 391Port-Information 142POST-Methode 33, 103Präsentationsschicht 149Product Availability Matrix 116Projekt

anlegen (Eclipse) 151anlegen (SAP Web IDE) 155importieren 180Template 155

properties-Datei 228Property 317, 329

ändern 342hinzufügen 342

Property Binding 233Protokollierung 48prototypische Vererbung 286


481

Index

prototypisches Objekt 285, 286Prototyp-Kette 284, 286Proxy-Konfiguration 324Proxy-Servlet 324, 381Prüfbedingung 70, 71, 73Publisher 149Punktnotation 56, 92, 312

Q

Query-Option 331, 361, 365

R

Radiobutton 33RatingIndicator 227, 245, 395ready 89readyState 102Rechenoperator 63Referenz-Apps 442RegExp 249Remote Function Call 112Render Manager 316renderer 315Rendering Engine 19Request 141, 321Request Handler 141, 322requestCompleted 217, 431Resource Model 227, 400Response 103, 141Responsive Control 201REST 327, 328return 52, 84RFC 112Roundtrip 141Route definieren 292Routing-Objekt 288, 406RSS-Feed 327, 461Rückgabewert 52, 84

S

Same-Origin-Policy 107, 323SAP Add-On Installation Tool 115SAP Fiori 113, 440SAP Fiori Launchpad 113, 279,

394, 456Administrator 459, 460

SAP Fiori Launchpad (Forts.)Anwendung bereitstellen 456Berechtigung 464Gruppe 463Kachel 461Katalog 460Konfiguration 460Rolle 458Theme 270

SAP Fiori Stencils 392SAP Gateway 112, 232, 327

aktivieren 335Client 355Developer Guide 336Fehleranalyse 148Komponenten 333Laufzeitobjekt 336

SAP Gateway Service Builder 334, 344

SAP HANA Cloud Connector 129, 441, 450, 457

SAP HANA Cloud Connector, Installation 129

SAP HANA Cloud Platform 126SAP HANA Cloud Platform,

Cockpit 127SAP NetWeaver Application Server

ABAP 100, 113, 140, 321SAP Service Marketplace 119SAP UI Development Toolkit for

HTML5 � SAPUI5SAP UI Theme Designer � Theme

DesignerSAP Web IDE 116, 126, 441

Backend-Deployment von Anwendungen 456

Git 444Git-Integration 441Layout Editor 443Lizenz 126lokale Installation 128Mockdaten 385Mockserver 444OData Model Editor 337, 339Template 449Testzugang 126, 128Theme Designer 265

sap.m 152sap.m.App 288sap.m.IconTabBar 197


482

Index

sap.m.List 197sap.m.NavContainer 288sap.m.ObjectHeader 197sap.m.SearchField 197sap.m.SplitApp 197sap.m.Table 197sap.ui.commons 152sap.ui.core 160sap.ui.Device.support.touch 445sap.ui.Device.system.desktop 445sap.ui.Device.system.phone 445sap.ui.Device.system.tablet 445sap.ui.getCore().byId() 207, 209sap.ui.model.odata.ODataModel 360sap.ui.model.Operation-

Mode.Client 232sap.ui.model.Operation-

Mode.Server 232SAP-Annotationen 328, 356, 364SAP-Backend 321SAP-Hinweis 123SAPUI5 22, 115, 143

ABAP-Repository 171Anwendungsobjekt 160Anwendungsprojekt 150API-Referenz 161Bibliothek 117, 152, 160Bootstrapping 192Datentyp 254Demokit 157einchecken 175Grundseite 22Installation 112, 117Klasse 197Laufzeitversion 195MVC 167Plattformen 139Plug-in installieren 120Programmierbeispiele 157Ressource 194Ressourcenpfad 195SDK 157Seitenrumpf 155Sprache ermitteln 231Team Provider 119Theme 201Update-Site 123XML-View 152

SAPUI5 ABAP Repository Team Provider 117, 118, 119, 171, 176, 323

SAPUI5 Tools IDE Plugin 119Schleifendurchlauf 70Schlüsselfeld 343, 346screen 76Scroll-Ereignis 447SDK 157Search 366Select 429Selektor 35, 40, 89semantische Trennung 24semantisches Objekt 459send() 102Server 149Server-Backend 100Serverkontrollblock 141Servicedokument 329Servicekatalog 353Serviceverbindung 449setModel() 220, 232Shell-Control 399Simulator 287Slider 294Smart Control 227, 350, 357, 381Smartphone 446SmartTable 382SMTP 141Snippet 282, 410Software Development Kit 157SOP 107, 323Sortierung, OData 369Spezifität 40SplitApp 289, 446Split-App-Anwendung 289Sprachabhängigkeit 227Sprachdatei 230Standardaktion unterbinden 84Stapelverarbeitung, OData 375Steuerungsschicht 149Style 81style.css 418Styleguide 140Styling 261Suchfeld 366Superklasse 286Support Package 114Swipe Content 447Swipe-Ereignis 447


483

Index

switch 67Systemalias 335Systemarchitektur 112

T

Tabellenelement 32Tabellenparameter 361Table 214, 361Tablet 446Tag 20Target 292Target Mapping 463Task Handler 141TCP/IP 141Team Provider � SAPUI5 ABAP

Repository Team ProviderTemplate 155, 234, 442, 449Textauszeichnung 29Textbereich 33Textknoten 77Theme 201, 261, 267

einbinden 273, 275freigeben 272sichern 272

Theme Designer 265Basis Theme 267Bearbeitungsmodus 269Vorschaufunktion 268

Theming 191, 261this 57this.getView().byId() 207, 209Tile 270, 399, 403Time 255Timeline 395, 420Tomcat-Webserver 165Toolbar 366, 370, 454ToolbarSpacer 370Tooltip 160, 185Touch-Ereignis 447Transaktion

/IWFND/GW_CLIENT 356/IWFND/MAINT_SERVICE 353/UI2/SEMOBJ 459/UI2/SEMOBJ_SAP 459/UI5/THEME_DESIGNER 266/UI5/THEME_TOOL 273LPD_CUST 458PFCG 465

Transaktion (Forts.)SAINT 115SE24 144SE80 457SEGW 336, 344, 352, 383SICF 115, 143, 146SMICM 148SPAM 115SPRO 335

Transportauftrag 174Tree 236Trennung, semantische 24Trusted-/Trusting-Beziehung 112Trusted-RFC-Verbindung 336Two-Way-Datenbindung 211typeof 64Typisierung, dynamische 59Typkonvertierung 64Typselektor 40

U

Übergabewert 52Uhrzeit 255UI-Component � ComponentUI-Control � ControlUI-Mockup 392UI-Prototyping 392undefined 62Und-Operator 65Universalselektor 40Update-Site 117, 123Upload, manueller 178URL-Parameter 231, 388URL-Pattern 292User Experience 113UX 113

V

Validierungsfunktion 256var 60Variable 183

boolesche 66Deklaration 59globale 60integer 70Sichtbarkeit 60


484

Index

VererbungHierarchie 160klassenbasierte 286prototypische 286

Vergleichsoperator 64Versionsprüfung 176Versionsverwaltungssystem 177View 149

anlegen 290hinzufügen 290initialer 151

ViewSettingsDialog 366, 369View-Typ � Entwicklungsmodellvirtueller Host 132Vorschaufunktion 165, 268

W

W3C 19W3C-Standard 84Web IDE � SAP Web IDEWebbrowser 141Webentwicklertools 39Webseite, dynamische 100Webserver, installieren 166Wert-Binding 234while-Schleife 71

window 53, 76Windows Phone 439Workspace 118World Wide Web Consortium 19, 76WYSIWYG-Editor 126, 443

X

XML Model 225XML-Attribut 226XMLHttpRequest 101XML-View 152, 199

Datenänderung 248Objekt-ID 208

Y

YUI Compressor 187

Z

Zeichenverkettung 63Zeilenumbruch 26Zustandslosigkeit 328Zuweisungsoperator 63


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!

Miroslav Antolovic ist bei der bsc solutions GmbH & Co. KG als SAP-Entwickler und -Trainer tätig. Er studierte an der Universität Heidelberg Pharmazie und arbeitete als Java- und Webentwickler. 1999 begann er als Anwendungsent-wickler bei der SAP AG im Product Lifecycle Management, und 2004 wechselte er zur REALTECH AG, bei der er SAP-Add-on-Produkte entwickelte. Ab 2007 war er als Leiter der SAP-Entwicklung bei der SEEBURGER AG tätig, bis er schließlich 2010 zu bsc solutions wechselte.

Miroslav Antolovic

Einführung in SAPUI5484 Seiten, gebunden, 2. Auflage 2015 69,90 Euro, ISBN 978-3-8362-3908-0

www.sap-press.de/3986

Wissen aus erster Hand.

https://www.rheinwerk-verlag.de/einfuhrung-in-sapui5_3986/?GPP=lpn

https://www.facebook.com/rheinwerkverlag

https://plus.google.com/118435207805510651040

http://twitter.com/rheinwerkverlag

Documents

Einführung in SAPUI5