Web Dynpro war gestern, UI5 ist heute? – Eine Einführung in SAP UI5 – Teil 4
Lesezeit ca. 6 Minuten
Dies ist der vierte Teil der mehrteiligen Blog-Reihe „Einführung zu SAP UI5“, in welcher wir Ihnen zeigen möchte, wie Sie Oberflächen mit der neuen SAP-Technologie UI5 entwickeln können. Im vorherigen Teil der Reihe haben wir Ihnen gezeigt, wie die MVC-Architektur in UI5 funktioniert, aus welchen Komponenten eine Anwendung besteht und was eigentlich ein Framework ist. In diesem Teil werden Sie Ihre erste einfache SAP UI5 Anwendung erstellen.
Antworten auf die Kontrollfragen des letzten Kapitels
1. Beschreiben Sie die Aufgaben des Models, Views und des Controllers jeweils in einem Satz.
Das Model ist dafür zuständig, die Daten mit denen gearbeitet wird zu verwalten (Datenhaltung). Der Controller reagiert auf Events aus dem View und verändert Daten im Model (Datenmanipulation). Der View stellt die Benutzeroberfläche dar und dient der Interaktion des Benutzers mit der Anwendung (Datenpräsentation und Userinteraktion).
2. Angenommen, eine Methode im Controller ändert ein Attribut im Model, welches mit einem Control im View verknüpft ist. Ändert dann der Controller oder das Modell den View?
In diesem Fall ändert das Model den View, bzw. das Model benachrichtigt den View über die Änderung. Wenn der Controller auf den View zugreift, dann nur um z.B. Controls hinzuzufügen (oder auch zu entfernen), oder um ein neues Model zuzuweisen.
3. Wieso macht es Sinn, UI5 als Framework und nicht bspw. als Bibliothek bereitzustellen?
Wäre UI5 eine Bibliothek, müsste der User viele Methoden aufrufen und viele Dinge prüfen, die sonst vom Framwork erledigt worden wäre. Eine Bibliothek hätte bspw. die Methode „isDeviceSmartphone( )“. In dieser Methode wäre zwar die entsprechende Logik enthalten, Sie müssten aber entscheiden wann, ob die Methode aufgerufen wird und was für Konsequenzen die Rückgabe hat. Dies ist nur ein Beispiel, Sie müssten sich viel mit Dingen beschäftigen die Sie überhaupt nicht interessieren, daher macht es Sinn das UI5 ein Framework ist.
Was Sie in diesem Artikel lernen
In diesem Artikel lernen Sie wie Sie eine einfache UI5 Anwendung erstellen. Sie werden
- einen View mit einem Button und ein Eingabefeld erstellen
- den Inhalt des Eingabefelds mit einem Attribut im Model per Data-Binding verknüpfen
- im Controller eine Ereignisbehandlung implementieren
- sich mit AMD (Asynchronous module definition) in UI5 beschäftigen
Erstellen des View
Als erstes soll ein Button auf den View gesetzt werden, der bei einem Klick „Hallo xxx“ ausgibt. Natürlich soll nicht „xxx“ ausgegeben werden, sondern ein Name, der in ein Input-Control (Control = Ein Element im View mit dem der Benutzer interagieren kann) geschrieben wird. Machen Sie einen Rechtsklick auf „View1“ (den Sie in Teil 2 erstellt haben) und öffnen Sie den Layout Editor. Gewöhnen Sie sich am besten direkt an mit der „Outline“ Ansicht zu arbeiten, bei komplexen Views ist es mittels „Drag and Drop“ fast unmöglich sinnvoll neue Elemente zu platzieren. In der Baumansicht können Sie hingegen immer gut arbeiten. Machen Sie ein Rechtsklick auf sap.m.Page und erstellen Sie einen Button.
Der Button soll die Aufschrift „Hallo …“ haben. Klicken Sie dazu auf den Button und suchen Sie rechts in der Leiste die Eigenschaft „Label“. Hier könnten Sie nun direkt „Hallo …“ eingeben. Eleganter ist, einen Platzhalter einzufügen und den eigentlichen Text in der i18n (i18n.properties) abzulegen. Dies ist ähnlich zum OTR-Konzept in Web Dynpro. Geben Sie bei Label „{i18n>button1}“ und fügen Sie analog zu den schon vorhandenen Einträgen in der Datei den Button Text „Hallo Welt“ ein.
Erstellen Sie nun noch ein Input Control.
Als nächstes fügen Sie ein Event für den Button hinzu. Klicken Sie dazu rechts in der Leiste auf Events und erstellen Sie ein neues onPress Event.
Erstellen des Controllers
Sie benutzen zum Ausgeben von „Hallo <Name>“ in diesem Tutorial das MessageToast. Dies ist ein kleines Popup, welches kurz aufpoppt und von alleine wieder verschwindet. Das MessageToast wird standardmäßig nicht an Ihren View übergeben. Sie müssen es daher dynamisch nachladen. Dies machen Sie, indem Sie die Resource in sap.ui.define angeben und in Ihrer Funktion entgegennehmen.
Asynchronous module definition in UI5
Wechseln Sie in den Controller und fügen Sie die rot markierten Ausdrücke hinzu:
Um Resourcen zu sparen und Software zu modularisieren, werden Resourcen in JavaScript oft dynamisch geladen. Dies nennt sich Asynchronous module definition. Dabei werden dynamisch nur die Resourcen angefordert, die im entsprechenden Modul auch wirklich gebraucht werden.
Ausgabe von Hallo Welt
Fügen Sie in Ihrer onButton1Press( ) Methode nun die im Bild oben stehende Zeile ein. Zunächst geben wir nur „Hallo Welt“ aus, erweitern dies aber gleich noch. Sie können Ihre Anwendung allerdings schon jetzt einmal Ausführen (Vergessen Sie nicht, vorher alles zu speichern).
Erstellen des Models
Da Sie nur ein lokales Model für diesen View erstellen, erzeugen wir dieses im Controller. Fügen Sie die Hook-Methode onInit( ) hinzu:
Zunächst wird eine Struktur erstellt die den Namen „oData“ hat (Die hat nichts mit der Technologie OData zu tun die in einem späteren Blog Eintrag behandelt wird). Diese enthält ein Attribut „name“ in einem Knoten „PersData“. Als Standardwert wird „Hans“ zugewiesen. Danach wird ein Model erzeugt und die Struktur zugewiesen. Danach wird das Model dem View zugeordnet.
Ihnen wird sicher aufgefallen sein, dass es zu einem Syntaxfehler kommt. Das liegt daran, dass Ihr Modul das JSONModel nicht kennt. Dies müssen Sie analog zum MessageToast nachladen.
Nun muss noch der MessageToast Aufruf geändert werden. Der String wird folgendermaßen erweitert:
Sie greifen jeweils über „this“ auf den Controller, „getView“ auf den View, „getModel“ auf das Model und „getProperty“ auf Ihren Wert zu. Um den richtigen Wert auszuwählen, übergeben Sie einen String, der den Pfad innerhalb der Struktur zu dem Element angibt.
Modifikationen im View
Zum Abschluss müssen Sie noch das Value-Attribut des Input Controls mit dem Attribut im Model verknüpfen. Navigieren Sie dazu in den Layout Editor und klicken Sie auf das Input Control. Rechts suchen Sie das Attribut „Value“ und schreiben dort {/PersData/name} rein. Die geschweiften Klammern signalisieren wieder ein Modelzugriff, darin befindet sich der Pfad zum gewünschten Attribut.
Speichern Sie alle Ihre Änderungen und führen Sie Ihne Anwendung aus. Die Anwendung funktioniert zwar schon recht gut, allerdings ist der Button und das Input Feld noch nicht optimal platziert.
Um Ihre Anwendung etwas zu verschönern, suchen Sie von Input Control das Attribut width und geben Sie dort „auto“ ein. Wechseln Sie danach vom Layout Editor in den Code Editor des Views und fügen Sie in dem XML-Tag des Buttons folgendes Attribut ein: class=“sapUiSmallMarginEnd“. Dadurch erhalten Sie einen kleinen Abstand zwischen dem Button und dem Input. Weitere vordefinierte Style Klassen für Abstände finden Sie hier.
Anregungen
Falls Sie Interesse an weiteren Beispielen zu Controls haben, können Sie sich einmal das OpenUI5 SDK Demo Kit anschauen. Dabei können Sie die jeweilige Anwendung testen und sich den Quellcode anschauen. Versuchen Sie, Ihre Anwendung zu erweitern. Falls Sie sich in Web Dynpro auskennen und die Zeit haben, versuchen Sie diese Anwendung in Web Dynpro nachzubauen und die parallelen in der Entwicklung herauszuarbeiten. Dadurch sollten Sie einen großen Lerneffekt haben. Da diese Reihe erst in einigen Wochen weitergeführt wird, haben Sie genug Zeit um sich etwas „auszutoben“.
Falls Sie Probleme mit JavaScript haben, können wir Ihnen die w3schools empfehlen, hier können Sie anhand von Beispielen interaktiv JavaScript lernen. Sie haben dabei auch die Möglichkeit, eigenständig den Code der Beispiele zu ändern oder zu erweitern und sehen direkt, wie die Auswirkungen sind. Neben JavaScript können Sie dort auch HTML, CSS, XML und vieles weiteres lernen, was auch für die UI5 Entwicklung sehr nützlich sein kann.
Ausblick
Im nächsten Kapitel werden Sie sich mit der Navigation zwischen verschiedenen Views auseinandersetzen. Sie werden lernen, wie der Router funktioniert und wie Sie ihn nutzen können um zwischen und innerhalb von Views zu navigieren.
Haben Sie Fragen, Anregungen, positive oder negative Kritik? Oder möchten Sie bestimmte Punkte des Artikels noch näher erläutert bekommen? Dann schreiben Sie gerne einen Kommentar oder kontaktieren Sie uns.
