Erik Barz
 - 6. Dezember 2013

Tutorial: Hello-World mit SAP UI5 im Neptune Application Designer

SAP Anwendungen auf dem iPhone

In diesem Tutorial werden wir Ihnen Schritt für Schritt zeigen, wie Sie eine Hallo-Welt-Anwendung mit SAP UI5 im Neptune Application Designer entwickeln. Dabei verzichten wir zuerst einmal auf die Implementierung von Anwendungslogik, die in folgenden Beiträgen thematisiert wird.

Unser Testsystem ist ein IDES EHP6 mit dem Neptune Application Designer in Version 2.12_7. Wie Sie an den NAD kommen erfahren Sie auf http://neptune-software.com/experience/download-take-it-for-a-spin/

1. Als erstes öffnen Sie den Neptune Application Designer mit der Transaktion „/NEPTUNE/DESIGNER“

SAP UI5 Tutorial - Transaktion öffnen

SAP UI5 Tutorial – Transaktion öffnen im Neptune Application Designer

2.  Im nächsten Schritt legen Sie eine neue Neptune-Application an. Dafür geben Sie zuerst den Namen der Anwendung an. Diesen lassen Sie mit „Z“ (Kundennamensraum) beginnen, gefolgt von Ihren Initialien und dem Titel der Anwendung. Wir nehmen „MS“ für mindsquare – also „ZMS_HELLOWORLD“. Danach klicken Sie auf „Create“ zum Anlegen.

SAP UI5 Tutorial - Anwendung anlegen

Anlegen einer neuen Anwendung im Neptune Application Designer

3. Falls Sie bereits einen Transportauftrag / Workbench-Auftrag besitzen, wählen Sie den im nächsten Schritt aus. Wenn nicht, legen Sie sich einen neuen an.

SAP UI5 Tutorial - Transportauftrag wählen

4. Danach wählen Sie wie gewohnt Ihr Paket aus.

SAP UI5 Tutorial - Paket wählen

5. Nun sehen Sie die Oberfläche vom Neptune Application Designer. Hier wird die Webseite zusammengebaut. Auf der linken Seite sehen Sie die Übersicht über alle UI-Elemente, in der Mitte die Struktur der Seite und rechts die Eigenschaften des aktuell ausgewählten Elements. Bevor Sie jedoch an dieser Stelle weitermachen, wählen Sie oben den Reiter „Application“.

SAP UI5 Tutorial - NAD

6. Dort pflegen Sie eine Kurzbeschreibung und klicken anschließend auf den Tab „Library“.

SAP UI5 Tutorial - Eigenschaften

7. Hier können Sie bestimmen, welche JavaScript-Libraries angezogen werden sollen. Sie wählen wenig überraschend „SAPUI5“. In diesem Tutorial werden Sie eine mobile Anwendung mit sap.m erstellen.

SAP UI5 Tutorial - Libraries

8. Unter dem Tab „Theme“ können Sie ein Farbschema für die Anwendung wählen. Bei UI 5 haben Sie aktuell die Wahl zwischen zwei Mobile Themes. Wir entscheiden uns für „Mobile – Bluecrystal“.

SAP UI5 Tutorial - Themes

9. Jetzt gehen Sie zurück in den Reiter „Designer“, um erste UI-Elemente anzulegen. Dort fällt auf, dass die UI-Elemente der anderen JS-Frameworks nicht mehr zur Verfügung stehen. Wir empfehlen wenn möglich nur Elemente aus der sap.m-Bibliothek zu verwenden, da es sonst zu Kompatibilitätsfehlern kommen kann.

SAP UI5 Tutorial - UI Elemente

10. Nun erweitern wir den Ordner sap.m/Layout/.

SAP UI5 Tutorial - UI Elemente

11. Die UI-Elemente lassen sich mit Drag’n’Drop zu der Oberfläche hinzufügen. Als erstes ziehen Sie das Element „App“ auf das „HTML5 Document“. Nun wie gewohnt den Namen und die Kurzbeschreibung pflegen und mit Enter bestätigen. Diese Bestätigung sollte bei jeder Änderung erfolgen, um sicherzustellen, dass der Neptune Application Designer die Änderung auch übernimmt. So können Missverständnisse vermieden werden.

SAP UI5 Tutorial - Layouting

12. Als nächstes legen Sie auf dieselbe Art und Weise ein Element vom Typ „Page“ an. Hier begegnet Sie zum ersten Mal die untenstehende Meldung. Wählt Sie hier „Yes“, wird das gezogene Element eine Ebene tiefer eingefügt. Bei „No“ wird das Element auf derselben Ebene dahinter eingefügt. Entscheiden Sie sich für „Yes“.

SAP UI5 Tutorial - Dialog

Das Page-Element entspricht einer anzuzeigenden Seite. Eine App kann dabei mehrere Pages haben. Mehr zum Thema Layout folgt in einem separaten Blog.

SAP UI5 Tutorial - Elementeigenschaften

13. Legen Sie als nächstes folgende Struktur aus einer „Bar“, zwei „BarContent“, einem „Input“ und einem „Label“ anzulegen. Die beiden zuletzt genannten Elemente finden Sie unter den Library-Verzeichnissen sap.m/ValueHolders und sap.m/SimpleControls.

SAP UI5 Tutorial - Aufbau

14. Im nächsten Schritt werden Sie die Attribute der Elemente anpassen. Die Elemente der Typen „Bar“ und „BarContent“ benötigen zwingend eine Position. Um diese anzugeben, wählt man das Element per Klick aus, wählt den Reiter Attribute und selektiert eine Position aus dem Drop-Down-Menü. Falls Sie mal vergessen sollten ein Pflichtfeld zu füllen, werden Sie vom Neptune Application Designer durch sprechende Hilfetexte unterstützt.

SAP UI5 Tutorial - Attribute

Wählen Sie bitte folgende Positionen:

Name des ElementsPosition
BarNavigationsetSubHeader
BarContentLeftContentLeft
BarContentRightContentRight

15. Im vorletzten Schritt setzen Sie das Attribut „Text“ im Label.

SAP UI5 Tutorial - Label setzen

16. Nun kommt es zum letzten und spannendsten Part des Tutorials. Aktivieren und testen Sie die Anwendung. Zum Testen stehen zwei Alternativen zur Verfügung. „Preview“ öffnet die Seite dabei wie gewohnt, wohingegen „Preview in Wrapper“ die Darstellung auf einem mobilen Endgerät simuliert. Entscheiden Sie sich für letzteres.

SAP UI5 Tutorial - aktivieren und testen

Nach dem Einloggen mit den SAP-Login-Daten sehen wir unsere fertige HelloWorld-Anwendung.

SAP UI5 Tutorial - Preview

Sie haben nun das Handwerkszeug erlernt, um einfache SAP-UI5-Anwendungen mit dem Neptune Application Designer zu entwickeln. Blogs zu komplexeren Anwendungen werden demnächst folgen. Damit bleibt mir nur noch mich für das Interesse zu bedanken und viel Spaß beim Entwickeln zu wünschen! Haben Sie Fragen oder Anregungen zu dem Tutorial? Schreiben Sie uns in den Kommentaren!

Viele Grüße

Erik Barz

(SAP Consultant)

Unser Video-Kurs „ODATA Services im SAP UI5 Umfeld“

OData Services im SAPUI5 Umfeld

Limitierte Rabattaktion für unseren Kurs „OData Services im SAPUI5 Umfeld“.

Für Besucher von Mission Mobile können wir unseren Kurs „ODATA Services im SAP UI5 Umfeld“ mit kräftigem Rabatt anbieten:

Kurs: „ODATA Services im SAP UI5 Umfeld

PS: Wir haben den Rabatt nur für 20 Käufe erhalten. Falls Sie den Link klicken und keine Vergünstigung mehr angezeigt werden, ist unser Kontingent bereits aufgebraucht.

Bei Interesse hier noch ein ausführliches Webinar von Neptune Software selbst:

Erik Barz

Meine Schwerpunktthemen im mobilen Umfeld: Im mobilen Umfeld beschäftige ich mich hauptsächlich mit dem „Neptune Framework“, HTML5, SAPUI5, JavaScript und jQuery. Weiterhin begeistere ich mich für native Apps in Java (Android) und C# (Windows Phone). Fachlich liegt mein Schwerpunkt auf Apps für die SAP-Logistik in WM und LE. Gerne stelle ich mich jedoch auch neuen Herausforderungen im mobilen Umfeld.weitere Schwerpunktthemen im SAP Umfeld: Neben der Entwicklung von mobilen Anwendungen liegen meine Schwerpunkte in der Entwicklung von individuellen Web-Anwendungen mittels Webdynpro und der Anwendungsintegration mittels SAP Portal.

Sie haben Fragen? Kontaktieren Sie mich!




Das könnte Sie auch interessieren


Schreiben Sie einen Kommentar

Bitte füllen Sie alle mit * gekennzeichneten Felder aus. Ihre E-Mail Adresse wird nicht veröffentlicht.





Angebot anfordern
Preisliste herunterladen
Expert Session
Support