SAPUI5 Advanced

Custom Control Übungen

Übung 1: Erstellen eines einfachen UI5 Custom Controls

Übung 2: Erweiterung des UI5 Controls: Events

Übung 3: Erweiterung des UI5 Controls: Aggregation

Generell zu den Übungen

  • Die Übungen sind so vorbereitet, dass eigentlich durch schlichtes Copy/Paste alles funktioineren sollte.
  • Trotzdem rate ich Euch:
    • Versucht die Beispielcodings zu verstehen
    • Wenn Zeit ist, bitte manuell coden
    • Copy/Paste nur wenn die Zeit eng wird oder man den Fehler nicht findet

Custom Control Übung 1: Erstellen eines einfachen UI5 Custom Controls

Damit wir im Laufe des Workshops weitere Übungen machen können, generieren wir uns erneut eine Freestyle Anwendung und machen ein paar Anpassungen.

  • Aufgabe 1.1 Generieren der UI5 Freestyle Anwendung
  • Aufgabe 1.2 Custom Control anlegen
  • Aufgabe 1.3 Properties definieren
  • Aufgabe 1.4 Renderer definieren
  • Aufgabe 1.5 Control in View verwenden

CC Übung 1: Aufgabe 1.1 - UI5 Freestyle App generieren - Template Wizard

In dieser Übung wird eine Freestyle App mit dem Template Generator angelegt und wir werden verschiedene Anpassungen vornehmen.

  • Starten Template Wizard mit STRG + SHIFT + P
  • Generator SAP Fiori application auswählen
  • Template Basic auswählen
  • Data Source: None
  • Module: customcontrol##
  • Application namespace: de.ui5ws.demos
  • ACHTUNG auf den Project Folder: /home/user/projects (Vorschlag ggf ändern!!!!!)
  • Keine Deployment Config, kein FLP, kein Advanced Options
  • Starten -> Warten -> Testen
    • Popup "Add project ot workspace" auswählen

Fragestellungen

  • Kann die Anwendung mit Preview erfolgreich gestartet werden?

CC Übung 1: Aufgabe 1.1 - UI5 Freestyle App generieren - YO / Terminal

Sollte der Template Wizard nicht starten, sollte als Alternative auch YO im Terminal möglich sein:

  • Generator: @sap/fiori
  • Template: basic
  • Data Source: none
  • Module name: customcontrol##
  • Application namespace: de.ui5ws.demos
  • No Deployment, No FLP, No Advanced Options

Fragestellungen

  • Kann die Anwendung mit Preview erfolgreich gestartet werden?

CC Übung 1: Aufgabe 1.2 - Custom Control anlegen

  • Unter dem webapp-Verzeichnis soll der Ordner controls angelegt werden
  • In das neue Verzeichnis ist die JavaScript-Datei CustomTextControl.js anzulegen

CustomTextControl.js

sap.ui.define([
    "sap/ui/core/Control"
], function (Control) {
    
    return Control.extend("customcontrol##.control.CustomTextControl", {
        metadata : {},
        renderer(oRM, oControl) {}
    });

});
  • Nicht vergessen, ## durch die Gruppennummer ersetzen

CC Übung 1: Aufgabe 1.3 - Properties definieren

Unser Custom Control soll die beiden String-Properties text und color haben. Defaultwert soll "Hello, World!" und "green" sein. Wie sind diese Properties zu definieren?

Hint

properties: {
                "text": { type: "string", defaultValue: "Hello, World!" },
                "color": { type: "string", defaultValue: "black" }
            }

CC Übung 1: Aufgabe 1.4 - Renderer implementieren

Der Renderer definiert die HTML-Struktur, die dem DOM Ihrer App hinzugefügt wird. Er wird normalerweise zunächst vom SAPUI5-Core aufgerufen und immer dann, wenn eine Eigenschaft des Custom Controls geändert wird.

Ziel dieser Aufgabe ist es, dass der Renderer folgenden HTML Code "generiert"
<div style="color:black;">Hello World!</div>

Hint

    renderer(oRM, oControl) {
        oRM.openStart("div", oControl);
        oRM.style("color", oControl.getColor());
        oRM.openEnd();
        oRM.text(oControl.getText() );
        oRM.close("div");
    }

CC Übung 1: Aufgabe 1.5 Control in View verwenden

Nun kommt der leichteste Teil der Übung. Wir binden das neue Control in den View ein.

  • Namespace custom für unser neues control definieren
  • Neues Control innerhalb von content einfügen
  • Das neue Control benötigt vermutlich eine id
    • Hintergrundinfo: Der Generator hat in der Manifest FlexEnabled auf true generiert

Hint

<mvc:View controllerName="de.ui5ws.demos.customcontrol##.controller.View1"
    xmlns:mvc="sap.ui.core.mvc" displayBlock="true"
    xmlns="sap.m"
    xmlns:custom="de.ui5ws.demos.customcontrol##.controls">
    <Page id="page" title="{i18n>title}">
        <content>
            <custom:CustomTextControl id="idCustContr" />
        </content>
    </Page>
</mvc:View>
  • Nicht vergessen, ## durch die Gruppennummer ersetzen

Fragestellungen

  • Wird das neue Control mit dem Text "Hello, World!" ausgegeben?

Custom Control Übung 2: Erweiterung des UI5 Controls: Events

In dieser Übung wollen wir dem neuen Control ein Klick-Event ergänzen. Sobald der Anwender den Text klickt, soll die Farbe des Textes auf rot geändert werden.

  • Aufgabe 2.1 Event-Handling ergänzen
  • Aufgabe 2.2 Event im View aufnehmen
  • Aufgabe 2.3 Event im Controller implementieren

CC Übung 2: Aufgabe 2.1 - Event-Handling ergänzen

Wir beginnen in der Metadata Section des Controls

  • Das neue Event press soll hinzugefügt werden. Keine Parameter

Hint

events: { 
          "press": {}
        }

Um unser Event auszulösen, müssen wir im Custom Controller onclick implementieren. Wie könnte das aussehen?

Hint

  onclick: function( )  {
      this.firePress(); 
  }

Fragestellungen

  • Noch sollte es keine Änderung geben, aber funktioniert die Anwendung noch?

CC Übung 2: Aufgabe 2.2 - Event im View aufnehmen

Unser neues Event press soll nun im View bei unserem Control hinzugefügt werden

Hint

  <custom:CustomTextControl id="idCustContr" press="onPress"/>

Fragestellungen

  • Noch sollte es keine Änderung geben, aber funktioniert die Anwendung noch?

CC Übung 2: Aufgabe 2.3 - Event im Controller implementieren

Jetzt kommt der letzte Teil. Jetzt ist im View Controller die Methode onPress zu implementieren. Die Textfarbe soll ganz einfach auf red gesetzt werden.

Hint

    onPress: function (oEvent) {
        oEvent.getSource().setColor("red");
    }

Fragestellungen

  • Jetzt sollte sich der Text bei Klick auf rot ändern

Custom Control Übung 3: Erweiterung des UI5 Controls: Aggregation

In dieser Übung wollen wir dem neuen Control eine Aggregation items hinzufügen. Die Items sollen einfache Texte sein.

  • Aufgabe 3.1 Aggregation items hinzufügen
  • Aufgabe 3.2 Rendering für neue Aggregation hinzufügen
  • Aufgabe 3.3 Aggregation im View ergänzen

CC Übung 3: Aufgabe 3.1 - Aggregation items hinzufügen

Wir beginnen wieder mit der Metadata Section des Controls

  • Die neue Aggregation items soll hinzugefügt werden.
  • Als type verwenden wir das SAP Standard Control sap.m.Text
  • Es sollen beliebig viele items möglich sein. multiple ist daher auf true zu setzen.

Hint

    aggregations: {
        "items": {
            type: "sap.m.Text", multiple: true
        }
    },

CC Übung 3: Aufgabe 3.2 - Rendering für neue Aggregation hinzufügen

Natürlich muss auch die Rendering-Funktion angepasst werden.

Hint

    ...
    let aItems = oControl.getAggregation("items");
    for (let i = 0; i < aItems.length; i++) {
        oRM.renderControl(aItems[i]);
    }  

    oRM.close("div");

oder

Hint

    ...
    var aItems = oControl.getItems();
    aItems.forEach(function(oItem) {
        oRM.renderControl(oItem);
    });

    oRM.close("div");

CC Übung 3: Aufgabe 3.3 - Aggregation im View ergänzen

Nun wieder die einfachste Aufgabe. Wir fügen nun die 3 Texte Text 1, Text 2 und Text 3 in der Aggregation items hinzu

Hint

  <custom:CustomTextControl press="onPress">
      <custom:items>
          <Text text="Text 1" />
          <Text text="Text 2" />
          <Text text="Text 3" />
      </custom:items>
  </custom:CustomTextControl>

Fragestellungen

  • Wir sollten nun auch die Text-Items Text 1 Text 2 Text 3 sehen.

Custom Control Übungen - Was haben wir gemacht?

  • Übung 1: Erstellen eines einfachen UI5 Custom Controls
  • Übung 2: Erweiterung des UI5 Controls: Events
  • Übung 3: Erweiterung des UI5 Controls: Aggregation