einführung in sapui5 -...

LeseprobeWebentwicklung auf dem SAP NetWeaver AS ABAP da mssen 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

Einfhrung in SAPUI5446 Seiten, gebunden, Mrz 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.

Fr die Entwicklung von Anwendungen in SAPUI5 bentigen Sie zwei Dinge:

installierte SAPUI5-Bibliothek im SAP-Backend

eingerichtete Entwicklungsumgebung auf dem Frontend-PC

Lokaler WebserverSollten Sie ber kein SAP-Backend-System verfgen, knnen 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, knnen Sie die bentigten SAPUI5-Dateien unter https://tools.hana.ondemand.com/ herunterladen.

Fr die ersten Gehversuche ist es auch ausreichend, wenn Sie ledig-lich Eclipse und die SAPUI5-Frontend-Tools installieren. In diesem Szenario knnen Sie die Vorschaufunktion in Eclipse nutzen und sich das Ergebnis dort anzeigen lassen. In diesem Fall knnen 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 fr dieses Kapitel brauchen:

S-User fr den SAP Service Marketplace

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

104

Erste Schritte in SAPUI54

der Entwicklungsumgebung, fortfahren. Fr diese lokalen Entwick-lungen bentigen Sie die beiden Komponenten ABAP in Eclipse und SAPUI5 Team Provider nicht.

Zunchst 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 Installation. Die dazugehrigen Support Packages finden Sie unter Support Packages and Patches A-Z-Index N UI Add-On for NetWeaver .

Starten Sie im SAP Solution Manager den Maintenance Optimizer, und whlen 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 anschlieend 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. fhren Sie ein Update (Transaktion SPAM) durch. Eine ausfhrliche Installationsanleitungfinden Sie im SAP-Hinweis 1747308 (Installat.Leitf.: UI Development Toolkit for HTML5 (SAPUI5)).

UI Development Toolkit for HTML5

Ob die Installation erfolgreich war, knnen Sie durch den Aufruf der URL http://:/sap/public/bc/ui5_ui5 berpr-fen, wobei Sie und 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, prfen 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. Prfen Sie daher mithilfe der Product Availability Matrix (PAM), die unter http://service.sap.com/pam erreichbar ist, die jeweils aktuelle untersttzte 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 untersttzen. Die SAPUI5-Team-Provider-Funktionalitt untersttzt Sie beim Ein-checken der in Eclipse entwickelten Anwendungen in ein ABAP-Backend-System.

4.2.1 Installationsvoraussetzungen

JRE Die Entwicklerwerkzeuge fr SAPUI5 mssen separat als Eclipse-Plug-in installiert werden. Prfen 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 fhren 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, fhren Sie zunchst ein Update der JRE-Version durch.

4.2.2 Installation

Grundstzlich untersttzt 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 knnen Sie Eclipsedirekt durch einen Doppelklick auf eclipse.exe starten; Eclipse luft im Arbeitsspeicher und muss daher nicht installiert werden. In der Eclipse-Oberflche knnen Sie ber den Menpfad Help InstallNew Software die zustzlichen Komponenten installieren (siehe Abbildung 4.4).

Abbildung 4.4 Plug-in-Komponenten installieren

108


Installieren Sie zunchst die notwendigen Standard-Plug-ins und anschlieend die SAPUI5-Tools.

Standard-Plug-ins

Deutsches Sprachpaket

Installieren Sie als Erstes das deutsche Sprachpaket fr Eclipse. Die Download-URL fr 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//juno.

Starten Sie ber den Menpfad Help Install New Software den Installations-Wizard, und geben Sie unter work with die Update-Seite fr Ihre Eclipse-Version ein, in unserem Beispiel in Abbildung 4.5 http://download.eclipse.org/technology/babel/update-site/R0.11.0/juno. Whlen Sie nun aus der Liste im mittleren Bildschirmbereich die Option Babel Language Packs in German aus, und besttigen Sie Ihre Auswahl mit Next.

Abbildung 4.5 Sprachpaket fr Deutsch auswhlen

109


Komponenten- auswahl

Im Folgebild sehen Sie die Komponenten, die in diesem Schritt instal-liert werden. Besttigen 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 wr-den. Besttigen 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. Besttigen 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 Oberflche deutschsprachig.

Notwendige Plug-ins

Als nchsten Schritt mssen weitere Standard-Plug-ins installiert wer-den. Das Plug-in ABAP in Eclipse setzt einige Standard-Plug-ins vor-aus. Im nchsten Schritt installieren Sie diese Pakete. Die hier aufge-fhrte Liste bezieht sich auf die Version ABAP in Eclipse 2.16; berprfen Sie daher in den unten genannten SAP-Hinweisen, wel-che Installationsvoraussetzungen fr Ihre Version gelten.

Starten Sie den Installations-Wizard ber den Menpfad Hilfe NeueSoftware 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). Whlen 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 knnen Sie mit der Installation der SAPUI5-Tools fortfahren.

SAPUI5-Tools

SAPUI5-Komponenten

Nachdem Sie die notwendigen Standardkomponenten installiert haben, knnen Sie nun die SAPUI5-Tools installieren. Fr die Ent-wicklung bentigen 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 zunchst die beiden bentigten 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 . Fgen Sie die jeweils aktuelle Version der beiden Komponenten ber den Button Zum Download Basket hinzufgenzu Ihrem Download-Basket hinzu. Fr den SAPUI5 Team Providerbentigen Sie zustzlich noch das Plug-in fr ABAP in Eclipse 2.16. Dieses finden Sie am einfachsten, indem Sie im SAP Software Down-

111


load Center nach ABAP in Eclipse suchen. Fgen 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, knnen Sie diese in Eclipse installieren. Da die SAPUI5-Tools lokal auf Ihrer Festplatte gespeichert wurden, mssen Sie diese manuell in den Installations-Wizard einbinden. Klicken Sie hierzu neben dem Work-with-Eingabefenster work with auf den Button Hinzufgen, und whlen 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 auswhlen

Besttigen 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 fr 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 mssen, entnehmen Sie den folgenden SAP-Hinwei-sen:

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

Hinweis 1718399 (ABAP-Entwicklerwerkzeuge fr 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-vervollstndigung, die in niedrigeren Versionen fr Abstrze der Anwendung sorgen kann. Um eine Komponente zu aktualisieren, rufen Sie ber den Menpfad Hilfe Info ber Eclipse die bersicht der installierten Komponenten auf (siehe Abbildung 4.10).

Abbildung 4.10 Info ber Eclipse

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

Update der installierten

Komponenten

Um ein Update durchzufhren, markieren Sie die entsprechende Komponente und klicken auf den Button Aktualisieren. Es erscheint nun ein Pop-up-Fenster mit den verfgbaren Updates. Besttigen 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, mchte ich Ihnen die mg-lichen Entwicklungsszenarien und die Kommunikation zwischen dem Browser und dem SAP-Backend nher erlutern. Im Anschluss daran lernen Sie noch das Model-View-Controller-Architekturmuster(MVC) kennen und sind damit bestens gerstet, 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, knnen mit SAPUI5 schnelle und flexible Anwendungen entwickelt werden, die sehr

114


leicht auf andere Plattformen portiert werden knnen. 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 Endgert verstanden, sodass Sie ohne groe Aufwnde Anwendungen fr Desktop-PCs, Tablets oder Smartphones entwickeln knnen.

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 mglich, ABAP in Eclipse zu entwickeln.

Corporate Design und Styleguide

Durch CSS3 knnen die Oberflchen sehr leicht an die Anforderun-gen eines Unternehmens, z. B. hinsichtlich des Corporate Designs, angepasst werden. Genau diese Flexibilitt wird bei den Anwendern allerdings oft als Nachteil empfunden. Eine SAP GUI sieht immer mehr oder weniger gleich aus, wohingegen CSS dem Entwickler die Mglichkeit gibt, seiner Kreativitt und seinen Designideen freien Lauf zu lassen. So bekommt jede Seite sehr schnell eine persnliche 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 gltigen Styleguide etablieren.

Der einzige, und oft auch gravierende Nachteil ist die Performance. Wie ich Ihnen spter 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 beschftigt sich mit der Entwicklung in der SAP Business Suite.

115


4.3.1 Entwicklung auf dem SAP NetWeaver Application Server ABAP

Das hauptschliche 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 geklrt werden, wie der ABAP-Server Anfragen aus dem Internet entgegennimmt und verarbeitet.

SAP NetWeaver Application Server ABAP

Unsere bisherigen Beispiele aus den einfhrenden Kapiteln wurden von der lokalen Festplatte aus ausgefhrt. Im SAP-Kontext kommen die Daten aus einem SAP-System und mssen 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 Verfgung. Er nimmt die HTTP-Anfragen (Requests) entgegen, verarbeitet diese und gibt das Ergebnis im HTTP-Strom (Response) zurck. 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) gewhrleistet 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 mglich 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 gegenber 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 zurckgegeben.

Port-InformationWenn Sie sich bisher mit der Webentwicklung innerhalb des SAP-Systems (Web Dynpro oder BSP) beschftigt haben, wurde Ihnen diese Funktionalitt 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 auen, 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 fhren 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)://:/ 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://:/sap/public/bc/ui5_ui5/ erreichbar, wobei Sie und durch die entsprechenden Werte des SAP-Systems ersetzen mssen. Hinter diesem Pfad verbirgt sich das SAPUI Development Toolkit.

119


4.3.2 Eigenen Service anlegen

Im nchsten Schritt mchten 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-fhrt. Momentan mchten wir nur den HTTP-Status setzen; diesen Handler werden wir im Verlauf dieses Buches sukzessive ausbauen (siehe Abbildung 4.17). Fgen 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 knnen, setzen Sie auf die eingetragene Zeile einen externen Breakpoint. (Achtung, ein Session Breakpoint ist an dieser Stelle wir-kungslos!)

Service anlegen Im nchsten 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 whlen 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.19ui5), und whlen Sie die Option Eigenstndiger 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 zurck das Pfle-gebild. Als letzten Schritt mssen Sie den Service aktivieren. Setzen Sie dazu den Cursor auf den angelegten Service, und whlen 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://:/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 fr das System eingeben ms-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), Prsen-tation (View) und Steuerung (Controller). Durch diese Trennung kn-

Fehlersuche

Sollte der Service nicht erreichbar sein, kann dies viele Ursachen haben. Die hufigsten 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 fr die Fehleranalyse ist der ICM-Moni-tor (Transaktion SMICM). Dort knnen Sie ber den Menpfad 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 knnen z. B. zwei verschiedene Endgerte das gleiche Model verwenden; der View wird z. B. einmal fr die Desk-top-Anwendung und einmal fr das mobile Endgert implementiert.

4.4.1 Model

PublisherDas Model reprsentiert die Schicht des Datenmodells und hlt die Applikationsdaten bereit. Auch reprsentiert und koordiniert es die Zugriffe auf die Datenbank. Oft beinhaltet das Model auch die dazu-gehrige Geschftslogik. Die relevanten Daten werden vom Model bereitgestellt; aus diesem Grund wird das Model auch oft Publisher, also Verffentlicher genannt.

4.4.2 View

Die Prsentationsschicht ist fr die Darstellung auf dem Endgert zustndig. 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 Datennderung 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 mssen Sie entscheiden, ob Sie die Seite nach dem MVC-Muster anlegen mch-ten. Um ein neues Projekt in Eclipse anzulegen, whlen Sie im Men Datei Neu Projekt, und es ffnet sich ein Assistent zum Anlegen eines neuen Projekts (siehe Abbildung 4.25). Whlen Sie im Assisten-ten SAPUI5-Anwendungsentwicklung Anwendungsprojekt aus, und besttigen 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 Viewan auswhlen, 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 whlen, werden Sie im Folgebild gefragt, wel-ches Entwicklungsmodell Sie verwenden mchten (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 whlen

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

127


Listing 4.1 SAPUI5-Rumpf HTML-View

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

Listing 4.2 SAPUI5-Rumpf XML-View

JavaScript-ViewDas am hufigsten 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 fr 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 enthlt bereits vier vordefinierte Ereignisse:

onInit bei der Initialisierung

onBeforeRendering vor dem Rendern der Seite

onAfterRendering nach dem Rendern der Seite

onExit wenn der Controller zerstrt wird, z. B. beim Schlieen der Seite

Doch was bedeutet nun diese Trennung? Durch die strikte Verwen-dung des MVC-Musters knnen 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 mhevoll 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 mglich, 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. Whlen Sie hierzu in Eclipse den Menpfad Datei Neu Projekt. Whlen Sie dann im Projekt-Wizard SAPUI5-Anwendungs-entwicklung Anwendungsobjekt aus, und klicken Sie auf Weiter. Geben Sie dem Projekt anschlieend einen passenden Namen (in die-sem Beispiel ZUI5_OHNE MVC), whlen Sie Desktop als Zielgert, und entfernen Sie gegebenenfalls den Haken vor der Option LegenSie 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 nchsten 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 mchten wir einen Button implementie-ren, der nach dem Anklicken ein alert-Pop-up-Fenster ausgibt. ff-nen Sie dazu zunchst einmal die API-Dokumentation, die Sie auf dem Backend unter http://:/sap/public/bc/ui5_ui5/demokit/ bzw. ab Version 1.18 unter http://: /sap/bc/ui5_demokit/ finden, wobei Sie und 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 fr 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 verfgbaren Methoden zu diesem Control angezeigt. Klicken Sie auf die Konstruktorfunktion, und es werden Ihnen die mglichen Parameter angezeigt (siehe Abbildung 4.30).

Abbildung 4.30 Der Konstruktor sap.ui.commons.Button

Codevervoll-stndigung

Wenn Sie sich nach einer Weile gut in der SAPUI5-Bibliothek ausken-nen, knnen Sie gnzlich 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 eingefgt (siehe Abbildung 4.31).

132


Abbildung 4.31 Dokumentation der SAPUI5-Klassen in Eclipse

Fr unser einfaches Beispiel bentigen wir lediglich einen Text und einen Event Listener fr das Event press. Daraus ergibt sich fr den Button der Inhalt von Listing 4.5:

var oButton = new sap.ui.commons.Button({ text : "Drck 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("Gedrckt"); };

Listing 4.6 Event Handler

Im letzten Schritt mssen 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 fr das -Element aus dem -Bereich mitgeben mssen (in Lis-ting 4.7 content).

var oButton = new sap.ui.commons.Button({ text : "Drck mich", press : handleButtonClicked }); function handleButtonClicked() { alert("Gedrckt");

134


}; oButton.placeAt("content");

Listing 4.7 Button in SAPUI5

Vorschaufunktion Speichern Sie die Anwendung ab, und betrachten Sie das Ergebnis in der Vorschaufunktion. Whlen Sie hierzu im Projekt die Kontext-menoption Ausfhren als Vorschau von Webanwendung. Im mittleren Teil ffnet sich eine neue Registerkarte mit einem integrier-ten Webbrowser, in dem die Seite angezeigt wird. Jetzt knnen Sie auf den Button klicken, und es sollte sich die entsprechende alert-Meldung Gedrckt ffnen (siehe Abbildung 4.33).

Abbildung 4.33 Erstes Anwendungsbeispiel in der Vorschau

Herzlichen Glckwunsch, 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. Selbstverstndlich knnen 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 Mglichkeiten dargestellt:

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

Listing 4.8 Alternative Schreibweisen

Letztlich mssen Sie selbst entscheiden, welche Schreibweise Ihnen besser gefllt; 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 unbersicht-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 besttigen Sie Ihre Auswahl mit Weiter. Im Folgebild mssen Sie einen Namen fr den View angeben und sich fr ein Entwicklungs-modell entscheiden (siehe Abbildung 4.34). Geben Sie als View-Namen main an, und whlen Sie das Entwicklungsmodell Java-Script aus. Besttigen 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 fr 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 gewhlt haben, wird in der index.html-Datei bereits das passende Skript automatisch generiert (siehe Listing 4.9):

137

Erstes Beispiel 4.5

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 mssen Sie zustzlich die Funktion handleButtonClicked imp-lementieren. Den Unterschied zwischen den beiden Entwicklungs-anstzen veranschaulicht Abbildung 4.36.

Abbildung 4.36 Vergleich mit MVC und ohne MVC

Um nun das MVC-Beispiel zu vervollstndigen, ergnzen 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("Drck mich"); oButton.attachPress(oController.handleButtonClicked);

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

oButton.setText("Drck mich");

oButton.attachPress(function() { alert("Gedrckt");});

myButton.placeAt("content");

Ohne MVC-Mustervar oButton = new sap.ui.commons.Button();myButton.setText("Drck mich");

oButton.attachPress(oController.handleButtonClicked);

return oButton;

View

handleButtonClicked: function() { alert("Gedrckt");}

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 hinzugefgt. Im MVC-Muster mssen Sie dies nicht mehr tun, sondern die fertige Seitendefinition als return-Wert aus der createContent-Funktion zurckgeben.

Controller Im Controller mssen Sie nun nur noch die Funktion handleButton-Clicked fr das Event press einbinden. Fgen Sie im Controller (Datei main.controller.js) unterhalb der generierten Funktionen das folgende Listing hinzu:

handleButtonClicked: function() { alert("Gedrckt"); }

Speichern Sie die beiden Dateien ber das Diskettensymbol ab (mit dem Mehrfachdiskettensymbol knnen Sie alle genderten Dateien auf einmal speichern). In diesem Beispiel muss die HTML-Seite (Datei index.html) nicht verndert 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. Fgen Sie in diesem Fall im -Bereich das bereits bekannte 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 Untersttzung des SAPUI5 Team Providersdenkbar einfach. ffnen Sie im Project Explorer das Kontextmen des Projekts, und whlen Sie Team Projekt gemeinsam anwendenaus (siehe Abbildung 4.37).

Whlen Sie im Wizard SAPUI5-ABAP-Repository, und bettigen 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, whlen Sie das gewnschte 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). Besttigen Sie Ihre Auswahl mit Weiter.

Abbildung 4.40 SAP-System auswhlen

141

Erstes Beispiel 4.5

Geben Sie im Folgebild die Anmeldedaten fr 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 fr die BSP-Seite und ein Paket (wie in diesem Beispiel $TMP fr lokales Objekt) ein, und besttigen Sie Ihre Eingaben mit Weiter (siehe Abbildung 4.42).

Abbildung 4.42 BSP-Anwendung anlegen

142


Bei lokalen Entwicklungen (Paket $TMP) mssen Sie im Folgebild keinen Transportauftrag angeben. Bei transportierbaren Objektenwhlen Sie entweder einen vorhandenen Transportauftrag aus, oder Sie legen einen neuen Transportauftrag an (siehe Abbildung 4.43).

Abbildung 4.43 Transportauftrag auswhlen

Systemverbindung Besttigen 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 knnen Sie die Dateien in das SAP-Backend einchecken. Gehen Sie dazu im Explorer wieder auf das Projekt, und whlen Sie im Kon-textmen Team Senden. Es ffnet sich nun ein Fenster, in dem Sie die zu sendenden Ressourcen auswhlen knnen (siehe Abbildung 4.44). Standardmig werden alle genderten Objekte seit dem letz-ten Einchecken bernommen.

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

Versionsprfung 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 auswhlen

Abbildung 4.45 Versionsprfung

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://:/sap/bc/ui5_ui5/sap// 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 Glckwunsch, 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 Einfhrung in HTML5 ................................................. 181.1.1 Dokument-Grundgerst ................................. 181.1.2 Wichtige Sprachelemente ............................... 23

1.2 Einfhrung 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-Mglichkeiten ................................... 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 fr 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 Grundstzlicher 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 Einfhrung in SAPUI5 for Mobile ............................... 39410.3 Mobile Lsungen 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 Gerten ..................... 405

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

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

A Weiterfhrende 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 19-Tag 26-Tag 23-Tag 31 19-Tag 23 19-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 97Parameterbergabe 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-Spezifitt 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 185Datenbertragung 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, 71Dokumentkompatibilittsmodus 22Dokumentkrper 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, 174Entittenmenge 348, 352Entittstyp 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

Dokumentkrper 19Dokumenttypdeklaration 18Element 18Kopfbereich 19Textabsatz 24

HTML (Forts.)Textauszeichnung 27berschriften-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 50Rckgabe 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 170sprachabhngige Datei 165Sprache ermitteln 168Team Provider 107, 110, 138

SAPUI5 (Forts.)Theme 151bersetzung 180Uhrzeit (Datentyp) 190Versionsprfung 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-Funktionalitt 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 180bersetzungswerkzeug 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 58Zielgert Desktop 129zustandsbehaftet 210zustandslos 210, 343Zuweisungsoperator 59

Wir hoffen sehr, dass Ihnen diese Leseprobe gefallen hat. Gerne drfen Sie diese Leseprobe empfehlen und weitergeben, allerdings nur vollstndig mit allen Seiten. Die vorliegende Leseprobe ist in all ihren Teilen urheberrecht-lich geschtzt. 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 ttig. 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 ttig, bis er schlielich 2010 zu bsc solutions wechselte.

Miroslav Antolovic

Einfhrung in SAPUI5446 Seiten, gebunden, Mrz 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=lpnhttps://www.facebook.com/GalileoPressVerlaghttps://plus.google.com/118435207805510651040http://twitter.com/Galileo_Press

/ColorImageDict > /JPEG2000ColorACSImageDict > /JPEG2000ColorImageDict > /AntiAliasGrayImages false /CropGrayImages false /GrayImageMinResolution 300 /GrayImageMinResolutionPolicy /OK /DownsampleGrayImages true /GrayImageDownsampleType /Average /GrayImageResolution 1500 /GrayImageDepth -1 /GrayImageMinDownsampleDepth 2 /GrayImageDownsampleThreshold 1.50000 /EncodeGrayImages true /GrayImageFilter /DCTEncode /AutoFilterGrayImages true /GrayImageAutoFilterStrategy /JPEG /GrayACSImageDict > /GrayImageDict > /JPEG2000GrayACSImageDict > /JPEG2000GrayImageDict > /AntiAliasMonoImages false /CropMonoImages false /MonoImageMinResolution 1200 /MonoImageMinResolutionPolicy /OK /DownsampleMonoImages false /MonoImageDownsampleType /None /MonoImageResolution 1800 /MonoImageDepth -1 /MonoImageDownsampleThreshold 1.50000 /EncodeMonoImages true /MonoImageFilter /CCITTFaxEncode /MonoImageDict > /AllowPSXObjects false /CheckCompliance [ /None ] /PDFX1aCheck false /PDFX3Check false /PDFXCompliantPDFOnly false /PDFXNoTrimBoxError true /PDFXTrimBoxToMediaBoxOffset [ 0.00000 0.00000 0.00000 0.00000 ] /PDFXSetBleedBoxToMediaBox true /PDFXBleedBoxToTrimBoxOffset [ 0.00000 0.00000 0.00000 0.00000 ] /PDFXOutputIntentProfile () /PDFXOutputConditionIdentifier () /PDFXOutputCondition () /PDFXRegistryName () /PDFXTrapped /False

/CreateJDFFile false /Description > /Namespace [ (Adobe) (Common) (1.0) ] /OtherNamespaces [ > /FormElements false /GenerateStructure false /IncludeBookmarks false /IncludeHyperlinks false /IncludeInteractive false /IncludeLayers false /IncludeProfiles true /MarksOffset 6 /MarksWeight 0.250000 /MultimediaHandling /UseObjectSettings /Namespace [ (Adobe) (CreativeSuite) (2.0) ] /PDFXOutputIntentProfileSelector /NA /PageMarksFile /RomanDefault /PreserveEditing true /UntaggedCMYKHandling /LeaveUntagged /UntaggedRGBHandling /LeaveUntagged /UseDocumentBleed false >> > ]>> setdistillerparams> setpagedevice

einführung in sapui5 -...

Documents