SAPUI5 Advanced

Custom Control Wagon Selektor Übung

Übung 1: Erstellen eines UI5 Controls Wagon + Events

Übung 2: 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 CSS Style hinzufügen
  • Aufgabe 1.6 Event hinzufügen
  • Aufgabe 1.7 Event Implementierung
  • Aufgabe 1.8 Control im View verwenden

CCW Ü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: System (SDX) entsprechend auswählen
  • ZI_UI5_CUSTOMER_WAPI_V2_99
  • Module: customcontrolwagon##
  • 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?

CCW Ü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: customcontrolwagon##
  • Application namespace: de.ui5ws.demos
  • No Deployment, No FLP, No Advanced Options

Fragestellungen

  • Kann die Anwendung mit Preview erfolgreich gestartet werden?

CCW Ü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 Wagon.js anzulegen

CustomTextControl.js

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

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

CCW Übung 1: Aufgabe 1.3 - Properties definieren

In Metadaten sind die beiden Properties zu definieren:

  • label mit Type string und Default-Wert "123"
  • selected mit Type boolean

Hint

    properties: {
        "label": { type: "string", defaultValue: "123" },
        "selected": { type: "boolean", defaultValue: false }
    }

CCW Übung 1: Aufgabe 1.4 - Renderer implementieren

Ziel dieser Aufgabe ist es, dass der Renderer folgenden HTML Code "generiert"
<span class=“myWagon “>123</span>

Hint

    renderer(oRM, oControl) {
        oRM.openStart("span", oControl);
        oRM.class("myWagon");
        oRM.openEnd();
        oRM.text(oControl.getLabel() );
        oRM.close("span");
    }

CCW Übung 1: Aufgabe 1.5 - CSS Style hinzufügen

  • Falls nicht vorhanden, soll das neue CSS File style.css im Verzeichnis css angelegt werden
  • Die CSS Klassen .myWagon und .myWagonSelected sind wie folgt anzulegen:
.myWagon {
    padding-top: 8px;
    display: inline-block;
    text-align: center;
    height: 128px;
    width: 128px;
    background-image: url(../assets/wagon.svg);
    background-size: contain;
    background-repeat: no-repeat;
    border: 0px solid;
    opacity: 0.5;
}
.myWagonSelected {
    opacity: 1.0;
}

CCW Übung 1: Aufgabe 1.6 - Image hinzufügen

  • Der neue Order assets ist unter webapp anzulegen
  • Das SVG File Github Link mit dem Filenbmaen wagon.svg im neuen Verzeichnis ablegen

CCW Übung 1: Aufgabe 1.7 - Event hinzufügen

Das neue Event press ist zu definieren

Hint

    events: {
        "press": {}
    }

und das onclick event ist zu implementieren

Hint

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

CCW Übung 1: Aufgabe 1.7 - Event Implementierung

Wenn ein Waggon geklickt soll der Style auf myWagonSelected geändert werden

Hint

    onclick: function () {
        var bSelected = this.getProperty("selected");
        this.setProperty("selected", !bSelected);
        this.toggleStyleClass("myWagonSelected");
        this.firePress();
    }

CCW Übung 1: Aufgabe 1.8 - Control im View verwenden

Das neue Control soll im content von Page hinzugefügt werden

Hint

<mvc:View controllerName="de.ui5ws.demos.customcontrolwagon##.controller.View1"
    xmlns:mvc="sap.ui.core.mvc" displayBlock="true" xmlns="sap.m"
    xmlns:custom="de.ui5ws.demos.customcontrolwagon##.controls">
    <Page id="page" title="{i18n>title}">
        <content>
            <custom:Wagon label="101"  press="onPressEvent"  />
        </content>
    </Page>
</mvc:View>

CCW Übung 1: Aufgabe 1.9 - Event implementieren

Im ViewController ist nun noch das im View definierte onPressEvent zu implementieren.

  • Es soll der selektierte Waggon als Message ausgegeben werden.
  • Mit getSelected und getLabel bekommt man vom Control die Eigenschaften

Hint

    onPressEvent: function (oEvent) {
        const oWagon = oEvent.getSource();
        const bWagonSelected = oWagon.getSelected();
        const sWagonLabel = oWagon.getLabel();

        if (bWagonSelected) {
            sap.m.MessageToast.show("Wagon " + sWagonLabel + " selected.");
        }
    }

Fragestellungen

  • Jetzt kommt der große Test! Funktioniert die Anwendung?

CCW Übung 2: Aufgabe 2.1 - UI5 Control Train anlegen

Im Ordner Controls ist das neue Control Train.js anzulegen.

Hint

sap.ui.define([
    "sap/ui/core/Control"
], function (Control) {

    return Control.extend("customcontrolwagon##.control.Train", {
        metadata: {
            properties: { 
            },
            events: {
            }
        },

        renderer(oRM, oControl) {
        },

    });

});

CCW Übung 2: Aufgabe 2.1 - Aggregation hinzufügen

Ein Zug hat üblicherweise mehrere Waggons. Das bilden wir jetzt über die neue Aggregation wagons ab.

Hint

    aggregations: {
        "wagons": { type: "customcontrolwagon##.control.Wagon", 
                    multiple: true }
    },

CCW Übung 2: Aufgabe 2.2 - Rendering adaptieren

Die Renderer Funktion muss natürlich etwas angepasst werden.

Hint

renderer(oRM, oControl) {
            oRM.openStart("div", oControl);
            oRM.openEnd();
            // Render the aggregation 'wagons'
            var aWagons = oControl.getWagons();
            aWagons.forEach(function(oWagon) {
                oRM.renderControl(oWagon);
            });
            oRM.close("div");
        }

CCW Übung 2: Aufgabe 2.3 - View adaptieren

Den View müssen wir natürlich auch ändern. Wagon ist jetzt eine Aggregation von Train.

Hint

        <content>
            <custom:Train id="idTrain">
                <custom:wagons>
                    <custom:Wagon id="id100" label="100" press="onPressEvent" />
                    <custom:Wagon id="id101" label="101" press="onPressEvent" />
                    <custom:Wagon id="id102" label="102" press="onPressEvent" />
                </custom:wagons>
            </custom:Train>
        </content>

Fragestellungen

  • Wie sieht jetzt die Testanwendung mit dem Zug aus?