Leseprobe. Kapitel 4:»Entwicklungsumgebung einrichten« Inhaltsverzeichnis. Index. Der Autor. Leseprobe weiterempfehlen.

Transkript

1 Wissen aus erster Hand. Leseprobe In dieser Leseprobe lernen Sie, die SAPUI5-Bibliothek auf einem ABAP-Backend-System zu installieren und die Entwicklungsumgebung in Eclipse einzurichten. Außerdem machen wir Sie mit der cloudbasierten Entwicklungsumgebung SAP Web IDE vertraut. Kapitel 4:»Entwicklungsumgebung einrichten«inhaltsverzeichnis Index Der Autor Leseprobe weiterempfehlen Miroslav Antolovic Einführung in SAPUI5 484 Seiten, gebunden, 2. Auflage ,90 Euro, ISBN

2 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-basierten Umgebung oder in der neuen SAP Web IDE entwickeln. Zusätzlich müssen Sie die SAPUI5-Bibliothek auf dem Backend installieren. Wie Sie dabei vorgehen und wie Sie die Entwicklungsumgebungen auf 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-ManagerSystem 왘 Für die SAP Web IDE benötigen Sie einen installierten SAP HANA Cloud Connector und einen Zugang zur SAP Web IDE. Sollten Sie über kein SAP-Backend-System verfügen, können Sie Ihre Anwendungen auch auf einem lokalen Webserver, z. B. einen Apache-HTTPD-Server (als Download von der Homepage apache.org verfügbar), deployen. Sollten Sie keinen Zugang zum SAP Service Marketplace haben, können Sie die benötigten SAPUI5-Dateien unter herunterladen. Für die ersten Gehversuche ist es auch ausreichend, wenn Sie lediglich Eclipse und die SAPUI5-Frontend-Tools installieren. In diesem Szenario können Sie die Vorschaufunktion in Eclipse nutzen und sich das Ergebnis dort anzeigen lassen. In diesem Fall können Sie Abschnitt 4.1,»SAPUI5-Bibliothek in der SAP Business Suite installieren«, überspringen und direkt mit Abschnitt 4.2.1,»Entwicklungsumgebung in Eclipse einrichten«, bzw. Abschnitt 4.2.2,»SAP Web 111 Lokaler Webserver

3 4 Entwicklungsumgebung einrichten SAPUI5-Bibliothek in der SAP Business Suite installieren 4.1 IDE einrichten«, fortfahren je nachdem, welche der beiden Entwicklungsumgebungen Sie verwenden möchten. Es besteht ein hoher Wartungsaufwand. Der Benutzer muss zum Teil viele URLs zum Aufruf der Anwendungen kennen, da der zentrale Einstiegspunkt des Central Hubs fehlt. Systemarchitektur 4.1 SAPUI5-Bibliothek in der SAP Business Suite installieren Die Entwicklung von Anwendungen in SAPUI5 ist grundsätzlich mit zwei alternativen Systemarchitekturen möglich: Embedded Deployment Von Embedded Deployment spricht man, wenn die SAPUI5-Ressourcen auf jedem SAP-System Ihrer Landschaft installiert werden und auch direkt in diesen Systemen ausgeführt werden. Das heißt, Sie müssen die im Folgenden beschriebenen Schritte für jedes System, z. B. für SAP ERP HCM, SAP CRM, SAP ERP, durchführen. Central Hub Bei der Central-Hub-Architektur installieren Sie eine neue Systemlinie, auf der die Komponente SAP Gateway und alle SAPUI5-Ressourcen liegen. Jede SAPUI5-Anwendung wird auf diesem sogenannten Central Hub deployt und ausgeführt. Der Central Hub ist technisch nichts anderes als ein SAP NetWeaver AS ABAP. Die Datenübermittlung in das jeweilige Backendsystem (SAP ERP HCM, SAP CRM usw.) erfolgt über SAP Gateway über eine Trusted-/ Trusting-Beziehung via Remote Function Call (RFC). Abbildung 4.1 veranschaulicht diese Architektur. Reverse Proxy ABAP- Central-Hub (SAP Gateway + SAPUI5) Abbildung 4.1 Central-Hub-Systemarchitektur ABAP-Backend-Server (SAP Business Suite) SAP ERP SAP CRM SAP SRM SAP SCM SAP HANA XS Engine SAP HANA/ beliebige Datenbank Das Embedded-Deployment-Szenario hat drei gravierende Nachteile: Die Sicherheit zu gewährleisten ist aufwendig, vor allem beim mobilen Datenzugriff. Beim Central Hub müssen Sie lediglich einen Server überwachen, wenn Sie dagegen den mobilen Datenzugriff auf allen SAP-Systemlinien zulassen, müssen Sie den Netzwerkverkehr auf allen Servern verstärkt überwachen. Aus diesen Gründen hat sich die Central-Hub-Architektur bewährt und 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 des Schreibens dieses Buches ist das Release Dieser ABAP-Stack beinhaltet bereits die SAPUI5- und SAP-Gateway-Komponenten, so dass Sie keine zusätzliche Softwarekomponente installieren müssen. Auf den Backend-Systemen der SAP Business Suite müssen Sie lediglich die Softwarekomponente für SAP Gateway, IW_BEP, installieren. In den neueren Enhancement Packages (EHPs) der SAP Business Suite ist jedoch auch diese Softwarekomponente integriert, nicht zuletzt, weil SAP Fiori auf dieser Architektur aufbaut. SAP Fiori SAP Fiori ist mehr als nur eine Sammlung von SAPUI5-basierten Apps. Es handelt sich um eine neue SAP-Philosophie, wie die User Experience (UX) über strikte Design Guidelines und eine rollen- und aufgabenbasierte Implementierung von Anwendungen verbessert werden kann. Technisch handelt es sich um SAPUI5-Anwendungen, die zentral auf dem Central Hub über das SAP Fiori Launchpad ausgeführt werden können. Auch wenn Sie sich als Nicht-SAP-Mitarbeiter nicht an die Design Guidelines für SAP Fiori halten müssen, empfehle ich Ihnen, sich mit diesen zu beschäftigen. Diese Richtlinien wurden von erfahrenen UX-Designern erstellt, und Sie können von diesem Wissen profitieren. Unter experience.sap.com können Sie sich über den Ansatz von SAP Fiori und die daraus 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 die Anwendungen. Auch unter Sicherheitsaspekten ist die Central-Hub- Architektur von Vorteil. Es ist wesentlich einfacher, ein einzelnes System meistens mit einem vorgeschalteten Reverse Proxy netzwerk- Wahl des richtigen Szenarios

4 4 Entwicklungsumgebung einrichten SAPUI5-Bibliothek in der SAP Business Suite installieren 4.1 Installation mit AS ABAP 7.31 technisch abzusichern und zu überwachen, als mehrere Systeme. Der einzige Nachteil der Central-Hub-Architektur ist der Betrieb der zusätzlichen Systemlinie mit den damit verbundenen Kosten. Viele SAP-Kunden entscheiden sich in der Pilotphase dazu, mit dem Embedded Deployment zu starten. Damit können Sie in einem Proof of Concept zunächst einmal die neue Technologie evaluieren und im Anschluss die neue Central-Hub-Systemlinie aufbauen. Aus diesem Grund beschreibe ich an dieser Stelle zunächst die Installation auf einem existierenden ABAP-Stack Möchten Sie direkt die Central-Hub-Architektur umsetzen, können Sie diesen Schritt überspringen und einen Central Hub auf der Basis von SAP NetWeaver 7.40 installieren. Hier ist, wie bereist erwähnt, die SAPUI5-Komponente bereits enthalten. 2. Laden Sie die berechneten Support Packages und das Stack-XML herunter. Entpacken Sie anschließend die Support Packages in das EPS-Verzeichnis, und installieren Sie die Pakete mit dem SAP Add- On Installation Tool (Transaktion SAINT), bzw. führen Sie ein Update (Transaktion SPAM) durch. Eine ausführliche Installationsanleitung finden Sie im SAP-Hinweis Ob die Installation erfolgreich war, können Sie durch den Aufruf der URL überprüfen, wobei Sie <HOSTNAME> und <SERVICE> durch die Werte Ihres SAP-Systems ersetzen. Ihnen sollte als Ergebnis das SAP UI development toolkit for HTML 5 angezeigt werden (siehe Abbildung 4.3). SAP UI Development Toolkit for HTML5 SAPUI5 ist als Add-on in die SAP Business Suite integriert. Die Installationspakete finden Sie im SAP Software Download Center ( 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 finden 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 Produktversion (siehe Abbildung 4.2). Abbildung 4.3 SAP UI Development Toolkit for HTML 5 Sollten Sie ein anderes Ergebnis erhalten, prüfen Sie, ob der entsprechende Service aktiv ist. Gehen Sie dazu in die Transaktion SICF, und aktivieren Sie gegebenenfalls den ICF-Service (Internet Communication Framework) default_host/sap/public/bc/ui5_ui5/ (siehe Abbildung 4.4). ICF-Service aktivieren Abbildung 4.2 Maintenance Optimizer im SAP Solution Manager

5 4 Entwicklungsumgebung einrichten Frontend-Tools einrichten 4.2 Die in diesem Buch gezeigten Beispiele basieren auf der zum Zeitpunkt des Schreibens dieses Buches aktuellen Version SAP_UI 740 SP Prüfen Sie daher mithilfe der Product Availability Matrix (PAM), die Sie unter aufrufen können, welches die aktuell unterstützte Version ist, und installieren Sie diese. Bei Eclipse handelt es sich um ein Open-Source-Projekt. Eclipse wird als Integrated Development Environment (integrierte Entwicklungsumgebung, 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 Web IDE wird in der Cloud zur Verfügung gestellt und als Nachfolger der Eclipse-Entwicklungsumgebung betrachtet. In den folgenden Abschnitten zeige ich Ihnen die Einrichtung dieser beiden Umgebungen. Wir beginnen mit der Eclipse-Umgebung Entwicklungsumgebung in Eclipse einrichten Die UI-Entwicklungstools sind Teil der SAPUI5-Bibliothek. Es handelt sich dabei um eine Reihe von Eclipse-basierten Tools und Editoren, die Sie bei der Entwicklung von SAPUI5-Anwendungen unterstützen. Der SAPUI5 ABAP Repository Team Provider unterstützt Sie beim Einchecken der in Eclipse entwickelten Anwendungen in ein ABAP-Backend-System. Die Entwicklerwerkzeuge für SAPUI5 müssen separat als Eclipse- Plug-ins installiert werden. Prüfen Sie vor der Eclipse-Installation, ob die installierte Laufzeitumgebung Java Runtime Environment (JRE) mindestens in der Version 1.6 vorliegt, und aktualisieren Sie die JRE gegebenenfalls vor der Installation des Plug-ins. Öffnen Sie das Java Control Panel über Start Systemsteuerung Programme Java. Über den Button Info wird Ihnen Ihre JRE-Version angezeigt. Eclipse-Tools Installationsvoraussetzungen Eclipse oder SAP Web IDE Abbildung 4.4 UI5-Service aktivieren 4.2 Frontend-Tools einrichten Nach der erfolgreichen Installation der Backend-Komponente müssen Sie nun noch die SAPUI5-Frontend-Tools installieren. Hier stehen Ihnen zwei Möglichkeiten zur Verfügung: Eclipse-Umgebung installieren Welche Eclipse-Version von SAPUI5 aktuell unterstützt wird, erfahren Sie unter Im Abschnitt SAPUI5 Procedure erfahren Sie, für welche Eclipse-Versionen eine Update- Site für die SAPUI5-Entwicklungswerkzeuge angeboten wird. Von dieser Update-Site können Sie die SAPUI5-Entwicklertools installieren (siehe auch Abbildung 4.12). Zum Zeitpunkt des Schreibens dieses Buches wurden die Eclipse-Versionen Luna und Mars unterstützt, die neueste Version Neon noch nicht. Eclipse-Plug-ins für SAPUI5 die SAP Web IDE, eine cloudbasierte Entwicklungsumgebung für SAPUI5 Haben Sie noch keine Eclipse-Umgebung auf Ihrem Rechner installiert, laden Sie als Erstes die Eclipse IDE for Java EE Developers unter herunter. Hat Ihr SAP-Backend-System Eclipse IDE for Java EE Developers

6 4 Entwicklungsumgebung einrichten Frontend-Tools einrichten 4.2 Eclipse starten den Stand SAP NetWeaver 7.40 Service Pack 7 oder kleiner, müssen Sie die 32-Bit-Version von Eclipse herunterladen, da der SAPUI5 ABAP Repository Team Provider nur mit der 32-Bit-Version funktioniert. Ab Service Pack 8 wird auch die 64-Bit-Version unterstützt. Nach dem Entpacken der heruntergeladenen ZIP-Datei können Sie Eclipse direkt mit einem Doppelklick auf eclipse.exe starten. Eclipse läuft im Arbeitsspeicher und muss daher nicht installiert werden. Beim ersten Start von Eclipse werden Sie nach einem Verzeichnis für den Workspace gefragt (siehe Abbildung 4.5). Bei der Entwicklung in Eclipse arbeiten Sie in Projekten, und der Workspace ist der Verzeichnisort auf Ihrer Festplatte, an dem die Dateien Ihrer Projekte abgelegt werden. sprechende Version vom SAP Service Marketplace herunterladen. Aus diesem Grund beschreibe ich an dieser Stelle beide Vorgehensweisen. Für die Entwicklung benötigen Sie die folgenden drei Kernkomponenten, die Sie in der folgenden Reihenfolge installieren: Kernkomponenten der SAPUI5-Tools ABAP IN ECLIPSE SAPUI5 TOOLS IDE PLUGIN SAPUI5 TEAM PROV IDE Installation vom SAP Service Marketplace Welche SAPUI5-Version auf Ihrem ABAP-System installiert ist, finden Sie am einfachsten heraus, indem Sie das Development Toolkit aus Ihrem System heraus aufrufen, wie in Abschnitt 4.1,»SAPUI5- Bibliothek in der SAP Business Suite installieren«, beschrieben (siehe Abbildung 4.3). Laden Sie dann vom SAP Service Marketplace zunächst die beiden benötigten SAPUI5-Komponenten SAPUI5 TOOLS IDE PLUGIN und SAPUI5 TEAM PROV IDE herunter. Sie finden die Dateien im SAP Service Marketplace unter Support Packages and Patches A-Z-Index N UI Add-On for NetWeaver <Entsprechendes EHP-/ERP-Release>. Komponenten herunterladen Fügen Sie die jeweils aktuelle Version der beiden Komponenten über den Button Zum Download Basket hinzufügen zu Ihrem Download-Basket hinzu. Für den SAPUI5 ABAP Repository Team Provider benötigen Sie zusätzlich noch das Plug-in für ABAP in Eclipse. Dieses finden Sie am einfachsten, indem Sie im SAP Software Download Center nach»abap in Eclipse«suchen. Fügen Sie auch diese Datei Ihrem Download-Basket hinzu. Laden Sie im Anschluss die drei ZIP- Dateien mithilfe des SAP Download Managers herunter. Abbildung 4.5 Verzeichnis für den Eclipse-Workspace angeben Sie können auch mit mehreren Workspaces arbeiten und den Workspace 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 Version installieren. Sollte sich Ihr ABAP-System auf einem älteren SAPUI5-Releasestand befinden und möchten Sie in Eclipse die gleiche Version wie auf Ihrem Backend installieren, müssen Sie die ent- Je nachdem, welche Version Sie installieren möchten, benötigen Sie noch weitere Standard-Plug-ins. So setzt die zum Zeitpunkt des Schreibens 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 dieser Stelle einen Weg zur Installation der Komponenten, der für mich am besten funktioniert hat. Weitere Informationen zur Installation finden Sie in der Installationsdokumentation. Standard-Plug-ins

7 4 Entwicklungsumgebung einrichten Frontend-Tools einrichten 4.2 SAPUI5-Plug-ins installieren Nachdem Sie die Dateien aus dem SAP Service Marketplace heruntergeladen haben, können Sie diese in Eclipse installieren: 1. In der Eclipse-Oberfläche starten Sie dazu im Menü über den Pfad Help Install New Software den Installationsassistenten (siehe Abbildung 4.6). Abbildung 4.8 Archivdatei einbinden 4. Wählen Sie nun über den Installationsassistenten das gewünschte Plug-in aus, und bestäigen Sie Ihre Auswahl mit Next (siehe Abbildung 4.9). Abbildung 4.6 Plug-in-Komponenten installieren 2. Da die SAPUI5-Tools lokal auf Ihrer Festplatte gespeichert wurden, müssen Sie diese manuell in den Installationsassistenten einbinden. 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 entsprechende ZIP-Datei aus. Abbildung 4.9 Komponenten zur Installation auswählen Abbildung 4.7 SAPUI5-Tools auswählen 3. Bestätigen Sie Ihre Auswahl mit OK (siehe Abbildung 4.8). 5. Eclipse prüft nun die Installationsvoraussetzungen für das Plug-in. In unserem Beispiel fehlt als Voraussetzung für die Installation des Plug-ins das Eclipse-Plug-in Graphiti (siehe Abbildung 4.10)

8 4 Entwicklungsumgebung einrichten Frontend-Tools einrichten Wählen Sie das Plug-in aus, und bestätigen Sie Ihre Auswahl mit Next. 8. Akzeptieren Sie im Folgebild die Lizenzvereinbarungen, und starten Sie über den Button Finish die Installation. Bei manchen Komponenten erscheint ein Warnhinweis, dass Sie unsignierte Komponenten 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 Eclipse erneut zu installieren. Sollten Sie eine weitere Fehlermeldung erhalten, wiederholen Sie das beschriebene Verfahren so lange, bis Sie alle erforderlichen Plug-ins installiert haben. Abbildung 4.10 Hinweis auf fehlendes Plug-in 6. Gehen Sie daher über Back einen Schritt zurück, tragen Sie unter Work with die Update-Site der verwendeten Eclipse-Version ein, und suchen Sie dann nach dem erforderlichen Plug-in, wie in Abbildung 4.11 dargestellt. Alle vorausgesetzten Plug-ins installieren Der beschriebene Weg ist zwar sehr mühsam, ist aber die einzige Möglichkeit, eine Version passgenau zu installieren. Für die von mir verwendete Version musste ich diese Schritte für die folgenden Plug-ins wiederholen: EMF Query EMF Validation EMF Model Transaction Workbench Integration Nach der erfolgreichen Installation des Plug-ins für ABAP in Eclipse wiederholen Sie den Vorgang für die beiden Plug-ins für die SAPUI5- Tools-IDE und den SAPUI5 ABAP Repository Team Provider. Damit ist die Installation der Eclipse-Entwicklungsumgebung für SAPUI5 abgeschlossen. SAP-Hinweise Die zum Zeitpunkt des Schreibens dieses Buches aktuelle Version SAPUI SP13 setzt z. B. ABAP in Eclipse in der Version 2.44 voraus. Welche Versionen Sie jeweils installieren müssen, können Sie den SAP-Hinweisen und entnehmen. Abbildung 4.11 Installation des fehlenden Plug-ins Installation von der Update-Site Wenn sich Ihr ABAP-Backend annähernd auf dem aktuellen Stand befindet, können Sie die SAPUI5-Update-Site für die Installation nutzen. Diese Vorgehensweise hat zwar den Nachteil, dass Sie nur die gerade aktuellste Version installieren können, bringt aber den großen Vorteil mit sich, dass die vorausgesetzten Plug-ins automatisch Aktuelle Version installieren

9 4 Entwicklungsumgebung einrichten Frontend-Tools einrichten 4.2 mit installiert werden. Dadurch vereinfacht sich der Installationsprozess erheblich. 1. Auf der Internetseite finden Sie unter SAPUI5 Procedure den Link zu der entsprechenden Update-Site: also z. B. für die Eclipse- Version Mars. 2. Starten Sie über den Menüpfad Help Install New Software den Installationsassistenten, und tragen Sie unter Work with die passende Update-Site ein. 3. Wählen Sie die gewünschten Komponenten aus, wie in Abbildung 4.12 zu sehen, und starten Sie die Installation über Next. Eclipse-Komponenten aktualisieren Es wird empfohlen, die Eclipse-Komponente Eclipse IDE for Java EE Developer regelmäßig zu aktualisieren. Diese Komponente beinhaltet die Codevervollständigung, die in niedrigeren Versionen zu Abstürzen der Anwendung führen kann. Um eine Komponente zu aktualisieren, 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 Versionen der installierten Komponenten anzeigen lassen. Übersicht der installierten Komponenten Abbildung 4.13 Information zu den installierten Eclipse-Komponenten Um ein Update durchzuführen, markieren Sie die entsprechende Komponente und klicken auf den Button Update (siehe Abbildung 4.14). Update der installierten Komponenten Abbildung 4.12 Installation über die Update-Site Abbildung 4.14 Installierte Komponenten aktualisieren

10 4 Entwicklungsumgebung einrichten Frontend-Tools einrichten 4.2 Es erscheint nun ein Pop-up-Fenster mit den verfügbaren Updates. Bestätigen Sie die Installation mit Next, akzeptieren Sie die Lizenzvereinbarungen, und starten Sie die Installation mit Install. Als Alternative zu Eclipse stelle ich Ihnen nun die SAP Web IDE vor SAP Web IDE einrichten Die SAP Web IDE ist eine browserbasierte Entwicklungsumgebung, die auf der SAP HANA Cloud Platform (HCP) läuft. Sie wurde speziell für die Entwicklung von SAPUI5- und SAP-Fiori-Anwendungen konzipiert und soll langfristig alle bisherigen Tools und Add-ons für Eclipse ersetzen. Die SAP Web IDE stellt u. a. einen WYSIWYG-Editor (»What you see is what you get«) zur Verfügung, wie er ähnlich in Eclipse über das AppBuilder-Plug-in realisiert ist. Außerdem finden Sie hier einen OData Modeler, der den Funktionen des Ogee-Plugins in Eclipse entspricht. Verfügen Sie über die erforderliche Entwicklerlizenz, können Sie sich über die URL am HCP Cockpit 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). An HCP anmelden Einsatzvarianten Grundsätzlich haben Sie drei Möglichkeiten, die SAP Web IDE zu nutzen, wobei nicht jede Variante für die produktive Nutzung freigegeben ist: SAP Web IDE auf der HCP Diese Möglichkeit ist für den produktiven Einsatz freigegeben. Testzugang zur SAP Web IDE Es gibt einen kostenlosen Testzugang, der nicht für die produktive Nutzung freigegeben ist. Abbildung 4.15 SAP HANA Cloud Platform Cockpit 2. Klicken Sie in der Spalte Application auf webide, wird Ihnen die URL zur SAP Web IDE angezeigt (siehe Abbildung 4.16). Lokale Version der SAP Web IDE Auch die Verwendung dieser Variante ist nur zu Testzwecken erlaubt. In den folgenden Abschnitten erkläre Ihnen die Einrichtung dieser drei Varianten der SAP Web IDE. Entwicklerlizenzen SAP Web IDE auf der SAP HANA Cloud Platform Im Gegensatz zu den Eclipse-Plug-ins ist die SAP Web IDE kostenplichtig. Entsprechende Lizenzen können Sie über den SAP Store beziehen ( Abbildung 4.16 Link zur SAP Web IDE 3. Über diesen Link erreichen Sie die SAP Web IDE. Beim ersten Öffnen sehen Sie den Willkommensbildschirm aus Abbildung 4.17 und können sofort mit der Entwicklung starten

11 4 Entwicklungsumgebung einrichten Frontend-Tools einrichten 4.2 Funktionen der SAP Web IDE In Kapitel 10,»Beispielentwicklung einer SAP-Fiori-App«, werden wir ein Anwendungsbeispiel mithilfe der SAP Web IDE implementieren, und Sie werden die wichtigsten Funktionen dieser Entwicklungsumgebung kennenlernen. SAP HANA Cloud Connector installieren und konfigurieren Unabhängig davon, ob Sie sich für den kostenlosen Testzugang oder eine produktive SAP Web IDE entscheiden damit diese cloudbasierte Webanwendung mit Ihren ABAP-Backendsystemen kommunizieren kann, müssen Sie den sogenannten SAP HANA Cloud Connector installieren und konfigurieren. Der Cloud Connector stellt eine sichere Verbindung zwischen der SAP Web IDE in der Cloud und Ihren On-Premise-Systemen her. Wie in Abbildung 4.18 veranschaulicht, installieren Sie den SAP HANA Cloud Connector auf einem separaten Server und verbinden Ihre On-Premise-Systeme über einen sicheren SSL-Tunnel (Secure Sockets Layer) mit der Cloud-Instanz. Abbildung 4.17 Startbildschirm der SAP Web IDE Testzugang zur SAP Web IDE Der Testzugang zur SAP Web IDE wird ebenfalls über die HCP bereitgestellt, und der Zugriff erfolgt fast genau so wie beim produktiven HCP-Account, lediglich die URL zum HCP Cockpit lautet anders: Hier können Sie sich für einen nicht produktiv nutzbaren Testzugang registieren. Nach Erhalt der Bestätigungs- können Sie sich genau wie beim produktiven Zugang am HCP Cockpit anmelden und finden die URL zur SAP Web IDE dort ebenfalls unter Subscriptions. Lokale Installation der SAP Web IDE Im SAP Community Network (SCN) können Sie den Quellcoude und eine Anleitung zur Installation einer lokalen SAP Web IDE unter der URL herunterladen. Auch diese Version ist nicht für den produktiven Einsatz freigegeben. SAP Web IDE (SAP HANA Cloud Platform) SAP HANA Cloud Connector Abbildung 4.18 Rolle des SAP HANA Cloud Connectors On-Premise-Landschaft Den SAP HANA Cloud Connector können Sie unter der URL tools.hana.ondemand.com herunterladen. Wählen Sie hier die für Ihr Betriebssystem passende Version aus (siehe Abbildung 4.19), und installieren Sie diese, wie in der Dokumentation beschrieben. Installation

12 4 Entwicklungsumgebung einrichten Frontend-Tools einrichten Melden Sie sich nun als Administrator am SAP HANA Cloud Connector an. Sollten Sie nicht über Administratorrechte verfügen, wenden Sie sich für die nachfolgenden Schritte an den verantwortlichen Administrator. 4. Legen Sie eine neue Verbindung an, indem Sie im Bereich Account Dashboard auf Add klicken (siehe Abbildung 4.21). Abbildung 4.19 Download des SAP HANA Cloud Connectors Verbindung einrichten Nachdem Sie den SAP HANA Cloud Connector installiert haben, können Sie die Verbindung zur SAP Web IDE über die Administrationsoberfläche herstellen: 1. Rufen Sie dazu das Cockpit Ihres HCP-Accounts unter der URL (für produktive Instanzen) bzw. (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 SAP HANA Cloud Connectors. Abbildung 4.21 Neue Verbindung anlegen 5. Tragen Sie nun die Verbindungsdaten, wie in Abbildung 4.22 zu sehen, ein. Wählen Sie als Landscape Host»hana.ondemand.com«für den produktiven Zugang bzw.»hanatrial.ondemand.com«bei Verwendung des Testzugangs. Als Account Name geben Sie die Account-ID ein, die Sie zuvor nachgesehen haben. In den Feldern Account User und Password geben Sie Ihren Benutzernamen und Ihr Passwort ein. Abbildung 4.20 Name des HCP-Accounts abfragen Abbildung 4.22 SAP HANA Cloud Connector konfigurieren

13 4 Entwicklungsumgebung einrichten Frontend-Tools einrichten 4.2 Virtueller Host 6. Nachdem Sie Ihre Eingaben mit OK bestätigt haben, stellt der SAP HANA Cloud Connector eine Verbindung zur HCP her. Wenn Sie alle Daten richtig eingegeben haben, erscheint ein neuer Eintrag im Account Dashboard (siehe Abbildung 4.23). Eine aktive Verbindung wird mit einem grünen Symbol angezeigt. Abbildung 4.23 Neuer Account im SAP HANA Cloud Connector Als nächsten Schritt verbinden Sie Ihr ABAP-Backend-System mit dem Cloud Connector. Dies geschieht durch einen sogenannten virtuellen Host. 1. Wechseln Sie dazu in den Bereich Access Control, und klicken Sie auf Add 2. Im folgenden Pop-up-Fenster geben Sie einen virtuellen Host und einen virtuellen Port an (siehe Abbildung 4.24). Sie können hier Ihrer Kreativität freien Lauf lassen, Sie müssen sich die Angaben nur merken, da Sie diese im Folgeschritt wieder benötigen. 3. Als Internal Host und Internal Port tragen Sie die Daten Ihres Central Hubs bzw. die Daten des Systems, auf dem SAP Gateway läuft, ein. 4. Sichern Sie Ihre Eingaben. Als nächsten Schritt tragen Sie die erreichbaren Ressourcen auf dem ABAP-Backend-System ein. Letztlich geben Sie an dieser Stelle ICF- Pfade bekannt (siehe auch Abschnitt 4.1,»SAPUI5-Bibliothek in der SAP Business Suite installieren«), die über den SAP HANA Cloud Connector erreichbar sein sollen. Markieren Sie dazu im oberen Bereich Mapping Virtual To Internal System den Eintrag mit Ihrem virtuellen Host. Im unteren Bereich erscheint nun eine neue Tabelle, in der Sie über Add die Ressourcen hinzufügen können, wie in Abbildung 4.25 gezeigt. Ressourcen hinzufügen Abbildung 4.25 Ressourcen hinzufügen Abbildung 4.24 System-Mapping im SAP HANA Cloud Connector 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

14 4 Entwicklungsumgebung einrichten Frontend-Tools einrichten 4.2 Als Ergebnis sollten Sie nun vier Einträge in der Ressourcen-Tabelle mit dem Status resource is enabled sehen, der durch ein grünes Symbol erkennbar ist (siehe Abbildung 4.26). 2. Neben der URL müssen Sie noch drei zusätzliche Attribute pflegen. Klicken Sie dazu auf New Property, und geben Sie die folgenden Eigenschaften und Werte ein:»webideenabled«:»truewebidesystem«:»<system-id Ihres Central Hubs>WebIDEUsage«:»odata_abap.ui5_execute_abap«Nach dem Sichern Ihrer Einstellungen können Sie diese nun in der SAP Web IDE testen: Verbindung testen SAP Web IDE anbinden Abbildung 4.26 Anzeige der verfügbaren Ressourcen Damit ist der SAP HANA Cloud Connector konfiguriert und mit dem SAP-Gateway-System verbunden. Als nächsten Schritt verbinden Sie die SAP Web IDE mit dem SAP HANA Cloud Connector: 1. Wechseln Sie dazu wieder in das HCP Cockpit. Legen Sie im Bereich Destination eine neue Verbindung an. An dieser Stelle kommt der virtuelle Host ins Spiel. Wie Sie Abbildung 4.24 entnehmen können, habe ich als virtuellen Host sapui5.buch und als virtuellen Port 6666 gewählt. Daraus ergibt sich die URL sapui5.buch:6666, wie in Abbildung 4.27 zu erkennen. 1. Starten Sie die SAP Web IDE wie im Abschnitt»SAP Web IDE auf der 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 Projekts startet. 3. Wählen Sie im ersten Schritt zur Demonstration einmal das Template SAP Fiori Full Screen Application aus (siehe Abbildung 4.28), und klicken Sie auf Next. Abbildung 4.28 Template für eine SAP-Fiori-Anwendung in der SAP Web IDE auswählen Abbildung 4.27 SAP Web IDE an den SAP HANA Cloud Connector anbinden 4. Geben Sie im Folgebild einen Projektnamen ein, z. B.»sapui5- Buch«, und klicken Sie auf Next (siehe Abbildung 4.29)

15 4 Entwicklungsumgebung einrichten Frontend-Tools einrichten 4.2 Abbildung 4.29 Projektnamen für die Entwicklung eingeben 5. Jetzt kommt der eigentlich spannende Teil: Im Folgebild können Sie die Datenverbindung auswählen. Wenn Sie alles richtig konfiguriert haben, können Sie wie in Abbildung 4.27 unter Service Catalog den Eintrag zu Ihrem Central Hub sehen. Die SAP Web IDE liest nun alle OData-Services von diesem System ein und zeigt diese im unteren Teil des Bildes an (siehe Abbildung 4.30). Geschafft! Können Sie die Services hier sehen, funktioniert die Verbindung zwischen der SAP Web IDE und dem SAP HANA Cloud Connector sowie zwischen dem SAP HANA Cloud Connector und dem SAP-Backend-System. Auch wenn ich mir sehr gut vorstellen kann, dass es Sie jetzt in den Fingern juckt und Sie dieses Beispiel gerne zu Ende bringen möchten, muss ich Sie leider an dieser Stelle noch ein paar Seiten lang vertrösten. Sie können den Wizard an dieser Stelle abbrechen, ich kann Ihnen jedoch versprechen, dass wir in Kapitel 10,»Beispielentwicklung einer SAP-Fiori-App«, wieder an diese Stelle zurückkehren werden und dieses Beispiel zu Ende bringen. Dafür benötigen Sie zunächst noch ein besseres Verständnis von OData, SAP Gateway und natürlich auch SAPUI5. Bevor Sie die erste SAPUI5-Seite anlegen, erläutere ich Ihnen daher im folgenden Kapitel die möglichen Entwicklungsszenarien und die Kommunikation zwischen dem Browser und dem SAP-Backend näher. Im Anschluss daran lernen Sie das Architekturmuster Model View Controller (MVC) kennen und sind damit bestens gerüstet, um mit 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 die Beispiele in diesem Buch in Eclipse oder der SAP Web IDE zeige. Die SAP Web IDE ist eine zukunftsträchtige IDE, zum Zeitpunkt des Schreibens dieses Buches ist Eclipse jedoch nach wie vor sehr stark verbreitet. Bei einigen Aufgaben, z. B. beim Anlegen eines Projekts, wie in diesem Abschnitt gezeigt, ist der Unterschied zwischen der SAP Web IDE und Eclipse gering. Auch bei der eigentlichen Entwicklung unterscheidet sich die 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 besser. Die Stärken der SAP Web IDE liegen in den zur Verfügung gestellten Templates und Plug-ins, die es sehr einfach machen, auch komplexere Anwendungen geführt durch einen Assistenten zu erstellen. Daher habe ich mich dazu entschlossen, die Beispiele in diesem Buch zunächst in Eclipse zu zeigen. In Kapitel 10,»Beispielentwicklung einer SAP-Fiori-App«, werdern Sie dann eine Genehmigungs-App in der SAP Web IDE entwickeln. In diesem Kapitel werden Sie die Stärken der SAP Web IDE kennenlernen. Selbstverständlich können Sie auch alle Beispiele in der SAP Web IDE oder alle Beispiele in Eclipse entwickeln. Abbildung 4.30 Servicekatalog aus dem Central Hub

16 Inhalt Einleitung... 1 HTML5 und CSS Einführung in HTML Grundgerüst eines HTML-Dokuments Wichtige Sprachelemente... Einführung in CSS Allgemeiner Aufbau CSS in HTML einbinden Selektoren Beispiel JavaScript Grundlagen Protokollierung Positionierung von JavaScript-Code Kommentare Funktionen Objekte... Variablen... Operatoren Rechenoperatoren Inkrement- und Dekrementoperatoren Zuweisungsoperatoren Vergleichsoperatoren Operator»typeof« Logische Operatoren... Kontrollstrukturen Bedingungen und Schleifen Anweisung»if« Anweisung»switch« for-schleife while-schleife do while-schleife for in-schleife... Document Object Model DOM-Baum

17 Inhalt Inhalt Elemente ansprechen DOM-Manipulation Ereignisse jquery Grundlagen Selektoren und Ereignisse Selektoren Ereignisse DOM-Manipulation AJAX Entwicklungsumgebung einrichten SAPUI5-Bibliothek in der SAP Business Suite installieren Frontend-Tools einrichten Entwicklungsumgebung in Eclipse einrichten SAP Web IDE einrichten Erste Schritte in SAPUI Webentwicklung auf dem SAP NetWeaver Application Server ABAP Model-View-Controller-Architekturmuster SAPUI5-Entwicklungsprojekt anlegen Projekt in Eclipse anlegen Projekt in der SAP Web IDE anlegen SAPUI5-Demokit Ihre ersten SAPUI5-Anwendungen SAPUI5-Anwendung auf Basis eines JavaScript-Views SAPUI5-Anwendung auf Basis eines XML-Views Anwendung in das Backend laden Download und Import der Beispiele Debugging Eigene Ressourcen debuggen Core-Komponenten debuggen SAPUI5-Laufzeitumgebung Initialisierung der Anwendung Bootstrapping Generierung des Model-View-Controller- Musters in SAPUI Modelle zur Datenbindung JSON Model XML Model Resource Model OData Model Datenbindungstypen Property Binding Aggregation Binding Element Binding Named Binding Extended Data Binding Complex Binding Expression Binding Custom Data Binding Weitere Techniken in SAPUI SAPUI5-Datentypisierung Datum Uhrzeit Datum und Uhrzeit Datentypisierung zur Eingabeprüfung verwenden Eigene Datentypen Layoutanpassungen CSS anpassen Theme Designer Standardabstände Components Component anlegen Automatische Instanziierung des Views View kontextabhängig laden Navigation Fehlerseite bei falschem Aufruf View-übergreifende Werteübergabe

18 Inhalt Inhalt 7.4 Fragments Dynamisches Fragment in einem View Fragment als Pop-up-Fenster Kundeneigene Controls Kommunikation mit dem SAP-Backend Systemanbindung mit SAP Gateway Open Data Protocol SAP Gateway Installation Konfiguration OData-Service implementieren Service definieren Service implementieren Service aktivieren Service testen OData-Service konsumieren Datenbindung Query-Optionen CRUD-Operationen Stapelverarbeitung Smart Controls Mit Mockdaten arbeiten Anwendungsbeispiel Grundgerüst der Anwendung Grundgerüst erweitern Bereitstellung über das SAP Fiori Launchpad Launchpad-Rolle anlegen Semantisches Objekt pflegen SAP Fiori Launchpad Administrator Berechtigungen anlegen Anhang A Weiterführende Informationsquellen B Über den Autor Index Beispielentwicklung einer Portalanwendung User-Interface-Design entwerfen Datenmodell erstellen Benutzeroberfläche implementieren Grundgerüst der Portalanwendung Home-View Routenplaner Aufgabenliste Zeiterfassung Urlaubsantrag Beispielentwicklung einer SAP-Fiori-App SAP Web IDE Mobile Lösungen mit SAPUI5 entwickeln

19 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 148 ABAP Dictionary 344 ABAP in Eclipse 119 ABAP Workbench 352 ABAP-Dictionary-Struktur importieren 344 Abschnitt 20 Abstand 276 action 33 ActionSheet 160 addeventlistener() 85 addstyleclass 261, 264 Adressierbarkeit 328 Aggregation 160, 234 Aggregation Binding 234 Aggregation Binding, FactoryFunktion 235 AJAX 100, 321 asynchrone Verarbeitung 102 Aufruf 217 Objekt 101, 104 synchrone Verarbeitung 102 alert 53 Android 439 Anfangs-Tag 20 Anfrage 321 Animation 82 Anker 30 Anmeldesprache 228 Annotation 364, 383 Annotation Binding 350, 364 Annotation, OData 227 Apache Tomcat 166 API-Referenz 161, 441 App 399, 445 Referenz-App 442 Template 442 App Descriptor 279 App-Control 288, 292 Applikationsdaten 149 apply 285 Architekturmuster 149 Argument 52 Array 74, 75, 77 Assoziation 329 Asynchronous JavaScript and XML 씮 AJAX Atom Publishing 327 Atom Syndication 327 Attribut

20 Index Index Attribut-Binding 226 Ausdruck 248 Auswahlliste 33 Auszeichnungssprache 20 Außenabstand 276 Axure 392 B Backend Anwendung einchecken 175 Deployment 456 Kommunikation 321 Basis-Controller 401, 406 Basis-Theme 267 Batch ID 375 OData 375 Verarbeitung 380 Benutzeraktion 149 Berechtigung 464 Berechtigungsprofil 466 Berechtigungsrolle 465 Beschriftung 33 Bibliothek einbinden 198 Binding Datenbindung BlackBerry OS 439 Blockelement 28 Blue Crystal 201, 267 Bookmark Lesezeichen boolescher Wert 62 Bootstrapping 161, 191, 192 Box-Modell 276 break 69 Breakpoint 146, 182 Breakpoint, Bedingung 183 Browser 19 Anfrage 140 Cache 314 Entwicklertools 48 Spezifika 44 BSP-Anwendung 176 BSP-Seite 173 BUILD 392 Button 161, 185, 209, 316, 370, 454 C Cache zurücksetzen 314 Calendar 436 Call by Reference 56 Call by Value 56 Callback 102, 217 Callstack 183 Cascading Style Sheet CSS Catch-all-Route 297 Central Hub 112, 334, 353 Central Hub Deployment 112, 334 Changeset 375 definieren 379 ID 377 Chart 427 Checkbox 421 Chrome 182 Class Builder 352 Client 149 clientseitiges OData Model 232 Cloud Connector SAP HANA Cloud Connector Codeschnipsel 282 Code-Template 282 Codevervollständigung 163 ComboBox 235 Complex Binding 245 Component 278, 399, 400, 404 Aufbau 279 Navigation 288, 290 ComponentContainer 279 Container 403 Container Padding 276 Control 159, 196 ActionSheet 160 App 288, 292, 399 Beispiele 158 Bibliothek 261 Button 161, 185, 196, 209, 261, 316, 370, 454 Calendar 436 Chart 427, 431 ColumListItem 310 ComboBox 235 ComponentContainer 279 Dialog 311 Erweiterung 315 Form 200 GridLayout 307 Control (Forts.) HeaderBar 399 IconTabBar 197 Input 199, 224, 257, 378 kundeneigenes 315, 414 Layout 200 List 197 MassageStrip 377 MessagePage 297 MessageToast 204, 257, 320 NavContainer 289 ObjectHeader 197 Page 289, 421 RatingIndicator 227, 245, 395 Responsive 201 sap.ui.core 160 Search 366 SearchField 197 Select 429 Shell 281, 399 Slider 294 SmartTable 382 SplitApp 197, 289, 446 Table 197, 214, 361 Text 207 Tile 274, 403 Timeline 395, 420 Toolbar 366, 370, 454 ToolbarSpacer 370 Tree 236, 237 Vererbung 159 ViewSettingsDialog 366, 369 Controller 149, 155 Basis-Controller 401 Datenbindung 237 Struktur ab Version Struktur bis Version Corporate Design 139 Cross Origin Request 107 CRUD-Operation 231, 333 implementieren 352 OData 372 CSS 14, 35, 261, 417 anpassen 261 Deklaration 35 Generator 45 Hierarchie 37, 40, 41 Klasse 261 Parameter 261 Selektor 41 CSS (Forts.) Spezifität 41 CSS3 44, 139 Custom Control 315, 414 Custom Data Binding 249 CustomData-Attribut 250, 454 Customizing 457 D Data Binding Datenbindung Data Provider Class 352 data-attribut 192 Date 254 Datenbankoperation 333 Datenbankzugriff 149 Datenbindung 191, 210, 211, 226, 450 bidirektionale 211 Binding-Pfad 242 JSON Model 212 Kontext 236 Muster 212 OData Model 212 One-Time-Binding 212 Resource Model 212 Syntax 220 Two-Way-Binding 211 Typen 211, 232 XML Model 212 Datencontainer 234 Datendefinition 213 Datenmodell 149, 344, 398 Daten-Provider-Klasse 336 Datentyp 253 Date 254 DateTime 255 eigener 258 Time 255 Datenübertragung, asynchrone 100 DateTime 255 Datum 254 Datum, Ausgabeformat 254 DDIC 344 Debug-Befehl 186 Debugging 181, 182 Debug-Modus 195 Deklaration, CSS 35 Dekrementoperator

21 Index Index Demokit 115, 157 Design Guideline 113 Desktopanwendung 152 Detailbereich 446, 450 Detail-Page 289 Development Paradigm Entwicklungsmodell Device-Bibliothek 445 DHTML 47 Dialog 311 Dispatcher 141 do while-schleife 73 document 76 Document Object Model DOM Dokumentkompatibilitätsmodus 24 Dokumentkörper 24 Dokumenttypdeklaration 21 DOM 62, 76 Baum 77 DOMContentLoaded 89 Eigenschaft 77 Manipulation 78, 96 Domain Model 280 Drop-down-Liste 33 dynamische Webseite 100 E Eclipse 116, Bit-Version Bit-Version 118 Code-Template 163 Download 117, 118 Project Explorer 174 Projekt anlegen 151 Projekt hochladen 171 Projekt importieren 180 Proxy-Einstellungen 324 Vorschaufunktion 165 ECMAScript 48 EDM 328, 398 EDMX-Datei 344 Eigenschaft, Binding 233 Eingabefeld 33 Eingabemaske 33 Element Binding 239 Elternobjekt 77 Embedded Deployment 112, 114, 334 encodeuricomponent 249 Endgerät 445 Endgerät, Simulation 287 End-Tag 20 Entität modellieren 342 Entitätsmenge 329, 336, 350, 427 Entitätsmenge lesen 411 Entitätstyp 328, 336, 346 Entity Data Model 328, 399 Entity Set Entitätsmenge Entwicklertools 181, 261 Entwicklungsmodell 152, 156 HTML 152 JavaScript 152, 160 JSON 152 XML 152 Ereignis 84, 94 mobile Endgeräte 447 Modell 84 onafterrendering 155 onbeforerendering 155 onexit 155 oninit 155 vordefiniertes 155 Ereignisbehandler Event Handler Event Handler 50, 84, 85, 89, 163 Event Listener Event Handler Event-Objekt 84, 184 Expression Binding 248 Expression Breakpoint 183 Extended Data Binding 244 extend-funktion 284, 315, 401 F Faceless Component 278 Factory-Funktion 89, 235 Favorit Lesezeichen Fehleranalyse 284 Feldattribut 349 Filter, OData 366 Firebug 80 for in-schleife 74 Formatfehler 254 Formatter 246 Formular 33, 308 for-schleife 70 Fragment 305, 370 Fullscreen-App 288 function 50 Funktion 57 G Gateway-Service OData-Service GET 103 GET-Methode 33 Git 177, 444 Git-Historie 441 Gold Reflection 201 Google Maps 397, 414 GridLayout 307 Gruppe anlegen 463 GW_CORE 333 H HANDLE_REQUEST 142, 145 Hard Reload 314 HCP 126 HeaderBar 399 Hierarchie, CSS 37 High Contrast Black 201 Host, virtueller 132 HTML 14, 19, 139 Attribut 192 Dokument 20 Dokumentkörper 20 Dokumenttypdeklaration 20 Element 20 Kopfbereich 20 Textabsatz 26 Textauszeichnung 29 Überschriften-Tag 25 Validator 19 Zeichenkodierung 21 HTML5 19, 20 HTML-View 152, 153 HTTP_DISPATCH_REQUEST 141 HTTP-Anfrage 141 HTTP-Datenstrom 321 HTTP-Handler 146 HTTP-Kommunikation 321 HTTP-Methode 328 HTTP-Request-Handler 141 HTTP-Status setzen 145 HTTP-Statuscode 103 HTTP-Strom 141 Hybrid-Web-Container 440 Hyperlink 29, 84, 328 Hypermedia 328 Hypertext Markup Language HTML I i18n 227, 280 ICF-Controller 141 ICF-Knoten 145, 322 ICF-Service 115 aktivieren 147 anlegen 144 Fehleranalyse 148 ICM 141 ICM-Monitor 148 ICM-Trace 148 Icon 316 ID absolute 207 relative 207 IDE 117 ID-Selektor 40 IF_HTTP_EXTENSION 144 if-anweisung 65, 66 index.html 169, 170 Indexvariable 70 Inkognito-Modus 314 Inkrementoperator 63, 70 Innenabstand 276 innerhtml 78 Input 199, 224, 257, 378 Installation Cloud Connector 129 SAPUI5 112, 114, 115 UI5-Eclipse-Plug-in 120 Integrated Development Environment 117 Internationalisierung 227 Internet Communication Manager 141 ios 439 IW_BEP 113, 333 IW_FND

22 Index Index J Java Runtime 117 JavaScript 14, 24, 47, 149 Ablauflogik 51 Argument 52 Bibliothek 87 Code einbinden 49 do while-schleife 73 Ereignis 84 for in-schleife 74 for-schleife 70 Funktion 50, 57 if 66 Kommentar 50 Kompressor 187 Konstruktor 55 Methode 57 Objekt 53, 57 Objekt-ID 208 Punktnotation 56 return 52 Rückgabe 52 Sichtbarkeit von Variablen 60 switch 68 this 57 typeof 64 Variablendeklaration 59 Variablentyp 59 Vererbung 286 View 152, 160 while-schleife 71 JavaScript Object Notation JSON JDBC 231 jquery 14, 87 AJAX-Objekt 104 Bibliothek 87 DOM-Manipulation 96 einbinden 88 Ereignis 94 Factory-Funktion 89 Funktion 90 hasattribute-selektor 90 Methoden verketten 92 Objekt 89 Punktnotation 92 ready-funktion 89 Referenz 88 Selektor 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 47 JSON 57, 59, 214 relativer Pfad 215 Validator 223 View 152 JSON Model 214 JSON Model, lokales 424 JSON with Padding 104 JSONP 104 JSON-Validator 409 JSONView 331 K Kachel 270 anlegen 461 konfigurieren 461 Katalog anlegen 460 Klasse.sapMBtnInner 261 CL_HTTP_SERVER 141 CSS 261 Margin 277 Padding 277 sap.m.button 185 Klasse (Forts.) sap.ui.base.event 184 sap.ui.core.component 278 sap.ui.core.control 164 sap.ui.core.uicomponent 278 Klassenselektor 41 Knoten 77 Kommentar, JavaScript 50 Kommunikationsschicht 333 Kompressor 187 Konditionaloperator 66 Konsole 48, 184 Konstruktor 55 Konstruktorfunktion 162 Kopfbereich, HTML-Dokument 23 kundeneigenes Control 315 L Label 201 Laufzeit 100 Laufzeitumgebung 191 Laufzeitversion 195 Launchpad-Rolle 458, 463 Layout 261 Layout Control 200 Layout Editor 443 LDML 254 Lesezeichen 288, 296, 301 Lesezeichen, Fehler bei Aufruf 297 LESS 261 Linie, horizontale 26 Liste Drop-down 33 Eintrag 26 geordnete 26 ungeordnete 26 loaddata 321 Locale Data Markup Language 254 Logging Protokollierung lokale Entwicklung 174 Loose Typing 60 M main.controller.js 170 main.view.xml 169 manifest.json 279, 400, 404 Margin 276 MassageStrip 377 Master-Bereich 446, 450 Master-Page 289 Math 249 MessagePage 297 MessageToast 204, 320 Metadata-Bereich 279 Metadaten 329, 400 method 33 Methode 57 Methode, statische 316 mobile Anwendung 152 Mobile first 152 Mobile Lösung 445 Mobile Visual Identity (MVI) 201 Mockdaten 385, 398 Mockserver 385, 387, 444 Mockup 392 Model 149 ID 244 Sichtbarkeit 219 Model View Controller MVC Model-Provider-Klasse 336, 352 MVC 149, 150, 155, 201 MVC, Webentwicklung 149 N Nachfahrselektor 41 Named Binding 244 Named Model 229 Namensraum 181, 197, 246, 401, 450 deklarieren 200 XML-View 200 Namespace Namensraum NaN 62 NavContainer 289 Navigation 288, 402, 406 Negationsoperator 65 null 62 O OASIS 327 Objekt 53 Instanz 55 Konstruktor 54 prototypisches 285, 286 semantisches

23 Index Index Objekt (Forts.) transportierbares 174 vordefiniertes 55 Objektorientierung 53 OData 231, 327 batch 375 Bibliothek 333 CRUD 372 Filter 331, 365 Navigation 331 Objekt 336 Paging 362 Query 331, 365 SAP-Annotationen 328 Service implementieren 336 Servicedokument 329 Sorter 365 URL 331 OData Channel 333 OData Model 231, 232, 347, 360 anlegen 341 Editor 339 OData Modeler 126, 337, 385 OData-Service 232, 350, 451 aktivieren 353 Annotation 383 Datenmodell 344 Fehleranalyse 148 Fehlerprotokoll 359 generieren 350 Query-Option 357 testen 353 ODBC 231 Oder-Operator 65 Ogee 337, 398 onabort 84 onblur 84 onbuttonpressed 320 onchange 84 onclick 84 ondblclick 85 onerror 85 One-Time-Datenbindung 212 One-Way-Datenbindung 211, 231 onfocus 85 onkeydown 85 onkeypress 85 onkeyup 85 onload 85 onmousedown 85 onmousemove 85 onmouseout 85 onmouseover 85 onmouseup 85 On-Premise-System 129 onreadystatechange 102 onreset 85 onsearch 367 onselect 85 onsubmit 85 onunload 85 Open Data Protocol OData open() 101 Operation 328 Operator 62 Operator, logischer 65 P Padding 276 Paging 361, 362 PAM 116 Paragraph 20 Parent-Child-Datenbindung 239 parsefloat 246 Parser 220, 242 Parser-Fehler 254 Pattern 292 Pattern, Navigation 288 Phishing 323 placeat 164 Platinum 201 Plattform 139 Portalanwendung 391 Port-Information 142 POST-Methode 33, 103 Präsentationsschicht 149 Product Availability Matrix 116 Projekt anlegen (Eclipse) 151 anlegen (SAP Web IDE) 155 importieren 180 Template 155 properties-datei 228 Property 317, 329 ändern 342 hinzufügen 342 Property Binding 233 Protokollierung 48 prototypische Vererbung 286 prototypisches Objekt 285, 286 Prototyp-Kette 284, 286 Proxy-Konfiguration 324 Proxy-Servlet 324, 381 Prüfbedingung 70, 71, 73 Publisher 149 Punktnotation 56, 92, 312 Q Query-Option 331, 361, 365 R Radiobutton 33 RatingIndicator 227, 245, 395 ready 89 readystate 102 Rechenoperator 63 Referenz-Apps 442 RegExp 249 Remote Function Call 112 Render Manager 316 renderer 315 Rendering Engine 19 Request 141, 321 Request Handler 141, 322 requestcompleted 217, 431 Resource Model 227, 400 Response 103, 141 Responsive Control 201 REST 327, 328 return 52, 84 RFC 112 Roundtrip 141 Route definieren 292 Routing-Objekt 288, 406 RSS-Feed 327, 461 Rückgabewert 52, 84 S Same-Origin-Policy 107, 323 SAP Add-On Installation Tool 115 SAP Fiori 113, 440 SAP Fiori Launchpad 113, 279, 394, 456 Administrator 459, 460 SAP Fiori Launchpad (Forts.) Anwendung bereitstellen 456 Berechtigung 464 Gruppe 463 Kachel 461 Katalog 460 Konfiguration 460 Rolle 458 Theme 270 SAP Fiori Stencils 392 SAP Gateway 112, 232, 327 aktivieren 335 Client 355 Developer Guide 336 Fehleranalyse 148 Komponenten 333 Laufzeitobjekt 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 126 SAP HANA Cloud Platform, Cockpit 127 SAP NetWeaver Application Server ABAP 100, 113, 140, 321 SAP Service Marketplace 119 SAP UI Development Toolkit for HTML5 SAPUI5 SAP UI Theme Designer Theme Designer SAP Web IDE 116, 126, 441 Backend-Deployment von Anwendungen 456 Git 444 Git-Integration 441 Layout Editor 443 Lizenz 126 lokale Installation 128 Mockdaten 385 Mockserver 444 OData Model Editor 337, 339 Template 449 Testzugang 126, 128 Theme Designer 265 sap.m 152 sap.m.app 288 sap.m.icontabbar