Leseprobe

Transcription

Leseprobe

Wissen aus erster Hand.
Leseprobe
Webentwicklung 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 installieren und die Entwicklungsumgebung auf dem Frontend einrichten.
Kapitel 4: »Erste Schritte in SAPUI5«
Inhaltsverzeichnis
Index
Der Autor
Miroslav Antolovic
Einführung in SAPUI5
446 Seiten, gebunden, März 2014
69,90 Euro, 978-3-8362-2753-7
www.sap-press.de/3533
In diesem Kapitel lernen Sie den SAP NetWeaver Application Server ABAP kennen. Sie installieren die SAPUI5-Bibliothek 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.
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
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
Sollten Sie über kein SAP-Backend-System verfügen, können Sie Ihre
Anwendungen auch auf einen lokalen Webserver, z. B. einen ApacheHTTPD-Server (als Download von der Homepage Apache.org), deployen. Sollten Sie keinen Zugang zum SAP Service Marketplace haben, 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 lediglich Eclipse und die SAPUI5-Frontend-Tools installieren. In diesem
Szenario können Sie die Vorschaufunktion in Eclipse nutzen und sich
das Ergebnis dort anzeigen lassen. In diesem Fall können Sie
Abschnitt 4.1, »Installation der SAPUI5-Bibliothek in der SAP Business Suite«, überspringen und direkt mit Abschnitt 4.2, »Einrichten
103
Lokaler Webserver
4
Installation der SAPUI5-Bibliothek in der SAP Business Suite
der Entwicklungsumgebung«, fortfahren. Für diese lokalen Entwicklungen 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
Download der
Komponenten
Installation der SAPUI5-Bibliothek in der
SAP Business Suite
Verzeichnis, und installieren Sie die Pakete mit dem SAP Add-On
Installation Tool (Transaktion SAINT), bzw. führen Sie ein Update
(Transaktion SPAM) durch. Eine ausführliche Installationsanleitung
finden Sie im SAP-Hinweis 1747308 (Installat.Leitf.: UI Development
Toolkit for HTML5 (SAPUI5)).
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).
UI Development
Toolkit for HTML5
SAPUI5 ist als Add-on in die SAP Business Suite integriert. Die Installationspakete finden Sie im SAP Software Download Center (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 AddOn 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 (Abbildung 4.1).
Abbildung 4.2 UI Development Toolkit for HTML 5
Sollten Sie ein anderes Ergebnis erhalten, prüfen Sie, ob der entsprechende Service aktiv ist. Gehen Sie dazu in die Transaktion SICF, und
aktivieren Sie gegebenenfalls den Service default_host/sap/public/bc/
ui5_ui5/ (siehe Abbildung 4.3).
Abbildung 4.1 Maintenance Optimizer im SAP Solution Manager
Installation
Laden Sie die berechneten Support Packages und das Stack-XML herunter. Entpacken Sie anschließend die Support Packages in das EPS-
104
4.1
Die in diesem Buch gezeigten Beispiele basieren auf der zum Zeitpunkt 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.
105
ICF-Service
aktivieren
4
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-Version 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 Zeitpunkt aktuelle Version Juno 4.2 installiert. Verwenden Sie auch hier
stets die aktuelle, von SAP freigegebene Version.
Abbildung 4.3 Service aktivieren
Laden Sie als Erstes Eclipse IDE for Java EE Developers unter
www.eclipse.org/downloads herunter. Da der SAPUI5 Team Provider
nur mit der 32-Bit-Version funktioniert, laden Sie die 32-Bit-Version
herunter. Nach dem Entpacken der ZIP-Datei können Sie Eclipse
direkt 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).
Nach der erfolgreichen Installation der Backend-Komponente widmen wir uns nun der Installation der SAPUI5-Frontend-Tools.
4.2
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 Einchecken der in Eclipse entwickelten Anwendungen in ein ABAPBackend-System.
4.2.1
JRE
Installationsvoraussetzungen
Abbildung 4.4 Plug-in-Komponenten installieren
Die Entwicklerwerkzeuge für SAPUI5 müssen separat als EclipsePlug-in installiert werden. Prüfen Sie vor der Eclipse-Installation, ob
106
107
Eclipse IDE for Java
EE Developers
4
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-Versionen finden Sie unter http://eclipse.org/babel/downloads.php. Dort finden Sie im Bereich Babel Language Pack Zips and Update Sites 폷
Babel Language Pack Zips die entsprechende URL, z. B. http://download.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 UpdateSeite 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.
Im Folgebild sehen Sie die Komponenten, die in diesem Schritt installiert werden. Bestätigen Sie Ihre Auswahl mit Next, akzeptieren Sie
im Folgebild die Lizenzvereinbarungen, und starten Sie über den Button Finish die Installation. Bei manchen Komponenten kommt ein
Warnhinweis, dass Sie unsignierte Komponenten installieren würden. Bestätigen Sie das entsprechende Pop-up-Fenster mit OK (siehe
Abbildung 4.6), und fahren Sie mit der Installation fort.
Komponentenauswahl
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 Abbildung 4.7).
Abbildung 4.7 Neustart von Eclipse
Nach dem Neustart von Eclipse ist die Oberfläche deutschsprachig.
Als nächsten Schritt müssen weitere Standard-Plug-ins installiert werden. Das Plug-in ABAP in Eclipse setzt einige Standard-Plug-ins voraus. Im nächsten Schritt installieren Sie diese Pakete. Die hier aufgeführte Liste bezieht sich auf die Version ABAP in Eclipse 2.16;
überprüfen Sie daher in den unten genannten SAP-Hinweisen, welche Installationsvoraussetzungen für Ihre Version gelten.
Abbildung 4.5 Sprachpaket für Deutsch auswählen
108
Starten Sie den Installations-Wizard über den Menüpfad Hilfe 폷 Neue
Software installieren, und geben Sie unter work with die UpdateSeite Ihrer Eclipse-Installation an (in diesem Beispiel die Juno-
109
Notwendige
Plug-ins
4.2
4
Update-Seite http://download.eclipse.org/releases/juno). Wählen Sie
nun aus der Liste im mittleren Bildschirmbereich die folgenden Komponenten aus:
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.
왘
EclipseRT Target Platform Components 폷 EMF – Eclipse Modeling Framework
왘
EclipseRT Target Platform Components 폷 Jetty Target Components
왘
Modeling 폷 EMF – Eclipse Modeling Framework SDK
왘
Modeling 폷 EMF Compare SDK
왘
Modeling 폷 EMF Validation Framework SDK
Nachdem Sie die Dateien aus dem SAP Service Marketplace heruntergeladen 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 ZIPDatei aus (siehe Abbildung 4.8).
왘
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
SAPUI5Komponenten
Nachdem Sie die notwendigen Standardkomponenten installiert
haben, können Sie nun die SAPUI5-Tools installieren. Für die Entwicklung 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 Provider
benö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-
110
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 beschrieben wurde, und wiederholen Sie den Vorgang für die beiden verbleibenden Komponenten. Damit ist die Installation von Eclipse IDE for
Java EE Developers abgeschlossen.
111
4.2
SAPUI5-Plug-ins
installieren
4
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-Hinweisen:
왘
Hinweis 1747308 (Installat.Leitf.: UI Development Toolkit for
HTML5 (SAPUI5))
왘
Hinweis 1718399 (ABAP-Entwicklerwerkzeuge für SAP NetWeaver)
4.2.3
Installierte
Komponenten
SAPUI5-Entwicklungsszenarien
Update der Komponenten
Es wird empfohlen, die Eclipse-Komponente Eclipse IDE for Java EE
Developer zu aktualisieren. Diese Komponente beinhaltet die Codevervollstä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.11 Installierte Komponenten
Abbildung 4.10 Info über Eclipse
Über den Button Installationsdetails können Sie sich die Versionen 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 Lizenzvereinbarungen, und starten Sie die Installation mit Installieren.
112
Bevor wir die erste SAPUI5-Seite anlegen, möchte ich Ihnen die möglichen 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 Entwicklung von Anwendungen in SAPUI5 zu starten.
4.3
SAPUI5 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
113
Plattformen
4.3
4
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
Corporate Design
und Styleguide
Ein weiterer, wesentlicher Vorteil ist, dass die Entwicklung in Eclipse
stattfindet und somit aus Entwicklersicht nicht mehr zwischen verschiedenen 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.
Durch CSS3 können die Oberflächen sehr leicht an die Anforderungen 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 Geschwindigkeitsnachteil zwar minimiert werden, aber dennoch wird eine HTMLSeite 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.
114
4.3.1
4.3
Entwicklung auf dem SAP NetWeaver Application
Server ABAP
Das hauptsächliche Entwicklungsszenario ist die Entwicklung von
Desktop-Anwendungen mit einem SAP-NetWeaver-AS-ABAP-Backend. Bevor wir uns der Implementierung der ersten SAPUI5-Anwendung widmen, muss noch die Frage geklärt werden, wie der ABAPServer Anfragen aus dem Internet entgegennimmt und verarbeitet.
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 gerendert 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 verarbeitet? 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.
/Webbrowser
/SAP NetWeaver
Application Server
ABAP
/Datenbank
HTTP-Anfrage (Request)
Datenbeschaffung
Selektionsergebnis
HTTP-Antwort (Response)
Abbildung 4.12 SAP NetWeaver Application Server ABAP
115
SAP NetWeaver
Application Server
ABAP
4
Internet
Communication
Manager
Der Internet Communication Manager (ICM) gewährleistet die Kommunikation zwischen SAP NetWeaver AS und Webbrowser (siehe
Abbildung 4.13). Streng genommen handelt es sich nicht um eine
reine HTTP-Kommunikationskomponente, sondern der ICM beinhaltet 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 innerhalb des SAP NetWeaver AS und wird vom Dispatcher gestartet und
überwacht.
Webbrowser
Request
Response
SAP NetWeaver Application Server ABAP
ABAP-Internet-Communication-Manager
Internet Communication Framework
ICF-Controller
Server-Roundtrip. Anhand der URL wird der eigentliche HTTPRequest-Handler ermittelt und die Anfrage an den Handler weitergeleitet. 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 verarbeitet und das Ergebnis im HTTP-Strom wieder an die Anwendung
zurückgegeben.
Wenn Sie sich bisher mit der Webentwicklung innerhalb des SAPSystems (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 administrativen 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-Informationen die notwendigen Informationen.
ICF-Manager (IF HTTP SERVER)
HTTP-Request-Handler (IF HTTP EXTENSION)
Applikation
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-
116
4.3
Abbildung 4.14 Transaktion SICF
117
Port-Information
4
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).
4.3.2
4.3
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
Das Interface implementiert die Methode HANDLE_REQUEST; diese
wird bei einer Anfrage an den entsprechenden ICF-Knoten ausgefü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_REQUEST
der Klasse ZUI5_HTTP_HANDLER die folgende Codezeile hinzu:
server->response->set_status( code = 200 reason = 'OK' ).
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.
118
Abbildung 4.17 Methode HANDLE_REQUEST
119
Methode
HANDLE_REQUEST
4
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 wirkungslos!)
Service anlegen
Geben 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).
4.3
HTTP-Handler
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 Abbildung 4.18).
Abbildung 4.20 HTTP-Handler am Service
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.
Speichern Sie den Service ab, und verlassen Sie über zurück das Pflegebild. 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
Abbildung 4.19 Service anlegen
120
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
121
Service aktivieren
4
Model-View-Controller-Architekturmuster
Service erreichbar ist, erscheint ein Pop-up-Fenster, in dem Sie Ihren
SAP-Benutzernamen und das Passwort für das System eingeben müssen. Nach der erfolgreichen Anmeldung bleibt der Aufruf am gesetzten externen Breakpoint stehen (siehe Abbildung 4.22).
nen die einzelnen Komponenten leichter erweitert, ausgetauscht
oder wiederverwendet werden. Abbildung 4.23 zeigt dieses Architekturmuster.
Model
Controller 2
Controller 2
View 1
View 2
Abbildung 4.23 Model-View-Controller-Architekturmuster
Abbildung 4.22 HTTP-Handler im Debugger
Fehlersuche
4.4.1
Sollte der Service nicht erreichbar sein, kann dies viele Ursachen haben.
Die häufigsten Fehler sind ein inaktivierter Service (im ICF-Baum grau dargestellt), eine fehlerhafte Konfiguration des ICF oder gesperrte Ports in der
Firewall. Eine gute Ausgangsbasis für die Fehleranalyse ist der ICM-Monitor (Transaktion SMICM). Dort können Sie über den Menüpfad Springen
폷 Trace-Datei 폷 Alles anzeigen das ICM-Trace aufrufen.
Das 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 dazugehö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
MVC
Durch diese Trennung können z. B. zwei verschiedene Endgeräte das
gleiche Model verwenden; der View wird z. B. einmal für die Desktop-Anwendung und einmal für das mobile Endgerät implementiert.
Das Model-View-Controller-Architekturmuster strukturiert die Softwareentwicklung in die drei Einheiten Datenmodell (Model), Präsentation (View) und Steuerung (Controller). Durch diese Trennung kön-
122
4.4.2
Model
View
Die Präsentationsschicht ist für die Darstellung auf dem Endgerät
zuständig. Der View nimmt die Benutzeraktionen entgegen, verarbeitet diese aber nicht, sondern gibt sie an den Controller weiter.
123
Publisher
4.4
4
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 Kommunikation zum Model.
4.4.4
MVC-Muster
Zusammenspiel bei der Webentwicklung
Bei Webanwendungen erstreckt sich das MVC-Muster über Server
und Browser und ist damit etwas komplexer als das klassische MVCMuster. 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.
Controller
Update
Benachrichtigung
Model
(JSON, XML, OData)
Abbildung 4.25 SAPUI5-Anwendungsprojekt
Benutzerinteraktion
Update
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).
View
SAP-Bibliotheken
Abbildung 4.24 MVC-Architekturmuster
4.4.5
SAPUI5-Projekt
anlegen
MVC in SAPUI5
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öchten. 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 Assistenten SAPUI5-Anwendungsentwicklung 폷 Anwendungsprojekt aus,
und bestätigen Sie Ihre Auswahl mit dem Button Weiter.
Abbildung 4.26 SAPUI5-Projekt nach dem MVC-Muster
124
125
4.4
4
Entwicklungsmodell
Wenn Sie diese Option wählen, werden Sie im Folgebild gefragt, welches Entwicklungsmodell Sie verwenden möchten (siehe Abbildung
4.27). Mit dem Entwicklungsmodell legen Sie fest, in welchem Format 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
4.4
<template data-controller-name="html.HTML">
</template>
Listing 4.1 SAPUI5-Rumpf – HTML-View
Wenn Sie sich für das Entwicklungsmodell XML entscheiden, wird
der Rumpf aus Listing 4.2 generiert:
XML-View
<core:View xmlns:core="sap.ui.core" xmlns:mvc="sap.ui.core.m
vc" xmlns="sap.ui.commons"
controllerName="xml.XML"
xmlns:html="http://www.w3.org/1999/xhtml">
</core:View>
Listing 4.2 SAPUI5-Rumpf – XML-View
Das am häufigsten verwendete Entwicklungsmodell ist JavaScript
(siehe Listing 4.3). Alle Beispiele aus diesem Buch basieren auf diesem 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";
},
Abbildung 4.27 Entwicklungsmodell wählen
HTML-View
Je nach Auswahl generiert die Entwicklungsumgebung einen entsprechenden Rumpf der Seite. Wenn Sie sich für das Entwicklungsmodell HTML entscheiden, generiert der Wizard das Template aus
Listing 4.1:
/
** Is initially called once after the Controller has been in
stantiated. It is the place where the UI is constructed.
* Since the Controller is given to this method, its event ha
ndlers can be attached right away.
* @memberOf js.JS
*/
createContent : function(oController) {
}
});
Listing 4.3 SAPUI5-Rumpf – JavaScript-View
126
127
JavaScript-View
4
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:
Erstes Beispiel
4.5
Erstes Beispiel
Wir beginnen mit einer Seite, die nicht nach dem MVC-Muster angelegt ist. Wählen Sie hierzu in Eclipse den Menüpfad Datei 폷 Neu 폷
Projekt. Wählen Sie dann im Projekt-Wizard SAPUI5-Anwendungsentwicklung 폷 Anwendungsobjekt aus, und klicken Sie auf Weiter.
Geben Sie dem Projekt anschließend einen passenden Namen (in diesem 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:
왘
onInit – bei der Initialisierung
1 Bibliotheken
왘
onBeforeRendering – vor dem Rendern der Seite
2 Content
왘
onAfterRendering – nach dem Rendern der Seite
3 Bootstrap
왘
onExit – wenn der Controller zerstört wird, z. B. beim Schließen
der Seite
4 Applikation
5 UI-Bereich
Doch was bedeutet nun diese Trennung? Durch die strikte Verwendung des MVC-Musters können Sie einzelne Views auch als Fragmente implementieren und sie sehr einfach in anderen Seiten
wiederverwenden. Alle Ereignisse der Seite werden in der entsprechenden Controller-Datei behandelt, und die Reaktion auf ein Ereignis 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 Controller anlegen. Auch wenn dies nicht zwingend notwendig ist, ist es
durch diese Trennung leichter möglich, einen View mit dem korrespondierenden Controller auszutauschen.
Jetzt ist es an der Zeit, die Theorie in die Praxis umzusetzen. Zum
Abschluss dieses Kapitels legen Sie nun Ihre ersten beiden SAPUI5Anwendungen an, einmal ohne das MVC-Architekturmuster und einmal nach dem MVC-Muster.
Abbildung 4.28 SAPUI5-Projekt ohne MVC-Muster
128
4.5
129
SAPUI5 ohne MVC
4
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) implementieren.
SAPUI5-Demo-Kit
In unserem einfachen Fall möchten wir einen Button implementieren, der nach dem Anklicken ein alert-Pop-up-Fenster ausgibt. Öffnen 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. Alternativ 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.
Erstes Beispiel
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).
Konstruktorfunktion
Abbildung 4.30 Der Konstruktor sap.ui.commons.Button
Wenn Sie sich nach einer Weile gut in der SAPUI5-Bibliothek auskennen, können Sie gänzlich auf die API-Dokumentation verzichten. Über
die Tastenkombination (Strg) + (Leertaste) wird Ihnen die Dokumentation auch in Eclipse angezeigt. Mit einem Doppelklick wird das entsprechende Codemuster eingefügt (siehe Abbildung 4.31).
Abbildung 4.29 Button-Control in SAPUI5
130
131
Codevervollständigung
4.5
4
Erstes Beispiel
4.5
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:
Abbildung 4.32 placeAt-Funktion
var oButton = new sap.ui.commons.Button({
text : "Drück mich",
press : handleButtonClicked
});
Achten Sie darauf, dass Sie der placeAt-Funktion die Bezeichnung für
das <div>-Element aus dem <body>-Bereich mitgeben müssen (in Listing 4.7 content).
Listing 4.5 Button
Event Listener
Aus dem Button-Event press haben wir den Event Listener handleButtonClicked registriert; diese Funktion soll lediglich ein alertFenster ausgeben (siehe Listing 4.6):
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
Listing 4.6 Event Handler
<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>
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).
<script>
});
function handleButtonClicked() {
alert("Gedrückt");
};
function handleButtonClicked() {
alert("Gedrückt");
132
133
placeAt-Funktion
4
Erstes Beispiel
};
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 Kontextmenüoption Ausführen als 폷 Vorschau von Webanwendung. Im
mittleren Teil öffnet sich eine neue Registerkarte mit einem integrierten Webbrowser, in dem die Seite angezeigt wird. Jetzt können Sie
auf den Button klicken, und es sollte sich die entsprechende alertMeldung »Gedrückt« öffnen (siehe Abbildung 4.33).
im Konstruktor mit der JSON-Notation deklariert. Selbstverständlich
können Sie den Konstruktor auch leer aufrufen und dann die entsprechenden GET- und SET-Methoden des Controls verwenden. In Listing
4.8 sind die beiden Möglichkeiten dargestellt:
// JSON Notation
});
// 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 Setter, da dadurch der Quellcode leichter lesbar ist; die JSON-artige
Notation wird aufgrund der vielen Klammern schnell unübersichtlich.
Nun legen wir dieses Beispiel erneut an; diesmal nach dem MVCMuster.
Legen Sie das SAPUI5-Anwendungsprojekt ZUI5_MIT_MVC an, setzen 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 Entwicklungsmodell entscheiden (siehe Abbildung 4.34). Geben Sie als ViewNamen »main« an, und wählen Sie das Entwicklungsmodell JavaScript aus. Bestätigen Sie Ihre Eingaben mit Fertigstellen.
Abbildung 4.33 Erstes Anwendungsbeispiel in der Vorschau
Herzlichen Glückwunsch, Sie haben soeben Ihre erste SAPUI5-Anwendung implementiert!
Schreibweisen
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).
Noch ein paar Worte zur allgemeinen Schreibweise: In diesem Beispiel haben wir die notwendigen Attribute und Eigenschaften bereits
134
135
SAPUI5 in MVC
4.5
4
Erstes Beispiel
<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
In 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 Beispiel müssen Sie zusätzlich die Funktion handleButtonClicked implementieren. Den Unterschied zwischen den beiden Entwicklungsansätzen veranschaulicht Abbildung 4.36.
View
View
Abbildung 4.34 View anlegen
Ohne MVC-Muster
myButton.setText("Drück mich");
<script>
oButton.attachPress(oController.
handleButtonClicked);
return oButton;
oButton.attachPress(function() {
alert("Gedrückt");
});
myButton.placeAt("content");
</script>
Controller
handleButtonClicked: function() {
alert("Gedrückt");
}
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) {
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):
136
oButton.attachPress(oController.handleButtonClicked);
137
4.5
4
Erstes Beispiel
return oButton;
}
Listing 4.10 view.js
In unserem Beispiel ohne MVC hatten Sie den Button mit der placeAt-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 handleButtonClicked 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 Zeichencodierung auf UTF-8 gesetzt.
SAPUI5 Team
Provider
Abbildung 4.37 Projekt teilen
Sie haben soeben Ihre erste SAPUI5-Anwendung nach dem MVCMuster implementiert! Als letzter Schritt bleibt nur noch die Aufgabe, die erstellte Seite im ABAP-Backend einzuchecken. Auch diese
Aufgabe ist durch die Unterstützung des SAPUI5 Team Providers
denkbar 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).
Abbildung 4.38 SAPUI5-ABAP-Repository
138
139
4.5
4
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 Provider aus der SAP-GUI-Installation.
Erstes Beispiel
Geben Sie im Folgebild die Anmeldedaten für das entsprechende System ein, und klicken Sie auf Weiter (siehe Abbildung 4.41).
Abbildung 4.41 Anmeldedaten
Geben 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.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
140
Abbildung 4.42 BSP-Anwendung anlegen
141
Lokales Objekt
4.5
4
Erstes Beispiel
Bei lokalen Entwicklungen (Paket $TMP) müssen Sie im Folgebild
keinen Transportauftrag angeben. Bei transportierbaren Objekten
wählen Sie entweder einen vorhandenen Transportauftrag aus, oder
Sie legen einen neuen Transportauftrag an (siehe Abbildung 4.43).
Abbildung 4.44 Zu sendende Ressourcen auswählen
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 Kontextmenü 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 letzten 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 generiert, 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 entsprechende Warnmeldung, siehe Abbildung 4.45.
142
Abbildung 4.45 Versionsprüfung
In diesem Fall sollten Sie Ihre Anwendung auf dem SAP-Server ausgiebig 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/<BSPAnwendungsname>/ erreichbar. Nach der Anmeldung am System sollten Sie das folgende Ergebnis erhalten (siehe Abbildung 4.46).
143
4.5
4
Abbildung 4.46 Erste SAPUI5-Anwendung im SAP-Backend
Herzlichen Glückwunsch, Sie haben soeben Ihre erste SAPUI5Anwendung im SAP-Backend aufgerufen!
Im folgenden Kapitel 5, »SAPUI5-Laufzeitumgebung«, gehe ich detailliert auf die wichtigsten Komponenten und Controls der SAPUI5Bibliothek ein.
144
Inhalt
Inhalt
Einleitung ..................................................................................... 11
1
HTML5 und CSS3 ..................................................... 17
1.1
1.2
2
Einführung in HTML5 .................................................
1.1.1 Dokument-Grundgerüst .................................
1.1.2 Wichtige Sprachelemente ...............................
Einführung in CSS .......................................................
1.2.1 Allgemeiner Aufbau .......................................
1.2.2 CSS in HTML einbinden .................................
1.2.3 Selektoren ......................................................
1.2.4 Beispiel ..........................................................
18
18
23
34
34
35
38
41
JavaScript ................................................................. 45
2.1
2.2
2.3
2.4
2.5
Grundlagen .................................................................
2.1.1 Protokollierung ..............................................
2.1.2 Positionierung von JavaScript-Code ................
2.1.3 Kommentare ..................................................
2.1.4 Funktionen ....................................................
2.1.5 Objekte ..........................................................
Variablen ....................................................................
Operatoren .................................................................
2.3.1 Rechenoperatoren ..........................................
2.3.2 Inkrement- und Dekrementoperatoren ...........
2.3.3 Zuweisungsoperatoren ...................................
2.3.4 Vergleichsoperatoren .....................................
2.3.5 Der typeof-Operator ......................................
2.3.6 Logische Operatoren ......................................
Kontrollstrukturen – Bedingungen und Schleifen .........
2.4.1 Die if-Anweisung ...........................................
2.4.2 Die switch-Anweisung ...................................
2.4.3 Die for-Schleife ..............................................
2.4.4 Die while-Schleife ..........................................
2.4.5 Die do-while-Schleife .....................................
2.4.6 Die for-in-Schleife ..........................................
Document Object Model ............................................
2.5.1 Der DOM-Baum ............................................
45
46
47
48
48
51
54
58
58
58
59
59
60
60
61
61
62
65
67
69
69
71
72
7
Inhalt
Inhalt
2.6
3
3.3
3.4
4.2
4.3
4.4
4.5
Grundlagen ................................................................
Selektoren und Ereignisse ..........................................
3.2.1 Selektoren .....................................................
3.2.2 Ereignisse ......................................................
DOM-Manipulation ...................................................
AJAX ..........................................................................
83
85
85
89
91
95
Installation der SAPUI5-Bibliothek in der
SAP Business Suite .....................................................
Einrichten der Entwicklungsumgebung .......................
4.2.1 Installationsvoraussetzungen .........................
4.2.2 Installation ....................................................
4.2.3 Update der Komponenten .............................
SAPUI5-Entwicklungsszenarien ..................................
4.3.1 Entwicklung auf dem SAP NetWeaver
Application Server ABAP ...............................
4.3.2 Eigenen Service anlegen ................................
Model-View-Controller-Architekturmuster .................
4.4.1 Model ...........................................................
4.4.2 View .............................................................
4.4.3 Controller ......................................................
4.4.4 Zusammenspiel bei der Webentwicklung .......
4.4.5 MVC in SAPUI5 .............................................
Erstes Beispiel ............................................................
5.5
104
106
106
107
112
113
5.2
Initialisierung der Anwendung ...................................
5.1.1 SAPUI5-Ressourcen .......................................
5.1.2 Controls ........................................................
5.1.3 SAPUI5-Theming ...........................................
Models der Datenbindung .........................................
5.2.1 JSON Model ..................................................
5.2.2 XML Model ...................................................
5.6
6
146
147
150
151
156
157
164
6.3
6.4
6.5
6.6
6.7
6.8
7
5.2.3 Resource Model .............................................
5.2.4 OData Model .................................................
5.2.5 Binding-Möglichkeiten ...................................
Mehrsprachige Anwendungen ....................................
SAPUI5-Datentypisierung ...........................................
5.4.1 Ganze Zahlen .................................................
5.4.2 Gleitkommazahlen .........................................
5.4.3 Zeichenketten ................................................
5.4.4 Boolesche Variable .........................................
5.4.5 Datum ...........................................................
5.4.6 Uhrzeit ...........................................................
5.4.7 Datum und Uhrzeit ........................................
5.4.8 Formatter-Klassen ..........................................
5.4.9 Eigene Typen .................................................
Layout-Anpassung über eigene CSS ............................
5.5.1 CSS anpassen .................................................
5.5.2 Theme Designer .............................................
Kommunikation mit dem SAP-Backend ......................
165
168
170
180
185
186
187
187
188
188
190
190
190
190
192
193
197
205
SAPUI5-Controls ...................................................... 213
6.1
6.2
115
119
122
123
123
124
124
124
129
SAPUI5-Laufzeitumgebung ...................................... 145
5.1
8
5.3
5.4
Erste Schritte in SAPUI5 .......................................... 103
4.1
5
72
74
79
jQuery ....................................................................... 83
3.1
3.2
4
2.5.2 Elemente ansprechen ....................................
2.5.3 DOM-Manipulation ......................................
Ereignisse ...................................................................
API-Referenz ..............................................................
Common-Controls (sap.ui.commons) ..........................
6.2.1 Layout ............................................................
6.2.2 UI-Controls ....................................................
UX3-Controls (sap.ui.ux3) ...........................................
Table-Control (sap.ui.table) ........................................
Charts (sap.viz) ...........................................................
Controls für mobile Anwendungen .............................
Suite-Controls (sap.suite.) ...........................................
Eigene Controls ..........................................................
214
218
218
246
266
267
268
268
269
270
Beispielentwicklung einer Anwendung ................... 275
7.1
Das UI-Design ............................................................
7.1.1 Startseite ........................................................
7.1.2 Zeiterfassung ..................................................
7.1.3 Urlaubsantrag ................................................
7.1.4 Mitarbeiterverzeichnis ....................................
7.1.5 Routenplanung ..............................................
7.1.6 Meine Daten ..................................................
275
276
276
277
278
279
280
9
Inhalt
7.2
8
280
281
287
293
298
305
315
331
SAP NetWeaver Gateway ........................................ 343
8.1
8.2
8.3
8.4
8.5
9
Implementierung .......................................................
7.2.1 Grundsätzlicher Aufbau .................................
7.2.2 Mitarbeiterverzeichnis ...................................
7.2.3 Routenplanung ..............................................
7.2.4 Meine Daten .................................................
7.2.5 Aufgaben ......................................................
7.2.6 Zeiterfassung .................................................
7.2.7 Urlaubsantrag ................................................
Grundlagen von SAP NetWeaver Gateway .................
Installation .................................................................
Konfiguration .............................................................
OData-Service implementieren ..................................
OData-Service konsumieren .......................................
343
345
346
348
364
SAP HANA ................................................................ 369
9.1
9.2
9.3
XS Engine .................................................................. 370
HANA-Zugang ........................................................... 371
Implementierung der Beispielanwendung .................. 377
10 Mobile Anwendungen .............................................. 391
10.1
10.2
10.3
10.4
Installation .................................................................
Einführung in SAPUI5 for Mobile ...............................
Mobile Lösungen mit SAPUI5 entwickeln ...................
10.3.1 Seitenaufbau von mobilen Anwendungen ......
10.3.2 Seitennavigation ............................................
10.3.3 Wo bin ich? ...................................................
10.3.4 SplitApp-Control ...........................................
10.3.5 Ereignisse auf mobilen Geräten .....................
Anwendungsbeispiel ..................................................
10.4.1 Backend-Implementierung ............................
10.4.2 Frontend-Implementierung ...........................
393
394
395
395
399
402
403
405
405
405
413
Anhang ........................................................................... 435
A
B
Weiterführende Informationsquellen .......................... 435
Über den Autor .......................................................... 437
Index .......................................................................................... 439
10
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, 110
AbsoluteLayout-Control 219
Accordion 262
Accordion-Control 331, 333
Accordion-Section 333
addStyleClass 193
Aggregation Binding 170, 171, 332
AJAX 95, 205, 238
asynchrone Verarbeitung 97
Parameterübergabe 209
readyState 97
SAP-Backend 240
send() 98
synchrone Verarbeitung 97
AJAX()-Objekt 99
AJAX-Call 240
AJAX-Parameter 208
alert 51
Analytic View 370, 387
analytische Berechtigung 383
Anker 28
Anmeldesprache 168
Anwendung, mobile 268
API-Dokumentation 130, 213
API-Referenz 215
ApplicationHeader 262
ApplicationHeader-Control 262
Architekturmuster 123
Array 72
Asynchronous JavaScript and XML 씮
AJAX
Attribute View 370
Ausgabeformat, Datum 189
AutoComplete 252, 253
B
Basis-Theme 198
Berechtigung vergeben 384
Binding 165, 170
Binding im DOM 164
bindListData 417, 428
Blockelement 26
Blue Crystal 151, 394
boolesche Werte 57
Bootstrap 145, 146
BorderLayout-Control 227
break 64
Browser 17
Browserentwicklertools 46, 193, 288
Browserspezifika 42
BSP-Anwendung 142
BusinessCard-Control 269
Button 247, 248
C
Calculation View 370, 380, 381, 386
Calendar-Control 269, 331
CalendarLegend-Control 331
Call by Reference 52
Call by Value 52
Carousel 262
Cascading Style Sheet 씮 CSS
Chart-Controls 269
Checkbox 252, 257, 309, 319
CL_HTTP_SERVER 116
ComboBox 252, 253, 254
Complex Binding 179
439
Index
Index
Control 213
eigenes 270
Controller 122, 124
Corporate Design 114
createContent 137
CRUD-Operation 168, 344
CSS 34, 192
anpassen 193
Reihenfolge 195
CSS-Deklaration 34
CSS-Hierarchie 35, 38
CSS-Parameter 192
CSS-Regel-Spezifität 39
CSS-Selektor 39
Custom-Control 315, 322
CustomData-Attribut 321
D
Data Binding 156
JSON Model 156
OData Model 156
Resource Model 156
XML Model 156
Data-Binding-Muster 156
Datejs 317
Datenbanktunnel 374
Datenmodell 349
Daten-Provider-Klasse 348
Datentyp 185
Datentyp Integer 186
Datentypisierung 185
Datenübertragung 238
Datenvorschau 386
DatePicker 252, 254
DatePicker-Control 322
Datum formatieren 305
Datumsfelder 308
DB-Tunnel 373, 374
Deklaration (CSS) 34
Demo Kit 105, 130, 213
Detail-Sektion 403
DHTML 45
Diagramm 268
DialogBox-Control 282
document 71
Document Object Model 57, 71
Dokumentkompatibilitätsmodus 22
Dokumentkörper 22
440
DOM 57, 71
DOM-Baum 72
DOMContentLoaded 85
DOM-Eigenschaft 73
DOM-Manipulation 74, 91
DropdownBox 252
DropdownBox-Control 254
Drop-down-Liste 253
E
Eclipse 106
Codemuster 131
Download 107
Komponente installieren 108
Project Explorer 142
Projekt anlegen 124
Vorschaufunktion 134
ECMAScript 46
EDMX-Datei 349
eigenes Control 270
Element Binding 170, 174
Entitätenmenge 348, 352
Entitätstyp 348, 350, 351, 352
Entity Data Model 351
EPM-Demoszenario 380
Ereignis 79, 89
DOMContentLoaded 85
onAfterRendering 128
onBeforeRendering 128
onExit 128
onInit 128
Event Handler 80
Event Listener 80, 85, 132
EventBus 420
Event-Objekt 79
Events 216
Extended Application Service 씮 XS
Extended Data Binding 178
extend-Methode 270
externe Ressource 318
F
Factory-Funktion 85
fakeOS 395
Feldattribut 351
FileUpload 252
FileUploader 301
FileUploader-Control 255
Firebug 75
for 65
Formatierungsoption 186
FormattedTextView 247, 248
Formatter 190
Formatter-Klasse 190
Form-Container 230
Form-Control 230
FormElement 230
Formular 31, 230, 322
for-Schleife 320
Funktion JavaScript 48
G
Gateway aktivieren 347
Gateway-Service
aktivieren 354
Fehlerprotokoll 360
generieren 353
implementieren 359
Query-Option 357
Query-Parameter testen 358
testen 354
URL-Parameter 357
GET 32, 98
get_form_fields 208
GetEntitySet 358
GET-Methode 33
Gold Reflection 151
Google Maps 293
Google-API 293
Grid-Layout 231
singleColumn 232
GUID 180
GW_CORE 343
H
HANDLE_REQUEST 117, 119, 206
High Contrast Black 151
HorizontalLayout-Control 223
HTML 17
Dokumentkörper 19
Dokumenttypdeklaration 18
Element 18
Kopfbereich 19
Textabsatz 24
HTML (Forts.)
Textauszeichnung 27
Überschriften-Tag 23
Zeichenkodierung 19
HTML5 18
HTML-Control 247, 248
HTML-View 126
HTTP_DISPATCH_REQUEST 116
HTTP-Anfrage 115
HTTP-Handler 121, 206
HTTP-Kommunikation 205
HTTP-Statuscode 98
Hybrid-Web-Container 392
Hyperlink 28
Hypertext Markup Language 씮 HTML
I
i18n 166
ICF-Controller 116
ICF-Knoten 119, 206, 239, 306
ICF-Knoten anlegen 120
ICF-Service 105
ICM 116
ICM-Monitor 122
ID-Selektor 39
IF_HTTP_EXTENSION 119
if-Abfrage 60
Ikone 306
Image-Control 247, 248
ImageMap 247
ImageMap-Control 248
innerHTML 74
Installation SAPUI5 104
Installationsanleitung SAPUI5 105
Installationspaket SAPUI5 104
Internationalisierung 166
Internet Communication Manager
씮 ICM
IW_BEP 343
IW_FND 343
J
Java Runtime-Version
JRE 107
JavaScript 45
Ablauflogik 49
Argument 50
441
Index
Index
JavaScript (Forts.)
do-while-Schleife 69
for-in-Schleife 69
for-Schleife 65
Funktion 48
if 61
Kommentar 48
Konstruktor 51
Objekt 51
Punktnotation 52
return 50
Rückgabe 50
Sichtbarkeit von Variablen 55
switch 63
this 53
typeof 60
Variablendeklaration 54
Variablentyp 54
while 67
JavaScript-Code einbinden 47
JavaScript-Ereignis 80
JavaScript-View 126
JDBC 168
Join-Knoten 382
jQuery 83
AJAX()-Objekt 99
DOM-Manipulation 91
Ereignis 89
Factory-Funktion 85
hasAttribute-Selektor 86
Methoden verketten 88
Objekt 85
Punktnotation 88
ready-Funktion 85
Selektor 85, 86
jQuery einbinden 84
jQuery.device.is.desktop 403
jQuery.device.is.phone 403, 426
jQuery.device.is.tablet 403
jQuery.support.touch 403
jQuery-Bibliothek 83
jQuery-DOM-Funktion 93
jQuery-DOM-Manipulation 씮 DOMManipulation
jQuery-Ereignis
.bind 91
.blur 91
.change 91
.click 91
442
jQuery-Ereignis (Forts.)
.dbclick 91
.hover 91
.keypress 91
.keyup 91
.mousemove 91
.on 91
JScript 45
JSON 53, 157, 290
relativer Pfad 158
JSON in ABAP 208
JSON Model 157, 238, 253
JSON-Notation 54, 135
JSON-Response ABAP 206
JSON-View 126
K
Klassenselektor 39
Kommentar JavaScript 48
Konsole 46
Konstruktor 135, 216
Konstruktorfunktion 131
Kopfbereich HTML-Dokument 22
L
Label 247
Label-Control 249
Laufzeitumgebung 145
Laufzeitversion 150
Layout 192, 218
LDML 188
LESS 192
Link 247
Link-Control 249
ListBox 252
ListBox-Control 255
lokale Entwicklung 142
Loose Typing 56
M
Master-Sektion 403
MatrixLayout-Control 224, 247
MenuBar 262, 263
Methode 216
MIME-Repository 261, 307
mobile Anwendung 268
Mobile Visual Identity 151, 394
Model 122, 123
Model-Provider-Klasse 348
Model-View-Control 씮 MVC
Model-View-Control-Architekturmuster 씮 MVC-Architekturmuster
Multipart-Segment 258, 261
MVC 113, 122
Controller 124
Model 123
Muster 124
View 123
MVC-Architekturmuster 113, 122,
123, 128, 281
parseFloat 306, 309
PasswordField 252
PasswordField-Control 256
PhoneGap 395
placeAt 132
Platinum 151
Plattform SAPUI5 114
Port-Information 117
POST 32, 98
http 208
Property Binding 170
Protokollierung 46
Punktesystem, CSS-Gewichtung 39
Punktnotation 52, 88
N
R
Nachfahrselektor 39
Named Binding 177
NaN 57
NavContainer 399
navigate-Event 399
Negationsoperator 60
Nicht-Operator 304
NoteTaker-Control 269
NotificationBar 267
Notifier-Control 304
null 57
RadioButton 252, 256
Registerkarte 244
renderer-Methode 271
RenderManager 271
Representational State Transfer 343
Request 115
Request-Objekt 208
rerender-Funktion 301
Resource Model 165
Response 115
Responsive-Layout 234
Gewichtung 234
Ressource, externe 318
REST-Architektur 343
Ripple Emulator 393
RoadMap-Control 265
RowRepeater 262
RowRepeater-Control 288, 290
O
Objekt, transportierbares 142
OData 168, 343
OData Channel 343
OData-Bibliothek 343
OData-Filter 364
OData-Service 169, 343, 386
ODBC 168
oder-Operator 60
onAfterRendering 295
onBeforeFirstShow 417
Open Data 343
Open Data Protocol 168
P
Pane 242
Panel-Control 241
Parent-Child-Binding 174
S
SAP Fiori 245, 392
SAP HANA 369
Aggregation-Knoten 383
hdbrole 387
OData-Service 388
Repository Package 379
Repository-Zugriff 376
SQL Console 384
SAP HANA Client 373
SAP HANA Cloud Platform
Cockpit 371
443
Index
Index
SAP HANA Developer Studio 373
SAP HANA Repository Workspace
378
SAP HANA Studio 373
SAP NetWeaver Application Server
ABAP 103, 115
SAP NetWeaver Gateway 169, 343,
345
Datenmodell 349
SAP NetWeaver Gateway Developer
Guide 348
SAP NetWeaver Gateway Service
Builder 345, 348
sap.m 268, 394
sap.m.App 396, 397, 400
sap.m.Bar 426
sap.m.Button 401
sap.m.Carousel 425
sap.m.List 419, 425
sap.m.Page 397, 400, 419, 426
sap.m.Slider 401
sap.m.SplitApp 414
sap.m.Text 400
sap.makit 268
sap.me 268
sap.me.Calendar 332, 424
sap.me.CalendarEventType 336
sap.me.CalendarLegend 333
sap.suite 269
sap.ui.commons 218, 246
sap.ui.commons.Accordion 333
sap.ui.commons.AccordionSection
333
sap.ui.commons.Button 294, 301,
302, 325, 334, 338
sap.ui.commons.ComboBox 316,
323, 337
sap.ui.commons.DatePicker 313, 322
sap.ui.commons.Dialog 337
sap.ui.commons.FileUploader 302
sap.ui.commons.form.SimpleForm
313
sap.ui.commons.form.SimpleFormLayout.GridLayout 313
sap.ui.commons.Image 301
sap.ui.commons.Label 289, 290, 294,
300, 338
sap.ui.commons.layout.HorizontalLayout 289, 337, 338
444
sap.ui.commons.layout.MatrixLayout 289, 290, 300, 307, 331
sap.ui.commons.layout.MatrixLayoutCell 290, 300
sap.ui.commons.layout.MatrixLayoutRow 290
sap.ui.commons.layout.VerticalLayout 285, 295, 333, 337
sap.ui.commons.MessageBox 339
sap.ui.commons.RadioButton 324
sap.ui.commons.RatingIndicator 309
sap.ui.commons.RowRepeater 290
sap.ui.commons.TextArea 324, 337
sap.ui.commons.TextField 289, 294,
300
sap.ui.commons.TextView 289, 300,
307, 309, 331, 332
sap.ui.commons.Toolbar 308, 334
sap.ui.core.Control.extend 316
sap.ui.core.CustomData 426
sap.ui.core.EventBus 420
sap.ui.core.HTML 294
sap.ui.core.ListItem 323, 337
sap.ui.layout.VerticalLayout 302
sap.ui.model.Filter 289, 321, 323,
333, 427
sap.ui.model.FilterOperator 322, 323
sap.ui.model.json.JSONModel 287,
312, 327
sap.ui.model.odata.Filter 364
sap.ui.model.odata.ODataModel 364
sap.ui.model.type.DateTime 308,
319, 332
sap.ui.model.type.Time 319
sap.ui.table 267, 305
sap.ui.table.Column 308, 309, 319
sap.ui.table.Table 308, 319
sap.ui.ux3 266
sap.ui.ux3.NotificationBar 286
sap.ui.ux3.Notifier 286
sap.ui.ux3.OverlayDialog 284
sap.ui.ux3.Shell 282
sap.ui.ux3.ToolPopup 314
sap.ui-Klasse 216
sap.viz 268, 305
sap.viz.ui5.data.FlattenedDataset
310, 326
sap.viz.ui5.Donut 310
sap.viz.ui5.Line 326
SAP-Hinweis 112
SAP-Standardsymbol 306
SAPUI5
addStyleClass 193
Aggregation Binding 171
Anwendungsobjekt 129
Anwendungsprojekt 124
API-Dokumentation 130
Bibliothek einbinden 150
bindAggregation 172
bindProperty 171
boolesche Variable (Datentyp) 188
Bootstrap 146
Complex Binding 179
createContent 137
Custom-Control 315
Data Binding 156
Datentyp 185
Datum (Datentyp) 188
Debug-Modus 150
Demo Kit 130
eigener Typ 190
einchecken 142
Element Binding 174
Event Listener 132
Extended Data Binding 178
ganze Zahl (Datentyp) 186
Gleitkommazahl (Datentyp) 187
HTML-View 126
Installation 104
JavaScript-View 126
JSON-View 126
Klasse 150
Laufzeitversion 150
loadData 205
MVC 135
Named Binding 177
Namensraum 150, 214
placeAt 132
Property Binding 170
renderer 317
Ressource 148
Ressourcenpfad 149
Schreibweise 134
Seitenrumpf 128
setModel 170
sprachabhängige Datei 165
Sprache ermitteln 168
Team Provider 107, 110, 138
SAPUI5 (Forts.)
Theme 151
Übersetzung 180
Uhrzeit (Datentyp) 190
Versionsprüfung 142
vordefiniertes Ereignis 128
XML View 126
Zeichenkette (Datentyp) 187
SAPUI5-Bibliothek 106
SAPUI5-Komponente Tools IDE Plugin
110
SAPUI5-Plug-ins installieren 111
screen 71
SE63 183
SearchField 252
SearchField-Control 256
SegmentedButton 263
SEGW 348
Selektor 34, 38
Semantische Trennung 23
Service aktivieren 121
Service anlegen 120
Service ICF 119
Service Marketplace 110
Service-Katalog 354
Shell 266, 281
content 282
designType 286
headerItem 281
Suchfunktion 291
WorksetItem 281
Shell-Control 281
SimpleForm-Container 237
singleColumn 233
SMTP 116
SplitApp-Control 403, 414
Splitter-Control 씮 splitterOrientation
splitterOrientation 242
Sprachdatei 166
Standard-Plug-ins 109
stateful 210
stateless 210, 343
Styleguide 114
Support Packages SAPUI5 104
switch 62
Systemalias 347
445
Index
T
Tabellenelement 30
Table-Control 267
TabStrip-Control 244
Task Handler 116
TCP/IP 116
Team Provider 110, 138
Team-Provider-Funktionalität 106
Template 171
TextArea 252, 257
Textelement 182
TextField 252
liveChange 289
Texttyp 180
TextView 247, 249
Theme 151, 198
Theme anpassen 200
Theme Designer 196, 197
Basis Theme 198
Bearbeitungsmodus 200
Theme anpassen 200
Theme einbinden 204
Theme herunterladen 203
Theming 192
this 53
ToggleButton 247, 249
ToolBar 263
ToolPopup-Control 313
Transaktion SICF 105, 117, 120
Transaktion SMICM 122
Trennung, semantische 23
Typkonvertierung 59
Typselektor 39
U
Übersetzungsobjekttypen 180
Übersetzungswerkzeug 168
UI Development Toolkit 118
UI Development Toolkit for HTML 5
105
446
UI-Controls 150
undefined 57
und-Operator 60
Universalselektor 39
User Experience Guideline 266
UX3-Controls 266
V
ValueHelpField 252, 257
var 55
Vererbung 216
Vergleichsoperator 59
VerticalLayout-Control 222
View 122, 123
initialer 125
W
W3C-Standard 79
Webentwicklertools 37
Webkonsole 163
Wertehilfe 257
window 51, 71
X
XML Model 164
XMLHttpRequest 97
XML-View 126
XS 370
XS-Projekt 377
Z
Zeichenverkettung 58
Zielgerät Desktop 129
zustandsbehaftet 210
zustandslos 210, 343
Zuweisungsoperator 59
Wissen aus erster Hand.
Miroslav Antolovic ist bei der bsc solutions GmbH & Co. KG als SAPEntwickler und -Trainer tätig. 1999 begann er als Anwendungsentwickler bei der SAP AG im Product Lifecycle Management, und 2004 wechselte 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 SAPUI5
446 Seiten, gebunden, März 2014
69,90 Euro, 978-3-8362-2753-7
www.sap-press.de/3533
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 urheberrechtlich geschützt. Alle Nutzungs- und Verwertungsrechte liegen beim Autor
und beim Verlag.
Teilen Sie Ihre Leseerfahrung mit uns!

Leseprobe

Transcription

Similar documents

Tabellenwerk: VBA-Programmierung mit MS Excel - dr

SAP Control Framework

Medienproduktion - Digital Print Medien

p3pp3r`s 1337-Guide how2become 1337 in easy

Open Source Katalog 2009 R1

Multichannel-Vertrieb: B2B lernt von B2C - E

Vorlesung 11 - Prof. Dr. Christian Baun

Informatica - 9.6.0. - Handbuch für Mapping-Spezifikation

“Survey: Black-Hat Search Engine Optimization (SEO) Practices for

Plug-in-Programmierung mit Eclipse

Treiberprobleme: Optimale Fehlerbehandlung T 74/1

Einstieg in JavaScript

Versionshinweise - Fedora Documentation

03 DataZug Schutzvorkehrungen

RDz Cobol Tutorial 01 RDz Einführung

Webtechnologien Teil 15: JavaScript

Entity Relationsship Modelle

Leseprobe 2

(CGI-Skripte)!

APEX 5.0 - Muniqsoft