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

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: None
• 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.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.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.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 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.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 - 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.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?