Einführung in SAPUI5 - Cloud Object Storage | Store & …€¦ · · 2018-03-26Leseprobe Webentwicklung auf dem SAP NetWeaver AS ABAP – da müssen bereits die ersten Schritte

LeseprobeWebentwicklung auf dem SAP NetWeaver AS ABAP – da müssen bereits die ersten Schritte passen. Miroslav Antolovic zeigt Ihnen anschaulich, wie Sie die SAPUI5-Bibliothek auf dem Backend in-stallieren und die Entwicklungsumgebung auf dem Frontend ein-richten.

Miroslav Antolovic

Einführung in SAPUI5446 Seiten, gebunden, März 2014 69,90 Euro, 978-3-8362-2753-7

www.sap-press.de/3533

Kapitel 4: »Erste Schritte in SAPUI5«

Inhaltsverzeichnis

Index

Der Autor

Wissen aus erster Hand.

http://www.sap-press.de/3533?GPP=lpn

103

In diesem Kapitel lernen Sie den SAP NetWeaver Appli-cation Server ABAP kennen. Sie installieren die SAPUI5-Bibli-othek und richten die Entwicklungsumgebung ein.

4 Erste Schritte in SAPUI5

In diesem Kapitel lernen Sie die Grundlagen der Webentwicklung auf dem SAP NetWeaver Application Server ABAP (SAP NetWeaver AS ABAP) kennen. Ich zeige Ihnen, wie Sie die SAPUI5-Bibliothek auf dem Backend installieren und wie Sie die Entwicklungsumgebung auf dem Frontend einrichten.

Für die Entwicklung von Anwendungen in SAPUI5 benötigen Sie zwei Dinge:

� installierte SAPUI5-Bibliothek im SAP-Backend

� eingerichtete Entwicklungsumgebung auf dem Frontend-PC

Lokaler WebserverSollten Sie über kein SAP-Backend-System verfügen, können Sie Ihre Anwendungen auch auf einen lokalen Webserver, z. B. einen Apache-HTTPD-Server (als Download von der Homepage Apache.org), de-ployen. Sollten Sie keinen Zugang zum SAP Service Marketplace ha-ben, können Sie die benötigten SAPUI5-Dateien unter https://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 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, »Installation der SAPUI5-Bibliothek in der SAP Busi-ness Suite«, überspringen und direkt mit Abschnitt 4.2, »Einrichten

Checkliste

Was Sie für dieses Kapitel brauchen:

� S-User für den SAP Service Marketplace

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

104

Erste Schritte in SAPUI54

der Entwicklungsumgebung«, fortfahren. Für diese lokalen Entwick-lungen benötigen Sie die beiden Komponenten ABAP in Eclipse und SAPUI5 Team Provider nicht.

Zunächst widmen wir uns der Installation der SAPUI5-Bibliothek auf dem ABAP-Stack des SAP-Systems.

4.1 Installation der SAPUI5-Bibliothek in der SAP Business Suite

Download der Komponenten

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 finden Sie unter Support Packages and Patches � A-Z-Index � N � UI Add-

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

Starten Sie im SAP Solution Manager den Maintenance Optimizer, und wählen Sie als Produktversion UI ADD-ON 1.0 FOR NW (Abbil-dung 4.1).

Abbildung 4.1 Maintenance Optimizer im SAP Solution Manager

Installation Laden Sie die berechneten Support Packages und das Stack-XML her-unter. Entpacken Sie anschließend die Support Packages in das EPS-

105

Installation der SAPUI5-Bibliothek in der SAP Business Suite 4.1

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 Installationsanleitungfinden Sie im SAP-Hinweis 1747308 (Installat.Leitf.: UI Development Toolkit for HTML5 (SAPUI5)).

UI Development Toolkit for HTML5

Ob die Installation erfolgreich war, können Sie durch den Aufruf der URL http://<HOSTNAME>:<SERVICE>/sap/public/bc/ui5_ui5 überprü-fen, wobei Sie <HOSTNAME> und <SERVICE> durch die Werte Ihres SAP-Systems ersetzen. Ihnen sollte als Ergebnis das UI Development Toolkit for HTML 5 angezeigt werden (siehe Abbildung 4.2).

Abbildung 4.2 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, und aktivieren Sie gegebenenfalls den Service default_host/sap/public/bc/ui5_ui5/ (siehe Abbildung 4.3).

Die in diesem Buch gezeigten Beispiele basieren auf der zum Zeit-punkt des Schreibens aktuellen Version SAPUI5 1.00 SP6. Prüfen Sie daher mithilfe der Product Availability Matrix (PAM), die unter http://service.sap.com/pam erreichbar ist, die jeweils aktuelle unterstützte Version, und installieren Sie diese.

106


Abbildung 4.3 Service aktivieren

Nach der erfolgreichen Installation der Backend-Komponente wid-men wir uns nun der Installation der SAPUI5-Frontend-Tools.

4.2 Einrichten der Entwicklungsumgebung

Eclipse 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. Die SAPUI5-Team-Provider-Funktionalität unterstützt Sie beim Ein-checken der in Eclipse entwickelten Anwendungen in ein ABAP-Backend-System.

4.2.1 Installationsvoraussetzungen

JRE Die Entwicklerwerkzeuge für SAPUI5 müssen separat als Eclipse-Plug-in installiert werden. Prüfen Sie vor der Eclipse-Installation, ob

107

Einrichten der Entwicklungsumgebung 4.2

die installierte Java-Runtime-Version mindestens in der Version JRE 1.6 vorliegt, und führen Sie gegebenenfalls vor der Installation eine Aktualisierung des Java Runtime Environments durch. Öffnen Sie unter Start � Systemsteuerung � Programme � Java das Java Control Panel. Über den Button Info wird Ihnen die entsprechende JRE-Ver-sion angezeigt. Sollte die Version unter 1.6 liegen, führen Sie zunächst ein Update der JRE-Version durch.

4.2.2 Installation

Grundsätzlich unterstützt SAPUI5 die Eclipse-Versionen Indigo 3.7, Juno 3.8 und Juno 4.2. Im Folgenden wird die zum jetzigen Zeit-punkt aktuelle Version Juno 4.2 installiert. Verwenden Sie auch hier stets die aktuelle, von SAP freigegebene Version.

Eclipse IDE for Java EE Developers

Laden Sie als Erstes Eclipse IDE for Java EE Developers unter www.eclipse.org/downloads herunter. Da der SAPUI5 Team Providernur mit der 32-Bit-Version funktioniert, laden Sie die 32-Bit-Version herunter. Nach dem Entpacken der ZIP-Datei können Sie Eclipsedirekt durch einen Doppelklick auf eclipse.exe starten; Eclipse läuft im Arbeitsspeicher und muss daher nicht installiert werden. In der Eclipse-Oberfläche können Sie über den Menüpfad Help � Install

New Software die zusätzlichen Komponenten installieren (siehe Abbildung 4.4).

Abbildung 4.4 Plug-in-Komponenten installieren

108


Installieren Sie zunächst die notwendigen Standard-Plug-ins und anschließend die SAPUI5-Tools.

Standard-Plug-ins

Deutsches Sprachpaket

Installieren Sie als Erstes das deutsche Sprachpaket für Eclipse. Die Download-URL für die Sprachdateien der jeweiligen Eclipse-Versio-nen finden Sie unter http://eclipse.org/babel/downloads.php. Dort fin-den Sie im Bereich Babel Language Pack Zips and Update Sites �

Babel Language Pack Zips die entsprechende URL, z. B. http://down-load.eclipse.org/technology/babel/update-site/<AKTUELLES RELEASE>/juno.

Starten Sie über den Menüpfad Help � Install New Software den Installations-Wizard, und geben Sie unter work with die Update-Seite für Ihre Eclipse-Version ein, in unserem Beispiel in Abbildung 4.5 http://download.eclipse.org/technology/babel/update-site/R0.11.0/juno. Wählen Sie nun aus der Liste im mittleren Bildschirmbereich die Option Babel Language Packs in German aus, und bestätigen Sie Ihre Auswahl mit Next.

Abbildung 4.5 Sprachpaket für Deutsch auswählen

109


Komponenten- auswahl

Im Folgebild sehen Sie die Komponenten, die in diesem Schritt instal-liert werden. Bestätigen Sie Ihre Auswahl mit Next, akzeptieren Sie im Folgebild die Lizenzvereinbarungen, und starten Sie über den But-ton Finish die Installation. Bei manchen Komponenten kommt ein Warnhinweis, dass Sie unsignierte Komponenten installieren wür-den. Bestätigen Sie das entsprechende Pop-up-Fenster mit OK (siehe Abbildung 4.6), und fahren Sie mit der Installation fort.

Abbildung 4.6 Sicherheitswarnung

Nach der Installation werden Sie dazu aufgefordert, Eclipse neu zu starten. Bestätigen Sie dieses Pop-up-Fenster mit Yes (siehe Abbil-dung 4.7).

Abbildung 4.7 Neustart von Eclipse

Nach dem Neustart von Eclipse ist die Oberfläche deutschsprachig.

Notwendige Plug-ins

Als nächsten Schritt müssen weitere Standard-Plug-ins installiert wer-den. Das Plug-in ABAP in Eclipse setzt einige Standard-Plug-ins vor-aus. Im nächsten Schritt installieren Sie diese Pakete. Die hier aufge-führte Liste bezieht sich auf die Version ABAP in Eclipse 2.16; überprüfen Sie daher in den unten genannten SAP-Hinweisen, wel-che Installationsvoraussetzungen für Ihre Version gelten.

Starten Sie den Installations-Wizard über den Menüpfad Hilfe � Neue

Software installieren, und geben Sie unter work with die Update-Seite Ihrer Eclipse-Installation an (in diesem Beispiel die Juno-

110


Update-Seite http://download.eclipse.org/releases/juno). Wählen Sie nun aus der Liste im mittleren Bildschirmbereich die folgenden Kom-ponenten aus:

� EclipseRT Target Platform Components � EMF – Eclipse Mode-

ling Framework

� EclipseRT Target Platform Components � Jetty Target Compo-

nents

� Modeling � EMF – Eclipse Modeling Framework SDK

� Modeling � EMF Compare SDK

� Modeling � EMF Validation Framework SDK

� Modeling � EMF Model Query SDK

� Modeling � EMF Model Transaction

� Modeling � Graphiti SDK (Incubation)

Folgen Sie dem Installations-Wizard analog der Installation der Sprachdateien. Nach dem Neustart von Eclipse können Sie mit der Installation der SAPUI5-Tools fortfahren.

SAPUI5-Tools

SAPUI5-Komponenten

Nachdem Sie die notwendigen Standardkomponenten installiert haben, können Sie nun die SAPUI5-Tools installieren. Für die Ent-wicklung benötigen Sie die folgenden drei Komponenten, die Sie in der folgenden Reihenfolge installieren:

� ABAP IN ECLIPSE

� SAPUI5 TOOLS IDE PLUGIN

� SAPUI5 TEAM PROV IDE

Laden Sie aus dem SAP Service Marketplace zunächst die beiden benötigten SAPUI5-Komponenten SAPUI5 TOOLS IDE PLUGIN 1.00 und SAPUI5 TEAM PROV IDE 1.00 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>. 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 Team Providerbenötigen Sie zusätzlich noch das Plug-in für ABAP in Eclipse 2.16. Dieses finden Sie am einfachsten, indem Sie im SAP Software Down-

111


load 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.

SAPUI5-Plug-ins installieren

Nachdem Sie die Dateien aus dem SAP Service Marketplace herunter-geladen haben, können Sie diese in Eclipse installieren. Da die SAPUI5-Tools lokal auf Ihrer Festplatte gespeichert wurden, müssen Sie diese manuell in den Installations-Wizard einbinden. Klicken Sie hierzu neben dem Work-with-Eingabefenster work with auf den Button Hinzufügen, und wählen Sie im folgenden Pop-up-Fenster über den Button Archiv den Pfad zu der heruntergeladenen ZIP-Datei aus (siehe Abbildung 4.8).

Abbildung 4.8 SAPUI5-Tools auswählen

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

Abbildung 4.9 SAPUI5-Komponente installieren

Folgen Sie erneut dem Installations-Wizard, wie es bereits beschrie-ben wurde, und wiederholen Sie den Vorgang für die beiden verblei-benden Komponenten. Damit ist die Installation von Eclipse IDE for Java EE Developers abgeschlossen.

112


SAP-Hinweise Die zu diesem Zeitpunkt aktuelle Version SAPUI5 1.00 SP06 setzt z. B. ABAP in Eclipse in der Version 2.16 voraus. Welche Versionen Sie installieren müssen, entnehmen Sie den folgenden SAP-Hinwei-sen:

� Hinweis 1747308 (Installat.Leitf.: UI Development Toolkit forHTML5 (SAPUI5))

� Hinweis 1718399 (ABAP-Entwicklerwerkzeuge für SAP NetWea-ver)

4.2.3 Update der Komponenten

Installierte Komponenten

Es wird empfohlen, die Eclipse-Komponente Eclipse IDE for Java EE Developer zu aktualisieren. Diese Komponente beinhaltet die Code-vervollständigung, die in niedrigeren Versionen für Abstürze der Anwendung sorgen kann. Um eine Komponente zu aktualisieren, rufen Sie über den Menüpfad Hilfe � Info über Eclipse die Übersicht der installierten Komponenten auf (siehe Abbildung 4.10).

Abbildung 4.10 Info über Eclipse

Über den Button Installationsdetails können Sie sich die Versio-nen der installierten Komponenten anzeigen lassen (siehe Abbildung 4.11).

Update der installierten

Komponenten

Um ein Update durchzuführen, markieren Sie die entsprechende Komponente und klicken auf den Button Aktualisieren. Es erscheint nun ein Pop-up-Fenster mit den verfügbaren Updates. Bestätigen Sie die Installation mit Weiter, akzeptieren Sie die Lizenzvereinbarun-gen, und starten Sie die Installation mit Installieren.

113

SAPUI5-Entwicklungsszenarien 4.3

Abbildung 4.11 Installierte Komponenten

Bevor wir die erste SAPUI5-Seite anlegen, möchte ich Ihnen die mög-lichen Entwicklungsszenarien und die Kommunikation zwischen dem Browser und dem SAP-Backend näher erläutern. Im Anschluss daran lernen Sie noch das Model-View-Controller-Architekturmuster(MVC) kennen und sind damit bestens gerüstet, um mit der Entwick-lung von Anwendungen in SAPUI5 zu starten.

4.3 SAPUI5-Entwicklungsszenarien

PlattformenSAPUI5 bietet im Vergleich zu klassischen SAP-GUI-Anwendungen viele Vor-, aber auch einige Nachteile. Dadurch, dass SAP sich bei der SAPUI5-Bibliothek auf die Standards HTML5, CSS3, AJAX und die weit verbreitete Bibliothek jQuery bezieht, können mit SAPUI5 schnelle und flexible Anwendungen entwickelt werden, die sehr

114


leicht auf andere Plattformen portiert werden können. So laufen bereits heute SAPUI5-Anwendungen auf den unterschiedlichsten Plattformen:

� SAP NetWeaver Cloud

� Sybase Unwired Platform

� SAP HANA XS

� SAP NetWeaver AS ABAP

� SAP NetWeaver AS JAVA

� Open-Source-Plattformen

HTML wird fast von jedem modernen Endgerät »verstanden«, sodass Sie ohne große Aufwände Anwendungen für Desktop-PCs, Tablets oder Smartphones entwickeln können.

Eclipse Ein weiterer, wesentlicher Vorteil ist, dass die Entwicklung in Eclipse stattfindet und somit aus Entwicklersicht nicht mehr zwischen ver-schiedenen Entwicklungsumgebungen gewechselt werden muss, sondern jegliche Entwicklung zentral auf einer Plattform stattfinden kann. In letzter Konsequenz ist es nun auch seit SAP NetWeaver 7.4 möglich, ABAP in Eclipse zu entwickeln.

Corporate Design und Styleguide

Durch CSS3 können die Oberflächen sehr leicht an die Anforderun-gen eines Unternehmens, z. B. hinsichtlich des Corporate Designs, angepasst werden. Genau diese Flexibilität wird bei den Anwendern allerdings oft als Nachteil empfunden. Eine SAP GUI sieht immer mehr oder weniger gleich aus, wohingegen CSS dem Entwickler die Möglichkeit gibt, seiner Kreativität und seinen Designideen freien Lauf zu lassen. So bekommt jede Seite sehr schnell eine persönliche Note. Durch diesen »Wildwuchs« muss sich der Anwender jedoch auf jeder Seite neu orientieren. Deshalb sollten Sie vor der Entwicklung von SAPUI5-Seiten ein einheitliches Corporate Design festlegen und einen unternehmensweit gültigen Styleguide etablieren.

Der einzige, und oft auch gravierende Nachteil ist die Performance. Wie ich Ihnen später zeigen werde, kann dieser Geschwindigkeits-nachteil zwar minimiert werden, aber dennoch wird eine HTML-Seite meistens langsamer gerendert als eine SAP-GUI-Anwendung.

In Kapitel 9, »SAP HANA«, gehe ich noch auf die Entwicklung in der Cloud bzw. auf SAP HANA ein. Der Hauptteil des Buches beschäftigt sich mit der Entwicklung in der SAP Business Suite.

115


4.3.1 Entwicklung auf dem SAP NetWeaver Application Server ABAP

Das hauptsächliche Entwicklungsszenario ist die Entwicklung von Desktop-Anwendungen mit einem SAP-NetWeaver-AS-ABAP-Back-end. Bevor wir uns der Implementierung der ersten SAPUI5-Anwen-dung widmen, muss noch die Frage geklärt werden, wie der ABAP-Server Anfragen aus dem Internet entgegennimmt und verarbeitet.

SAP NetWeaver Application Server ABAP

Unsere bisherigen Beispiele aus den einführenden Kapiteln wurden von der lokalen Festplatte aus ausgeführt. Im SAP-Kontext kommen die Daten aus einem SAP-System und müssen im Frontend-Browser angezeigt werden. Wenn Sie eine Internetseite aufrufen, wird die angefragte Seite von einem Server abgeholt, in Ihrem Browser geren-dert und dargestellt. Im SAP-Kontext ist dieser Webserver der SAP NetWeaver AS, alsTeil des SAP-NetWeaver-Stacks.

Wie wird diese Browseranfrage auf dem SAP NetWeaver AS verarbei-tet? Der SAP NetWeaver AS stellt die Infrastruktur zur Entwicklung und den Einsatz von Webanwendungen zur Verfügung. Er nimmt die HTTP-Anfragen (Requests) entgegen, verarbeitet diese und gibt das Ergebnis im HTTP-Strom (Response) zurück. In Abbildung 4.12 ist dieser sogenannte Roundtrip dargestellt.

Abbildung 4.12 SAP NetWeaver Application Server ABAP

Datenbeschaffung

HTTP-Anfrage (Request)

HTTP-Antwort (Response)

Selektionsergebnis

/Webbrowser /Datenbank/SAP NetWeaver Application Server

ABAP

116


Internet Communication

Manager

Der Internet Communication Manager (ICM) gewährleistet die Kom-munikation zwischen SAP NetWeaver AS und Webbrowser (siehe Abbildung 4.13). Streng genommen handelt es sich nicht um eine reine HTTP-Kommunikationskomponente, sondern der ICM beinhal-tet die TCP/IP-Grundfunktionen, sodass neben der reinen HTTP-/HTTPS-Kommunikation auch eine SMTP-Kommunikation mit dem SAP NetWeaver AS möglich ist. Der ICM ist ein eigener Dienst inner-halb des SAP NetWeaver AS und wird vom Dispatcher gestartet und überwacht.

Abbildung 4.13 ICM – Internet Communication Manager

HTTP-Request Der HTTP-Request wird vom ICM entgegengenommen. Der Task Handler startet den ICF-Controller; dieser ist als Funktionsbaustein HTTP_DISPATCH_REQUEST realisiert. Der ICF-Controller erzeugt ein Objekt der Klasse CL_HTTP_SERVER (Serverkontrollblock). Dieses Objekt beinhaltet alle notwendigen Informationen aus dem Client-

Webbrowser

SAP NetWeaver Application Server ABAP

Request

Response

ABAP-Internet-Communication-Manager

Internet Communication Framework

ICF-Controller

Applikation

ICF-Manager (IF HTTP SERVER)

HTTP-Request-Handler (IF HTTP EXTENSION)

117


Server-Roundtrip. Anhand der URL wird der eigentliche HTTP-Request-Handler ermittelt und die Anfrage an den Handler weiterge-leitet. An diesem Handler findet die Authentifizierung gegenüber dem SAP-System statt. Nach der erfolgreichen Authentifizierung wird durch den Aufruf der Methode HANDLE_REQUEST die Anfrage an die Applikation weitergegeben. In der Applikation wird die Anfrage ver-arbeitet und das Ergebnis im HTTP-Strom wieder an die Anwendung zurückgegeben.

Port-InformationWenn Sie sich bisher mit der Webentwicklung innerhalb des SAP-Systems (Web Dynpro oder BSP) beschäftigt haben, wurde Ihnen diese Funktionalität von der entsprechenden Laufzeitumgebung bereitgestellt, und Sie mussten sich als Entwickler keine Gedanken über die Funktionsweise des ICF machen. Bei der Generierung der Web-Dynpro-Applikation wurde die entsprechende URL in die admi-nistrativen Daten geschrieben, und die Web-Dynpro-Anwendung war über diese URL erreichbar. Wenn Sie nun eigene Anwendungen schreiben, stellt sich die Frage, wie der SAP NetWeaver AS von außen, also aus dem Internet erreicht werden kann. Die Antwort auf diese Frage finden wir in der Transaktion SICF. Starten Sie nun die Transaktion SICF, und führen Sie diese mit den Voreinstellungen aus. In Abbildung 4.14 finden Sie über das Menü Springen � Port-Infor-

mationen die notwendigen Informationen.

Abbildung 4.14 Transaktion SICF

118


ICF-Pfad Im Pop-up-Fenster finden Sie zum einen den Hostnamen und zum anderen den Service (Port) des entsprechenden Systems. Die URL setzt sich aus http(s)://<HOSTNAME>:<SERVICE>/ und der Rest der URL aus dem entsprechenden ICF-Pfad zusammen (siehe Abbildung 4.15).

Abbildung 4.15 ICF-Pfad

Der in Abbildung 4.15 markierte Pfad ist also unter der URL http://<HOSTNAME>:<SERVICE>/sap/public/bc/ui5_ui5/ erreichbar, wobei Sie <HOSTNAME> und <SERVICE> durch die entsprechenden Werte des SAP-Systems ersetzen müssen. Hinter diesem Pfad verbirgt sich das SAPUI Development Toolkit.

119


4.3.2 Eigenen Service anlegen

Im nächsten Schritt möchten wir einen eigenen Service anlegen und diesen testen. Legen Sie dazu in der Transaktion SE24 die Klasse ZUI5_HTTP_HANDLER an, und implementieren Sie das Interface IF_HTTP_EXTENSION (siehe Abbildung 4.16).

Abbildung 4.16 HTTP-Handler-Klasse

Methode HANDLE_REQUEST

Das Interface implementiert die Methode HANDLE_REQUEST; diese wird bei einer Anfrage an den entsprechenden ICF-Knoten ausge-führt. Momentan möchten wir nur den HTTP-Status setzen; diesen Handler werden wir im Verlauf dieses Buches sukzessive ausbauen (siehe Abbildung 4.17). Fügen Sie in der Methode HANDLE_REQUESTder Klasse ZUI5_HTTP_HANDLER die folgende Codezeile hinzu:

server->response->set_status( code = 200 reason = 'OK' ).

Abbildung 4.17 Methode HANDLE_REQUEST

120


Speichern und aktivieren Sie die Klasse. Damit Sie den Service besser testen können, setzen Sie auf die eingetragene Zeile einen externen Breakpoint. (Achtung, ein Session Breakpoint ist an dieser Stelle wir-kungslos!)

Service anlegen Im nächsten Schritt legen Sie einen ICF-Knoten in der Transaktion SICF an. In diesem Beispiel legen Sie den Knoten direkt unter dem default_host-Knoten an. Markieren Sie den Knoten, und wählen Sie über das Kontextmenü den Eintrag Neues Subelement (siehe Abbil-dung 4.18).

Abbildung 4.18 ICF-Service anlegen

Service-Name Tragen Sie einen Namen ein (in unserem Beispiel in Abbildung 4.19»ui5«), und wählen Sie die Option Eigenständiger Service.

Abbildung 4.19 Service anlegen

121


HTTP-HandlerGeben Sie im Folgebild eine Beschreibung ein, und tragen Sie in der Registerkarte Handler-Liste die zuvor angelegte Klasse ZUI5_HTTP_HANDLER ein (siehe Abbildung 4.20).

Abbildung 4.20 HTTP-Handler am Service

Service aktivierenSpeichern Sie den Service ab, und verlassen Sie über zurück das Pfle-gebild. Als letzten Schritt müssen Sie den Service aktivieren. Setzen Sie dazu den Cursor auf den angelegten Service, und wählen Sie im Kontextmenü Service aktivieren (siehe Abbildung 4.21).

Abbildung 4.21 Service aktivieren

Starten Sie nun Ihren Browser, und geben Sie die URL nach dem Schema http://<HOSTNAME>:<SERVICE>/ui5/ ein, wobei Sie den Hostnamen und den Service Ihres SAP-Systems eintragen. Wenn der

122


Service erreichbar ist, erscheint ein Pop-up-Fenster, in dem Sie Ihren SAP-Benutzernamen und das Passwort für das System eingeben müs-sen. Nach der erfolgreichen Anmeldung bleibt der Aufruf am gesetz-ten externen Breakpoint stehen (siehe Abbildung 4.22).

Abbildung 4.22 HTTP-Handler im Debugger

4.4 Model-View-Controller-Architekturmuster

MVC Das Model-View-Controller-Architekturmuster strukturiert die Soft-wareentwicklung in die drei Einheiten Datenmodell (Model), Präsen-tation (View) und Steuerung (Controller). Durch diese Trennung kön-

Fehlersuche

Sollte der Service nicht erreichbar sein, kann dies viele Ursachen haben. Die häufigsten Fehler sind ein inaktivierter Service (im ICF-Baum grau dar-gestellt), eine fehlerhafte Konfiguration des ICF oder gesperrte Ports in der Firewall. Eine gute Ausgangsbasis für die Fehleranalyse ist der ICM-Moni-tor (Transaktion SMICM). Dort können Sie über den Menüpfad Springen� Trace-Datei � Alles anzeigen das ICM-Trace aufrufen.

123

Model-View-Controller-Architekturmuster 4.4

nen die einzelnen Komponenten leichter erweitert, ausgetauscht oder wiederverwendet werden. Abbildung 4.23 zeigt dieses Archi-tekturmuster.

Abbildung 4.23 Model-View-Controller-Architekturmuster

Durch diese Trennung können z. B. zwei verschiedene Endgeräte das gleiche Model verwenden; der View wird z. B. einmal für die Desk-top-Anwendung und einmal für das mobile Endgerät implementiert.

4.4.1 Model

PublisherDas Model repräsentiert die Schicht des Datenmodells und hält die Applikationsdaten bereit. Auch repräsentiert und koordiniert es die Zugriffe auf die Datenbank. Oft beinhaltet das Model auch die dazu-gehörige Geschäftslogik. Die relevanten Daten werden vom Model bereitgestellt; aus diesem Grund wird das Model auch oft Publisher, also Veröffentlicher genannt.

4.4.2 View

Die Präsentationsschicht ist für die Darstellung auf dem Endgerät zuständig. Der View nimmt die Benutzeraktionen entgegen, verarbei-tet diese aber nicht, sondern gibt sie an den Controller weiter.

Model

View 1

Controller 2 Controller 2

View 2

124


4.4.3 Controller

Der Controller verwaltet einen oder mehrere Views, nimmt von ihnen Benutzeraktionen entgegen und wertet diese aus. Zu jedem View existiert ein Controller. Sollte es bei einer Benutzeraktion zu einer Datenänderung kommen, übernimmt der Controller die Kom-munikation zum Model.

4.4.4 Zusammenspiel bei der Webentwicklung

MVC-Muster Bei Webanwendungen erstreckt sich das MVC-Muster über Server und Browser und ist damit etwas komplexer als das klassische MVC-Muster. Der Browser stellt den View als grafisches Element dar, und der Controller ist meistens JavaScript-Code und verarbeitet die Benutzeraktionen und gibt diese gegebenenfalls an das Model weiter.

Abbildung 4.24 MVC-Architekturmuster

4.4.5 MVC in SAPUI5

SAPUI5-Projekt anlegen

Das MVC ist ein wesentlicher Bestandteil der SAPUI5-Entwicklung. Bereits beim Anlegen eines SAPUI5-Anwendungsprojekts müssen Sie entscheiden, ob Sie die Seite nach dem MVC-Muster anlegen möch-ten. Um ein neues Projekt in Eclipse anzulegen, wählen Sie im Menü Datei � Neu � Projekt, und es öffnet sich ein Assistent zum Anlegen eines neuen Projekts (siehe Abbildung 4.25). Wählen Sie im Assisten-ten SAPUI5-Anwendungsentwicklung � Anwendungsprojekt aus, und bestätigen Sie Ihre Auswahl mit dem Button Weiter.

Controller

Model(JSON, XML, OData)

ViewSAP-Bibliotheken

UpdateUpdate Benachrichtigung Benutzerinteraktion

125


Abbildung 4.25 SAPUI5-Anwendungsprojekt

Wenn Sie nun im Folgebild die Option Legen Sie eine initiale View

an auswählen, wird das Projekt im MVC-Muster angelegt (siehe Abbildung 4.26).

Abbildung 4.26 SAPUI5-Projekt nach dem MVC-Muster

126


Entwicklungs- modell

Wenn Sie diese Option wählen, werden Sie im Folgebild gefragt, wel-ches Entwicklungsmodell Sie verwenden möchten (siehe Abbildung 4.27). Mit dem Entwicklungsmodell legen Sie fest, in welchem For-mat der View implementiert werden soll. Sie haben dabei die Wahl zwischen den folgenden Optionen:

� XML mit HTML – sap.ui.core.mvc.XMLView

� JavaScript – sap.ui.core.mvc.JSView

� JSON – sap.ui.core.mvc.JSONView

� HTML – sap.ui.core.mvc.HTMLView

Abbildung 4.27 Entwicklungsmodell wählen

HTML-View Je nach Auswahl generiert die Entwicklungsumgebung einen ent-sprechenden Rumpf der Seite. Wenn Sie sich für das Entwicklungs-modell HTML entscheiden, generiert der Wizard das Template aus Listing 4.1:

127


<template data-controller-name="html.HTML"> </template>

Listing 4.1 SAPUI5-Rumpf – HTML-View

XML-ViewWenn Sie sich für das Entwicklungsmodell XML entscheiden, wird der Rumpf aus Listing 4.2 generiert:

<core:View xmlns:core="sap.ui.core" xmlns:mvc="sap.ui.core.mvc" xmlns="sap.ui.commons" controllerName="xml.XML" xmlns:html="http://www.w3.org/1999/xhtml"> </core:View>

Listing 4.2 SAPUI5-Rumpf – XML-View

JavaScript-ViewDas am häufigsten verwendete Entwicklungsmodell ist JavaScript (siehe Listing 4.3). Alle Beispiele aus diesem Buch basieren auf die-sem Modell:

sap.ui.jsview("js.JS", { /** Specifies the Controller belonging to this View. * In the case that it is not implemented, or that "null" is returned, this View does not have a Controller. * @memberOf js.JS */ getControllerName : function() { return "js.JS"; }, /** Is initially called once after the Controller has been instantiated. It is the place where the UI is constructed. * Since the Controller is given to this method, its event handlers can be attached right away. * @memberOf js.JS */ createContent : function(oController) { } });

Listing 4.3 SAPUI5-Rumpf – JavaScript-View

128


JSON-View Wenn Sie sich für das Entwicklungsmodell JSON entscheiden, wird ein Seitenrumpf gemäß Listing 4.4 erzeugt:

{ "Type":"sap.ui.core.mvc.JSONView", "controllerName":"json.JSON", "content": [{ }] }

Listing 4.4 SAPUI5-Rumpf – JSON-View

Neben dem passenden Seitenrumpf wird auch eine Controller-Datei angelegt; diese enthält bereits vier vordefinierte Ereignisse:

� onInit – bei der Initialisierung

� onBeforeRendering – vor dem Rendern der Seite

� onAfterRendering – nach dem Rendern der Seite

� onExit – wenn der Controller zerstört wird, z. B. beim Schließen der Seite

Doch was bedeutet nun diese Trennung? Durch die strikte Verwen-dung des MVC-Musters können Sie einzelne Views auch als Frag-mente implementieren und sie sehr einfach in anderen Seiten wiederverwenden. Alle Ereignisse der Seite werden in der entspre-chenden Controller-Datei behandelt, und die Reaktion auf ein Ereig-nis muss bei einer Änderung nicht mühevoll an mehreren Stellen angepasst werden. Die beiden Dateien View und Controller bilden eine lose Einheit, und Sie sollten zu jedem View einen eigenen Con-troller anlegen. Auch wenn dies nicht zwingend notwendig ist, ist es durch diese Trennung leichter möglich, einen View mit dem korres-pondierenden Controller auszutauschen.

Jetzt ist es an der Zeit, die Theorie in die Praxis umzusetzen. Zum Abschluss dieses Kapitels legen Sie nun Ihre ersten beiden SAPUI5-Anwendungen an, einmal ohne das MVC-Architekturmuster und ein-mal nach dem MVC-Muster.

129

Erstes Beispiel 4.5

4.5 Erstes Beispiel

SAPUI5 ohne MVCWir beginnen mit einer Seite, die nicht nach dem MVC-Muster ange-legt ist. Wählen Sie hierzu in Eclipse den Menüpfad Datei � Neu �

Projekt. Wählen Sie dann im Projekt-Wizard SAPUI5-Anwendungs-

entwicklung � Anwendungsobjekt aus, und klicken Sie auf Weiter. Geben Sie dem Projekt anschließend einen passenden Namen (in die-sem Beispiel ZUI5_OHNE MVC), wählen Sie Desktop als Zielgerät, und entfernen Sie gegebenenfalls den Haken vor der Option Legen

Sie eine initiale View an – dadurch wird das Projekt nicht nach dem MVC-Muster angelegt –, und klicken Sie auf Fertigstellen. Nun wird in Eclipse ein Projekt mit dem folgenden Aufbau (siehe Abbildung 4.28) angelegt:

1 Bibliotheken

2 Content

3 Bootstrap

4 Applikation

5 UI-Bereich

Abbildung 4.28 SAPUI5-Projekt ohne MVC-Muster

130


Auf die einzelnen Bereiche werden wir im nächsten Kapitel noch genauer eingehen. Momentan ist es ausreichend zu wissen, dass Sie in diesem Szenario, also ohne MVC, Ihre Anwendung im zweiten Skriptblock (in Abbildung 4.28 als Application bezeichnet) imple-mentieren.

SAPUI5-Demo-Kit In unserem einfachen Fall möchten wir einen Button implementie-ren, der nach dem Anklicken ein alert-Pop-up-Fenster ausgibt. Öff-nen Sie dazu zunächst einmal die API-Dokumentation, die Sie auf dem Backend unter http://<HOSTNAME>:<SERVICE>/sap/public/bc/ui5_ui5/demokit/ bzw. ab Version 1.18 unter http://<HOSTNAME>: <SERVICE>/sap/bc/ui5_demokit/ finden, wobei Sie <HOSTNAME> und <SERVICE> durch die Werte Ihres SAP Systems ersetzen. Alter-nativ dazu finden Sie das Demo Kit auch im Internet, unter https://sapui5.netweaver.ondemand.com/sdk/.

API-Referenz Wechseln Sie im Demo Kit auf den Bereich API-Reference, und suchen Sie nach dem passenden Control für einen einfachen Button (sap.ui.commons.Button), wie es in Abbildung 4.29 gezeigt wird.

Abbildung 4.29 Button-Control in SAPUI5

131

Erstes Beispiel 4.5

Konstruktor-funktion

Nach der Auswahl des entsprechenden Controls werden Ihnen im rechten Bereich die Konstruktorfunktion sowie (falls vorhanden) die Events und die verfügbaren Methoden zu diesem Control angezeigt. Klicken Sie auf die Konstruktorfunktion, und es werden Ihnen die möglichen Parameter angezeigt (siehe Abbildung 4.30).

Abbildung 4.30 Der Konstruktor sap.ui.commons.Button

Codevervoll-ständigung

Wenn Sie sich nach einer Weile gut in der SAPUI5-Bibliothek ausken-nen, können Sie gänzlich auf die API-Dokumentation verzichten. Über die Tastenkombination (Strg) + (Leertaste) wird Ihnen die Dokumen-tation auch in Eclipse angezeigt. Mit einem Doppelklick wird das ent-sprechende Codemuster eingefügt (siehe Abbildung 4.31).

132


Abbildung 4.31 Dokumentation der SAPUI5-Klassen in Eclipse

Für unser einfaches Beispiel benötigen wir lediglich einen Text und einen Event Listener für das Event press. Daraus ergibt sich für den Button der Inhalt von Listing 4.5:

var oButton = new sap.ui.commons.Button({ text : "Drück mich", press : handleButtonClicked });

Listing 4.5 Button

Event Listener Aus dem Button-Event press haben wir den Event Listener handle-ButtonClicked registriert; diese Funktion soll lediglich ein alert-Fenster ausgeben (siehe Listing 4.6):

function handleButtonClicked() { alert("Gedrückt"); };

Listing 4.6 Event Handler

Im letzten Schritt müssen wir nun noch unsere Anwendung an den UI-Bereich übergeben, damit diese auch angezeigt werden kann. Dies erreichen wir in diesem Fall durch die placeAt-Funktion aus der Klasse sap.ui.core.Control (siehe Abbildung 4.32).

133

Erstes Beispiel 4.5

Abbildung 4.32 placeAt-Funktion

placeAt-FunktionAchten Sie darauf, dass Sie der placeAt-Funktion die Bezeichnung für das <div>-Element aus dem <body>-Bereich mitgeben müssen (in Lis-ting 4.7 content).

<!DOCTYPE HTML> <html> <head> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <script src="resources/sap-ui-core.js" id="sap-ui-bootstrap" data-sap-ui-libs="sap.ui.commons" data-sap-ui-theme="sap_goldreflection"> </script> <script> var oButton = new sap.ui.commons.Button({ text : "Drück mich", press : handleButtonClicked }); function handleButtonClicked() { alert("Gedrückt");

134


}; oButton.placeAt("content"); </script> </head> <body class="sapUiBody" role="application"> <div id="content"></div> </body> </html>

Listing 4.7 Button in SAPUI5

Vorschaufunktion Speichern Sie die Anwendung ab, und betrachten Sie das Ergebnis in der Vorschaufunktion. Wählen Sie hierzu im Projekt die Kontext-menüoption Ausführen als � Vorschau von Webanwendung. Im mittleren Teil öffnet sich eine neue Registerkarte mit einem integrier-ten Webbrowser, in dem die Seite angezeigt wird. Jetzt können Sie auf den Button klicken, und es sollte sich die entsprechende alert-Meldung »Gedrückt« öffnen (siehe Abbildung 4.33).

Abbildung 4.33 Erstes Anwendungsbeispiel in der Vorschau

Herzlichen Glückwunsch, Sie haben soeben Ihre erste SAPUI5-An-wendung implementiert!

Schreibweisen Noch ein paar Worte zur allgemeinen Schreibweise: In diesem Bei-spiel haben wir die notwendigen Attribute und Eigenschaften bereits

135

Erstes Beispiel 4.5

im Konstruktor mit der JSON-Notation deklariert. Selbstverständlich können Sie den Konstruktor auch leer aufrufen und dann die entspre-chenden GET- und SET-Methoden des Controls verwenden. In Listing 4.8 sind die beiden Möglichkeiten dargestellt:

// JSON Notation var oButton = new sap.ui.commons.Button({ text : "Drück mich", press : handleButtonClicked }); // Alternativ: Getter- und Setter-Funktionen var oButton = new sap.ui.commons.Button(); oButton.setText("Drück mich"); oButton.attachPress(handleButtonClicked);

Listing 4.8 Alternative Schreibweisen

Letztlich müssen Sie selbst entscheiden, welche Schreibweise Ihnen besser gefällt; beide Schreibweisen haben Vor- und Nachteile. Gerade am Anfang empfehle ich Ihnen die Verwendung der Getter und Set-ter, da dadurch der Quellcode leichter lesbar ist; die JSON-artige Notation wird aufgrund der vielen Klammern schnell unübersicht-lich.

SAPUI5 in MVCNun legen wir dieses Beispiel erneut an; diesmal nach dem MVC-Muster.

Legen Sie das SAPUI5-Anwendungsprojekt ZUI5_MIT_MVC an, set-zen Sie den Haken bei der Option Legen Sie eine initiale View an, und bestätigen Sie Ihre Auswahl mit Weiter. Im Folgebild müssen Sie einen Namen für den View angeben und sich für ein Entwicklungs-modell entscheiden (siehe Abbildung 4.34). Geben Sie als View-Namen »main« an, und wählen Sie das Entwicklungsmodell Java-

Script aus. Bestätigen Sie Ihre Eingaben mit Fertigstellen.

Navigieren Sie nun auf der linken Seite im Explorer zu ZUI5_MIT_

MVC � WebContent � zui5_mit_mvc. Hier finden Sie die drei Dateien für die eigentliche HTML-Seite, den View und den Controller (siehe Abbildung 4.35).

136


Abbildung 4.34 View anlegen

Abbildung 4.35 Angelegte Dateien einer SAPUI5-Anwendung

Dadurch, dass Sie das MVC-Muster gewählt haben, wird in der index.html-Datei bereits das passende Skript automatisch generiert (siehe Listing 4.9):

137

Erstes Beispiel 4.5

<script> sap.ui.localResources("zui5_mit_mvc"); var view = sap.ui.view({ id :"idmain1", viewName :"zui5_mit_mvc.main", type :sap.ui.core.mvc.ViewType.JS }); view.placeAt("content"); /script>

Listing 4.9 Generiertes Skript zum Aufrufen des Views

ViewIn der View-Datei (main.view.js) wird automatisch die Funktion createContent angelegt. Innerhalb dieser Funktion definieren Sie die entsprechenden UI-Elemente. Im Controller werden, wie bereits beschrieben, die vier Standardereignisse angelegt. In unserem Bei-spiel müssen Sie zusätzlich die Funktion handleButtonClicked imp-lementieren. Den Unterschied zwischen den beiden Entwicklungs-ansätzen veranschaulicht Abbildung 4.36.

Abbildung 4.36 Vergleich – mit MVC und ohne MVC

Um nun das MVC-Beispiel zu vervollständigen, ergänzen Sie den View (Datei main.view.js) innerhalb der createContent-Funktion mit dem Quelltext aus Listing 4.10:

createContent : function(oController) { var oButton = new sap.ui.commons.Button(); oButton.setText("Drück mich"); oButton.attachPress(oController.handleButtonClicked);

<script>

var oButton = new sap.ui.commons.Button();

oButton.setText("Drück mich");

oButton.attachPress(function() { alert("Gedrückt");

});

myButton.placeAt("content");

</script>

Ohne MVC-Mustervar oButton = new sap.ui.commons.Button();

myButton.setText("Drück mich");

oButton.attachPress(oController.

handleButtonClicked);

return oButton;

View

handleButtonClicked: function() { alert("Gedrückt");

}

Controller

138


return oButton; }

Listing 4.10 view.js

In unserem Beispiel ohne MVC hatten Sie den Button mit der place-At-Funktion der eigentlichen UI-Seite hinzugefügt. Im MVC-Muster müssen Sie dies nicht mehr tun, sondern die fertige Seitendefinition als return-Wert aus der createContent-Funktion zurückgeben.

Controller Im Controller müssen Sie nun nur noch die Funktion handleButton-Clicked für das Event press einbinden. Fügen Sie im Controller (Datei main.controller.js) unterhalb der generierten Funktionen das folgende Listing hinzu:

handleButtonClicked: function() { alert("Gedrückt"); }

Speichern Sie die beiden Dateien über das Diskettensymbol ab (mit dem Mehrfachdiskettensymbol können Sie alle geänderten Dateien auf einmal speichern). In diesem Beispiel muss die HTML-Seite (Datei index.html) nicht verändert werden. Kontrollieren Sie das Ergebnis, indem Sie sich die Seite in der Vorschau anzeigen lassen – es sollte dem Ergebnis in Abbildung 4.33 entsprechen.

Es kann durchaus vorkommen, dass Umlaute nicht korrekt dargestellt werden. Fügen Sie in diesem Fall im <head>-Bereich das bereits bekannte <meta charset="UTF-8"> ein, dadurch wird die Zeichenco-dierung auf UTF-8 gesetzt.

SAPUI5 Team Provider

Sie haben soeben Ihre erste SAPUI5-Anwendung nach dem MVC-Muster implementiert! Als letzter Schritt bleibt nur noch die Auf-gabe, die erstellte Seite im ABAP-Backend einzuchecken. Auch diese Aufgabe ist durch die Unterstützung des SAPUI5 Team Providersdenkbar einfach. Öffnen Sie im Project Explorer das Kontextmenü des Projekts, und wählen Sie Team � Projekt gemeinsam anwenden

aus (siehe Abbildung 4.37).

Wählen Sie im Wizard SAPUI5-ABAP-Repository, und betätigen Sie den Button Weiter (siehe Abbildung 4.38).

139

Erstes Beispiel 4.5

Abbildung 4.37 Projekt teilen

Abbildung 4.38 SAPUI5-ABAP-Repository

140


Systemauswahl Klicken Sie im Folgebild neben dem Feld Connection auf Browse, wählen Sie das gewünschte System aus, und klicken Sie auf OK (siehe Abbildung 4.39). Die Informationen bezieht der SAPUI5 Team Provi-der aus der SAP-GUI-Installation.

Abbildung 4.39 Systemauswahl

Die Systemdaten werden im Wizard übernommen (siehe Abbildung 4.40). Bestätigen Sie Ihre Auswahl mit Weiter.

Abbildung 4.40 SAP-System auswählen

141

Erstes Beispiel 4.5

Geben Sie im Folgebild die Anmeldedaten für das entsprechende Sys-tem ein, und klicken Sie auf Weiter (siehe Abbildung 4.41).

Abbildung 4.41 Anmeldedaten

Lokales ObjektGeben Sie im Folgebild einen Namen, eine Beschreibung für die BSP-Seite und ein Paket (wie in diesem Beispiel $TMP für lokales Objekt) ein, und bestätigen Sie Ihre Eingaben mit Weiter (siehe Abbildung 4.42).

Abbildung 4.42 BSP-Anwendung anlegen

142


Bei lokalen Entwicklungen (Paket $TMP) müssen Sie im Folgebild keinen Transportauftrag angeben. Bei transportierbaren Objektenwählen Sie entweder einen vorhandenen Transportauftrag aus, oder Sie legen einen neuen Transportauftrag an (siehe Abbildung 4.43).

Abbildung 4.43 Transportauftrag auswählen

Systemverbindung Bestätigen Sie Ihre Auswahl mit Fertigstellen. Eclipse stellt nun eine Verbindung zum SAP-System her, und im Project Explorer wird Ihnen in eckigen Klammern die System-ID, der Benutzername, die Sprache und der BSP-Seitenname angezeigt.

Nun können Sie die Dateien in das SAP-Backend einchecken. Gehen Sie dazu im Explorer wieder auf das Projekt, und wählen Sie im Kon-textmenü Team � Senden. Es öffnet sich nun ein Fenster, in dem Sie die zu sendenden Ressourcen auswählen können (siehe Abbildung 4.44). Standardmäßig werden alle geänderten Objekte seit dem letz-ten Einchecken übernommen.

Bestätigen Sie Ihre Auswahl mit Fertigstellen. Im Backend werden nun zwei wesentliche Komponenten angelegt. Zum einen wird unter den Pfad /sap/bc/ui5_ui5/sap/<BSP-Anwendungsname>/ ein Service im ICF angelegt, und zum anderen wird eine BSP-Anwendung gene-riert, die die SAPUI5-Seite beinhaltet.

Versionsprüfung Wenn die Version der Bibliothek in Ihrer Eclipse-Version nicht mit der Version im SAP-Backend übereinstimmt, erhalten Sie eine ent-sprechende Warnmeldung, siehe Abbildung 4.45.

143

Erstes Beispiel 4.5

Abbildung 4.44 Zu sendende Ressourcen auswählen

Abbildung 4.45 Versionsprüfung

In diesem Fall sollten Sie Ihre Anwendung auf dem SAP-Server aus-giebig testen und die beiden Versionen durch ein entsprechendes Upgrade harmonisieren.

Nach dem Hochladen in das SAP-Backend ist die Anwendung über die URL http://<HOSTNAME>:<SERVICE>/sap/bc/ui5_ui5/sap/<BSP-Anwendungsname>/ erreichbar. Nach der Anmeldung am System soll-ten Sie das folgende Ergebnis erhalten (siehe Abbildung 4.46).

144


Abbildung 4.46 Erste SAPUI5-Anwendung im SAP-Backend

Herzlichen Glückwunsch, Sie haben soeben Ihre erste SAPUI5-Anwendung im SAP-Backend aufgerufen!

Im folgenden Kapitel 5, »SAPUI5-Laufzeitumgebung«, gehe ich detail-liert auf die wichtigsten Komponenten und Controls der SAPUI5-Bibliothek ein.

Inhalt

7

Inhalt

Einleitung ..................................................................................... 11

1 HTML5 und CSS3 ..................................................... 17

1.1 Einführung in HTML5 ................................................. 181.1.1 Dokument-Grundgerüst ................................. 181.1.2 Wichtige Sprachelemente ............................... 23

1.2 Einführung in CSS ....................................................... 341.2.1 Allgemeiner Aufbau ....................................... 341.2.2 CSS in HTML einbinden ................................. 351.2.3 Selektoren ...................................................... 381.2.4 Beispiel .......................................................... 41

2 JavaScript ................................................................. 45

2.1 Grundlagen ................................................................. 452.1.1 Protokollierung .............................................. 462.1.2 Positionierung von JavaScript-Code ................ 472.1.3 Kommentare .................................................. 482.1.4 Funktionen .................................................... 482.1.5 Objekte .......................................................... 51

2.2 Variablen .................................................................... 542.3 Operatoren ................................................................. 58

2.3.1 Rechenoperatoren .......................................... 582.3.2 Inkrement- und Dekrementoperatoren ........... 582.3.3 Zuweisungsoperatoren ................................... 592.3.4 Vergleichsoperatoren ..................................... 592.3.5 Der typeof-Operator ...................................... 602.3.6 Logische Operatoren ...................................... 60

2.4 Kontrollstrukturen – Bedingungen und Schleifen ......... 612.4.1 Die if-Anweisung ........................................... 612.4.2 Die switch-Anweisung ................................... 622.4.3 Die for-Schleife .............................................. 652.4.4 Die while-Schleife .......................................... 672.4.5 Die do-while-Schleife ..................................... 692.4.6 Die for-in-Schleife .......................................... 69

2.5 Document Object Model ............................................ 712.5.1 Der DOM-Baum ............................................ 72

Inhalt

8

2.5.2 Elemente ansprechen .................................... 722.5.3 DOM-Manipulation ...................................... 74

2.6 Ereignisse ................................................................... 79

3 jQuery ....................................................................... 83

3.1 Grundlagen ................................................................ 833.2 Selektoren und Ereignisse .......................................... 85

3.2.1 Selektoren ..................................................... 853.2.2 Ereignisse ...................................................... 89

3.3 DOM-Manipulation ................................................... 913.4 AJAX .......................................................................... 95

4 Erste Schritte in SAPUI5 .......................................... 103

4.1 Installation der SAPUI5-Bibliothek in der SAP Business Suite ..................................................... 104

4.2 Einrichten der Entwicklungsumgebung ....................... 1064.2.1 Installationsvoraussetzungen ......................... 1064.2.2 Installation .................................................... 1074.2.3 Update der Komponenten ............................. 112

4.3 SAPUI5-Entwicklungsszenarien .................................. 1134.3.1 Entwicklung auf dem SAP NetWeaver

Application Server ABAP ............................... 1154.3.2 Eigenen Service anlegen ................................ 119

4.4 Model-View-Controller-Architekturmuster ................. 1224.4.1 Model ........................................................... 1234.4.2 View ............................................................. 1234.4.3 Controller ...................................................... 1244.4.4 Zusammenspiel bei der Webentwicklung ....... 1244.4.5 MVC in SAPUI5 ............................................. 124

4.5 Erstes Beispiel ............................................................ 129

5 SAPUI5-Laufzeitumgebung ...................................... 145

5.1 Initialisierung der Anwendung ................................... 1465.1.1 SAPUI5-Ressourcen ....................................... 1475.1.2 Controls ........................................................ 1505.1.3 SAPUI5-Theming ........................................... 151

5.2 Models der Datenbindung ......................................... 1565.2.1 JSON Model .................................................. 1575.2.2 XML Model ................................................... 164

Inhalt

9

5.2.3 Resource Model ............................................. 1655.2.4 OData Model ................................................. 1685.2.5 Binding-Möglichkeiten ................................... 170

5.3 Mehrsprachige Anwendungen .................................... 1805.4 SAPUI5-Datentypisierung ........................................... 185

5.4.1 Ganze Zahlen ................................................. 1865.4.2 Gleitkommazahlen ......................................... 1875.4.3 Zeichenketten ................................................ 1875.4.4 Boolesche Variable ......................................... 1885.4.5 Datum ........................................................... 1885.4.6 Uhrzeit ........................................................... 1905.4.7 Datum und Uhrzeit ........................................ 1905.4.8 Formatter-Klassen .......................................... 1905.4.9 Eigene Typen ................................................. 190

5.5 Layout-Anpassung über eigene CSS ............................ 1925.5.1 CSS anpassen ................................................. 1935.5.2 Theme Designer ............................................. 197

5.6 Kommunikation mit dem SAP-Backend ...................... 205

6 SAPUI5-Controls ...................................................... 213

6.1 API-Referenz .............................................................. 2146.2 Common-Controls (sap.ui.commons) .......................... 218

6.2.1 Layout ............................................................ 2186.2.2 UI-Controls .................................................... 246

6.3 UX3-Controls (sap.ui.ux3) ........................................... 2666.4 Table-Control (sap.ui.table) ........................................ 2676.5 Charts (sap.viz) ........................................................... 2686.6 Controls für mobile Anwendungen ............................. 2686.7 Suite-Controls (sap.suite.) ........................................... 2696.8 Eigene Controls .......................................................... 270

7 Beispielentwicklung einer Anwendung ................... 275

7.1 Das UI-Design ............................................................ 2757.1.1 Startseite ........................................................ 2767.1.2 Zeiterfassung .................................................. 2767.1.3 Urlaubsantrag ................................................ 2777.1.4 Mitarbeiterverzeichnis .................................... 2787.1.5 Routenplanung .............................................. 2797.1.6 Meine Daten .................................................. 280

Inhalt

10

7.2 Implementierung ....................................................... 2807.2.1 Grundsätzlicher Aufbau ................................. 2817.2.2 Mitarbeiterverzeichnis ................................... 2877.2.3 Routenplanung .............................................. 2937.2.4 Meine Daten ................................................. 2987.2.5 Aufgaben ...................................................... 3057.2.6 Zeiterfassung ................................................. 3157.2.7 Urlaubsantrag ................................................ 331

8 SAP NetWeaver Gateway ........................................ 343

8.1 Grundlagen von SAP NetWeaver Gateway ................. 3438.2 Installation ................................................................. 3458.3 Konfiguration ............................................................. 3468.4 OData-Service implementieren .................................. 3488.5 OData-Service konsumieren ....................................... 364

9 SAP HANA ................................................................ 369

9.1 XS Engine .................................................................. 3709.2 HANA-Zugang ........................................................... 3719.3 Implementierung der Beispielanwendung .................. 377

10 Mobile Anwendungen .............................................. 391

10.1 Installation ................................................................. 39310.2 Einführung in SAPUI5 for Mobile ............................... 39410.3 Mobile Lösungen mit SAPUI5 entwickeln ................... 395

10.3.1 Seitenaufbau von mobilen Anwendungen ...... 39510.3.2 Seitennavigation ............................................ 39910.3.3 Wo bin ich? ................................................... 40210.3.4 SplitApp-Control ........................................... 40310.3.5 Ereignisse auf mobilen Geräten ..................... 405

10.4 Anwendungsbeispiel .................................................. 40510.4.1 Backend-Implementierung ............................ 40510.4.2 Frontend-Implementierung ........................... 413

Anhang ........................................................................... 435

A Weiterführende Informationsquellen .......................... 435B Über den Autor .......................................................... 437

Index .......................................................................................... 439

439

Index

$expand 358$filter 358$format 358$orderby 358$select 358$skip 358$top 358.properties-Datei 166.xsaccess 377.xsapp 377<body> 19<div>-Tag 26<footer>-Tag 23<form>-Tag 31<head> 19<header>-Tag 23<html> 19<section>-Tag 23

A

ABAP in Eclipse 109, 110AbsoluteLayout-Control 219Accordion 262Accordion-Control 331, 333Accordion-Section 333addStyleClass 193Aggregation Binding 170, 171, 332AJAX 95, 205, 238

asynchrone Verarbeitung 97Parameterübergabe 209readyState 97SAP-Backend 240send() 98synchrone Verarbeitung 97

AJAX()-Objekt 99AJAX-Call 240AJAX-Parameter 208alert 51Analytic View 370, 387analytische Berechtigung 383Anker 28Anmeldesprache 168Anwendung, mobile 268API-Dokumentation 130, 213

API-Referenz 215ApplicationHeader 262ApplicationHeader-Control 262Architekturmuster 123Array 72Asynchronous JavaScript and XML �

AJAXAttribute View 370Ausgabeformat, Datum 189AutoComplete 252, 253

B

Basis-Theme 198Berechtigung vergeben 384Binding 165, 170Binding im DOM 164bindListData 417, 428Blockelement 26Blue Crystal 151, 394boolesche Werte 57Bootstrap 145, 146BorderLayout-Control 227break 64Browser 17Browserentwicklertools 46, 193, 288Browserspezifika 42BSP-Anwendung 142BusinessCard-Control 269Button 247, 248

C

Calculation View 370, 380, 381, 386Calendar-Control 269, 331CalendarLegend-Control 331Call by Reference 52Call by Value 52Carousel 262Cascading Style Sheet � CSSChart-Controls 269Checkbox 252, 257, 309, 319CL_HTTP_SERVER 116ComboBox 252, 253, 254Complex Binding 179

440

Index

Control 213eigenes 270

Controller 122, 124Corporate Design 114createContent 137CRUD-Operation 168, 344CSS 34, 192

anpassen 193Reihenfolge 195

CSS-Deklaration 34CSS-Hierarchie 35, 38CSS-Parameter 192CSS-Regel-Spezifität 39CSS-Selektor 39Custom-Control 315, 322CustomData-Attribut 321

D

Data Binding 156JSON Model 156OData Model 156Resource Model 156XML Model 156

Data-Binding-Muster 156Datejs 317Datenbanktunnel 374Datenmodell 349Daten-Provider-Klasse 348Datentyp 185Datentyp Integer 186Datentypisierung 185Datenübertragung 238Datenvorschau 386DatePicker 252, 254DatePicker-Control 322Datum formatieren 305Datumsfelder 308DB-Tunnel 373, 374Deklaration (CSS) 34Demo Kit 105, 130, 213Detail-Sektion 403DHTML 45Diagramm 268DialogBox-Control 282document 71Document Object Model 57, 71Dokumentkompatibilitätsmodus 22Dokumentkörper 22

DOM 57, 71DOM-Baum 72DOMContentLoaded 85DOM-Eigenschaft 73DOM-Manipulation 74, 91DropdownBox 252DropdownBox-Control 254Drop-down-Liste 253

E

Eclipse 106Codemuster 131Download 107Komponente installieren 108Project Explorer 142Projekt anlegen 124Vorschaufunktion 134

ECMAScript 46EDMX-Datei 349eigenes Control 270Element Binding 170, 174Entitätenmenge 348, 352Entitätstyp 348, 350, 351, 352Entity Data Model 351EPM-Demoszenario 380Ereignis 79, 89

DOMContentLoaded 85onAfterRendering 128onBeforeRendering 128onExit 128onInit 128

Event Handler 80Event Listener 80, 85, 132EventBus 420Event-Objekt 79Events 216Extended Application Service � XSExtended Data Binding 178extend-Methode 270externe Ressource 318

F

Factory-Funktion 85fakeOS 395Feldattribut 351FileUpload 252FileUploader 301

441

Index

FileUploader-Control 255Firebug 75for 65Formatierungsoption 186FormattedTextView 247, 248Formatter 190Formatter-Klasse 190Form-Container 230Form-Control 230FormElement 230Formular 31, 230, 322for-Schleife 320Funktion JavaScript 48

G

Gateway aktivieren 347Gateway-Service

aktivieren 354Fehlerprotokoll 360generieren 353implementieren 359Query-Option 357Query-Parameter testen 358testen 354URL-Parameter 357

GET 32, 98get_form_fields 208GetEntitySet 358GET-Methode 33Gold Reflection 151Google Maps 293Google-API 293Grid-Layout 231

singleColumn 232GUID 180GW_CORE 343

H

HANDLE_REQUEST 117, 119, 206High Contrast Black 151HorizontalLayout-Control 223HTML 17

Dokumentkörper 19Dokumenttypdeklaration 18Element 18Kopfbereich 19Textabsatz 24

HTML (Forts.)Textauszeichnung 27Überschriften-Tag 23Zeichenkodierung 19

HTML5 18HTML-Control 247, 248HTML-View 126HTTP_DISPATCH_REQUEST 116HTTP-Anfrage 115HTTP-Handler 121, 206HTTP-Kommunikation 205HTTP-Statuscode 98Hybrid-Web-Container 392Hyperlink 28Hypertext Markup Language � HTML

I

i18n 166ICF-Controller 116ICF-Knoten 119, 206, 239, 306ICF-Knoten anlegen 120ICF-Service 105ICM 116ICM-Monitor 122ID-Selektor 39IF_HTTP_EXTENSION 119if-Abfrage 60Ikone 306Image-Control 247, 248ImageMap 247ImageMap-Control 248innerHTML 74Installation SAPUI5 104Installationsanleitung SAPUI5 105Installationspaket SAPUI5 104Internationalisierung 166Internet Communication Manager

� ICMIW_BEP 343IW_FND 343

J

Java Runtime-VersionJRE 107

JavaScript 45Ablauflogik 49Argument 50

442

Index

JavaScript (Forts.)do-while-Schleife 69for-in-Schleife 69for-Schleife 65Funktion 48if 61Kommentar 48Konstruktor 51Objekt 51Punktnotation 52return 50Rückgabe 50Sichtbarkeit von Variablen 55switch 63this 53typeof 60Variablendeklaration 54Variablentyp 54while 67

JavaScript-Code einbinden 47JavaScript-Ereignis 80JavaScript-View 126JDBC 168Join-Knoten 382jQuery 83

AJAX()-Objekt 99DOM-Manipulation 91Ereignis 89Factory-Funktion 85hasAttribute-Selektor 86Methoden verketten 88Objekt 85Punktnotation 88ready-Funktion 85Selektor 85, 86

jQuery einbinden 84jQuery.device.is.desktop 403jQuery.device.is.phone 403, 426jQuery.device.is.tablet 403jQuery.support.touch 403jQuery-Bibliothek 83jQuery-DOM-Funktion 93jQuery-DOM-Manipulation � DOM-

ManipulationjQuery-Ereignis

.bind 91

.blur 91

.change 91

.click 91

jQuery-Ereignis (Forts.).dbclick 91.hover 91.keypress 91.keyup 91.mousemove 91.on 91

JScript 45JSON 53, 157, 290

relativer Pfad 158JSON in ABAP 208JSON Model 157, 238, 253JSON-Notation 54, 135JSON-Response ABAP 206JSON-View 126

K

Klassenselektor 39Kommentar JavaScript 48Konsole 46Konstruktor 135, 216Konstruktorfunktion 131Kopfbereich HTML-Dokument 22

L

Label 247Label-Control 249Laufzeitumgebung 145Laufzeitversion 150Layout 192, 218LDML 188LESS 192Link 247Link-Control 249ListBox 252ListBox-Control 255lokale Entwicklung 142Loose Typing 56

M

Master-Sektion 403MatrixLayout-Control 224, 247MenuBar 262, 263Methode 216MIME-Repository 261, 307mobile Anwendung 268

443

Index

Mobile Visual Identity 151, 394Model 122, 123Model-Provider-Klasse 348Model-View-Control � MVCModel-View-Control-Architektur-

muster � MVC-ArchitekturmusterMultipart-Segment 258, 261MVC 113, 122

Controller 124Model 123Muster 124View 123

MVC-Architekturmuster 113, 122, 123, 128, 281

N

Nachfahrselektor 39Named Binding 177NaN 57NavContainer 399navigate-Event 399Negationsoperator 60Nicht-Operator 304NoteTaker-Control 269NotificationBar 267Notifier-Control 304null 57

O

Objekt, transportierbares 142OData 168, 343OData Channel 343OData-Bibliothek 343OData-Filter 364OData-Service 169, 343, 386ODBC 168oder-Operator 60onAfterRendering 295onBeforeFirstShow 417Open Data 343Open Data Protocol 168

P

Pane 242Panel-Control 241Parent-Child-Binding 174

parseFloat 306, 309PasswordField 252PasswordField-Control 256PhoneGap 395placeAt 132Platinum 151Plattform SAPUI5 114Port-Information 117POST 32, 98

http 208Property Binding 170Protokollierung 46Punktesystem, CSS-Gewichtung 39Punktnotation 52, 88

R

RadioButton 252, 256Registerkarte 244renderer-Methode 271RenderManager 271Representational State Transfer 343Request 115Request-Objekt 208rerender-Funktion 301Resource Model 165Response 115Responsive-Layout 234

Gewichtung 234Ressource, externe 318REST-Architektur 343Ripple Emulator 393RoadMap-Control 265RowRepeater 262RowRepeater-Control 288, 290

S

SAP Fiori 245, 392SAP HANA 369

Aggregation-Knoten 383hdbrole 387OData-Service 388Repository Package 379Repository-Zugriff 376SQL Console 384

SAP HANA Client 373SAP HANA Cloud Platform

Cockpit 371

444

Index

SAP HANA Developer Studio 373SAP HANA Repository Workspace

378SAP HANA Studio 373SAP NetWeaver Application Server

ABAP 103, 115SAP NetWeaver Gateway 169, 343,

345Datenmodell 349

SAP NetWeaver Gateway Developer Guide 348

SAP NetWeaver Gateway Service Builder 345, 348

sap.m 268, 394sap.m.App 396, 397, 400sap.m.Bar 426sap.m.Button 401sap.m.Carousel 425sap.m.List 419, 425sap.m.Page 397, 400, 419, 426sap.m.Slider 401sap.m.SplitApp 414sap.m.Text 400sap.makit 268sap.me 268sap.me.Calendar 332, 424sap.me.CalendarEventType 336sap.me.CalendarLegend 333sap.suite 269sap.ui.commons 218, 246sap.ui.commons.Accordion 333sap.ui.commons.AccordionSection

333sap.ui.commons.Button 294, 301,

302, 325, 334, 338sap.ui.commons.ComboBox 316,

323, 337sap.ui.commons.DatePicker 313, 322sap.ui.commons.Dialog 337sap.ui.commons.FileUploader 302sap.ui.commons.form.SimpleForm

313sap.ui.commons.form.SimpleForm-

Layout.GridLayout 313sap.ui.commons.Image 301sap.ui.commons.Label 289, 290, 294,

300, 338sap.ui.commons.layout.Horizontal-

Layout 289, 337, 338

sap.ui.commons.layout.Matrix-Layout 289, 290, 300, 307, 331

sap.ui.commons.layout.MatrixLayout-Cell 290, 300

sap.ui.commons.layout.MatrixLayout-Row 290

sap.ui.commons.layout.Vertical-Layout 285, 295, 333, 337

sap.ui.commons.MessageBox 339sap.ui.commons.RadioButton 324sap.ui.commons.RatingIndicator 309sap.ui.commons.RowRepeater 290sap.ui.commons.TextArea 324, 337sap.ui.commons.TextField 289, 294,

300sap.ui.commons.TextView 289, 300,

307, 309, 331, 332sap.ui.commons.Toolbar 308, 334sap.ui.core.Control.extend 316sap.ui.core.CustomData 426sap.ui.core.EventBus 420sap.ui.core.HTML 294sap.ui.core.ListItem 323, 337sap.ui.layout.VerticalLayout 302sap.ui.model.Filter 289, 321, 323,

333, 427sap.ui.model.FilterOperator 322, 323sap.ui.model.json.JSONModel 287,

312, 327sap.ui.model.odata.Filter 364sap.ui.model.odata.ODataModel 364sap.ui.model.type.DateTime 308,

319, 332sap.ui.model.type.Time 319sap.ui.table 267, 305sap.ui.table.Column 308, 309, 319sap.ui.table.Table 308, 319sap.ui.ux3 266sap.ui.ux3.NotificationBar 286sap.ui.ux3.Notifier 286sap.ui.ux3.OverlayDialog 284sap.ui.ux3.Shell 282sap.ui.ux3.ToolPopup 314sap.ui-Klasse 216sap.viz 268, 305sap.viz.ui5.data.FlattenedDataset

310, 326sap.viz.ui5.Donut 310sap.viz.ui5.Line 326

445

Index

SAP-Hinweis 112SAP-Standardsymbol 306SAPUI5

addStyleClass 193Aggregation Binding 171Anwendungsobjekt 129Anwendungsprojekt 124API-Dokumentation 130Bibliothek einbinden 150bindAggregation 172bindProperty 171boolesche Variable (Datentyp) 188Bootstrap 146Complex Binding 179createContent 137Custom-Control 315Data Binding 156Datentyp 185Datum (Datentyp) 188Debug-Modus 150Demo Kit 130eigener Typ 190einchecken 142Element Binding 174Event Listener 132Extended Data Binding 178ganze Zahl (Datentyp) 186Gleitkommazahl (Datentyp) 187HTML-View 126Installation 104JavaScript-View 126JSON-View 126Klasse 150Laufzeitversion 150loadData 205MVC 135Named Binding 177Namensraum 150, 214placeAt 132Property Binding 170renderer 317Ressource 148Ressourcenpfad 149Schreibweise 134Seitenrumpf 128setModel 170sprachabhängige Datei 165Sprache ermitteln 168Team Provider 107, 110, 138

SAPUI5 (Forts.)Theme 151Übersetzung 180Uhrzeit (Datentyp) 190Versionsprüfung 142vordefiniertes Ereignis 128XML View 126Zeichenkette (Datentyp) 187

SAPUI5-Bibliothek 106SAPUI5-Komponente Tools IDE Plugin

110SAPUI5-Plug-ins installieren 111screen 71SE63 183SearchField 252SearchField-Control 256SegmentedButton 263SEGW 348Selektor 34, 38Semantische Trennung 23Service aktivieren 121Service anlegen 120Service ICF 119Service Marketplace 110Service-Katalog 354Shell 266, 281

content 282designType 286headerItem 281Suchfunktion 291WorksetItem 281

Shell-Control 281SimpleForm-Container 237singleColumn 233SMTP 116SplitApp-Control 403, 414Splitter-Control � splitterOrientationsplitterOrientation 242Sprachdatei 166Standard-Plug-ins 109stateful 210stateless 210, 343Styleguide 114Support Packages SAPUI5 104switch 62Systemalias 347

446

Index

T

Tabellenelement 30Table-Control 267TabStrip-Control 244Task Handler 116TCP/IP 116Team Provider 110, 138Team-Provider-Funktionalität 106Template 171TextArea 252, 257Textelement 182TextField 252

liveChange 289Texttyp 180TextView 247, 249Theme 151, 198Theme anpassen 200Theme Designer 196, 197

Basis Theme 198Bearbeitungsmodus 200Theme anpassen 200Vorschaufunktion 199

Theme einbinden 204Theme herunterladen 203Theming 192this 53ToggleButton 247, 249ToolBar 263ToolPopup-Control 313Transaktion SICF 105, 117, 120Transaktion SMICM 122Trennung, semantische 23Typkonvertierung 59Typselektor 39

U

Übersetzungsobjekttypen 180Übersetzungswerkzeug 168UI Development Toolkit 118UI Development Toolkit for HTML 5

105

UI-Controls 150undefined 57und-Operator 60Universalselektor 39User Experience Guideline 266UX3-Controls 266

V

ValueHelpField 252, 257var 55Vererbung 216Vergleichsoperator 59VerticalLayout-Control 222View 122, 123

initialer 125Vorschaufunktion 199

W

W3C-Standard 79Webentwicklertools 37Webkonsole 163Wertehilfe 257window 51, 71

X

XML Model 164XMLHttpRequest 97XML-View 126XS 370XS-Projekt 377

Z

Zeichenverkettung 58Zielgerät Desktop 129zustandsbehaftet 210zustandslos 210, 343Zuweisungsoperator 59

Wir hoffen sehr, dass Ihnen diese Leseprobe gefallen hat. Gerne dürfen Sie diese Leseprobe empfehlen und weitergeben, allerdings nur vollständig mit allen Seiten. Die vorliegende Leseprobe ist in all ihren Teilen urheberrecht-lich geschützt. Alle Nutzungs- 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. 1999 begann er als Anwendungsentwick- ler bei der SAP AG im Product Lifecycle Management, und 2004 wech-selte er zu 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 SAPUI5446 Seiten, gebunden, März 2014 69,90 Euro, 978-3-8362-2753-7

www.sap-press.de/3533

Wissen aus erster Hand.

http://www.sap-press.de/3533?GPP=lpn

https://www.facebook.com/GalileoPressVerlag

https://plus.google.com/118435207805510651040

http://twitter.com/Galileo_Press

Documents

Einführung in SAPUI5 - Cloud Object Storage | Store & …€¦ · · 2018-03-26Leseprobe Webentwicklung auf dem SAP NetWeaver AS ABAP – da müssen bereits die ersten Schritte