SAPUI5 Advanced

SAPUI5 Custom Controls

Was sind UI5 Controls?

  • UI-Komponente für Benutzeroberflächen in SAPUI5 Apps
  • Wiederverwendbare Module im JavaScript
  • Standard Controls können vererbt und erweitert werden

Grundlegende Struktur eines UI5 Controls

  • Grundsätzlich ist ein UI5 Control nichts anderes als ein Modul und kann mit sap.ui.define erstellt werden.
  • Ein UI5 Control wird immer als HTML Element gerendert
  • Der Aufbau der Eigenschaften wird anhand von Metadaten definiert
    • Properties, Aggregations, Associations, Events
  • Der Renderer ist für die Darstellung des Controls im HTML verantwortlich
sap.ui.define([
    "sap/ui/core/Control"
], (Control) => {
    "use strict";
    return Control.extend("project1.controls.CustomControls", {
        metadata: {
            properties: {},
            aggregations : {},
            associations: {},
            events: {}        
        },
        renderer(oRM, oControl) {
        }
    });
});

Vererbung von Basisklassen

  • sap.ui.core.Control ist die Basisklasse aller UI5 Controls
  • Durch Vererbung können bestehende Controls erstellt/erweitert werden
sap.ui.define([
    "sap/m/Button"
], (Button) => {
    "use strict";
    return Button.extend("project1.controls.CustomButton", {
        ...
    });
});

Properties

Control Properties bekommen ein Objekt zugewiesen in dem man einen Datentyp zuweist und optional einen Defaultwert hinterlegt.

Man kann also 2 Einstellungen vornehmen: type und defaultValue

metadata: {
            properties: {
                text: {
                    type: "string",
                    defaultValue: ""
                }
            },

  • type: string (default), boolean, int, float, .... -> oder sogar andere Controls
  • defaultValue: optional
  • Set- und Get-Methoden werden automatisch generiert
  • Es können auch eigene Konfigurationsproperties definiert werden

Aggregations

Für Aggregations stehen folgende Konfigurationen zur Verfügung:

  • type - bestimmt das zu Aggregierende Control - sap.ui.core.Control ist default
  • multiple - definiert ob eine 0:N Aggregation möglich sein soll - true ist default
  • singularName - definiert den Namen für automatisch generierte Methoden
  • visibility - legt fest, ob die Aggregation im View verwendet werden kann
    aggregations : {
                     "items": { 
                        type: "sap.ui.core.Control.myListItem", 
                        multiple: true, 
                        singularName: "item"
                     }
                   }  

Associations

Wenn das Control mit anderen Controls verknüpft werden soll, ist dies unter den Associations zu definieren.

Associations haben den gleichen Konfigurationsaufbau wie Aggregations

  • type, multiple, singularName und visibility

    associations : {
        labelFor : {type : "sap.ui.core.Control", multiple : false}
    } 

Events

Hier können wir Events für HTML Events definieren. Für jedes definierte Event werdne automatisch folgende Methoden erstellt:

  • attach<Name> attachAccept, attachReceive, ...
  • detach<Name> detachAccept, detachReceive, ...
  • fire<Name> fireAccept, fireReceive, ...

Events können auch Parameter haben welche dann bei fire<Name> befüllt werden

events: {
  Accept: { },
  Reset: { parameters: { myValue: {type: "int"} }
}

Weitere Konfigurationsmöglichkeiten

Neben diesen 4 Konfigurationen gibt es bei Bedarf noch weitere Möglichkeiten

  • dnd - Drag and Drop
  • desingtime - Design

Coding

Render Manager

In der Renderer Methode unsere Controls steht uns der RenderManager zur Verfügung. Mit dessen Hilfe können wir in das DOM eingreifen und das Control platzieren.

Wichtigste Funktionen des RenderManager

  • openStart neues öffnendes Element <...
  • openEnd schließt das öffnende Element ...>
  • close schließt das Element </...>
  • class fügt eine CSS Klasse dem HTML Element hinzu
  • write schreibt HTML Code --> Depricated seit 1.92
  • writeControlData schreibt die Control-ID in das DOM --> Depricated seit 1.92

Viele Methoden sind seit 1.92 depricated. Dafür gibt es seit 1.67 neue APIs. Stichwort Semantic Rendering.

API Reference sap.ui.core.RendererManager

Render Manager

Bisherige Logik

renderer(oRM, oControl) {
            oRM.openStart("div");
            oRM.writeControlData(oControl);
            oRM.addStyle("width", oControl.getSize());
            oRM.addClass("myClass");
            oRM.writeClasses();
            oRM.openEnd();

            oRM.write("<p>");
            oRM.write( oControl.getText() );
            oRM.write("</p>");

            oRM.close("div");

Neue Logik

renderer(oRM, oControl) {
            oRM.openStart("div", oControl);
            oRM.class("myClass");
            oRM.openEnd();

            oRM.openStart("p", oControl);
            oRM.text( oControl.getText() );
            oRM.openEnd();
            
            oRM.close("div");