SAPUI5 Advanced

SAPUI5 Custom Controls

Brandeis Consulting & Cadao

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
Brandeis Consulting & Cadao

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) {
        }
    });
});
Brandeis Consulting & Cadao

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", {
        ...
    });
});
Brandeis Consulting & Cadao

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
Brandeis Consulting & Cadao

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"
                     }
                   }  
Brandeis Consulting & Cadao

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}
    } 
Brandeis Consulting & Cadao

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"} }
}
Brandeis Consulting & Cadao

Weitere Konfigurationsmöglichkeiten

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

  • dnd - Drag and Drop
  • desingtime - Design
Brandeis Consulting & Cadao

Coding

Brandeis Consulting & Cadao

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

Brandeis Consulting & Cadao

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");
Brandeis Consulting & Cadao