SAPUI5 Controls mit D3.js erweitern – Teil 2

Im ersten Teil des Blogs wurden die Möglichkeiten aufgezeigt, die D3 Bibliothek für SAPUI5 Custom Controls zu nutzen.

Das Thema dieses zweiten Teils wird die Ereignissteuerung zwischen den SAPUI5 Komponenten sein. Wie also reagiert eine „Custom Component“ auf ihre Außenwelt und wie kann sie Ereignisse auslösen die von ihrer Umgebung verarbeitet werden können.

Um dies zu veranschaulichen wird eine simple Komponente erstellt, die einen Wert aus dem View übernimmt, in den sie eingebettet ist und diesen Wert mittels „Klick“- Ereignis wieder zurückliefert.

sapui_event

sapui_derview

Wir betten eine „Custom Component“ „d3Test“ ein und binden deren Ereignis „change“ an den View.

sapui_dercontroller

Die Komponente (d3Test.js)

Ein einfacher Kreis, erstellt mit D3 in der Methode „onAfterRendering“ der „Custom Component“ „d3Test“.

In den Metadaten der Komponente führen wir eine Eigenschaft „value“ ein, in der eine Zeichenkette gespeichert werden kann. Außerdem benötigen wir wiederum eine Aggregation _vbox, vom Typ „sap.m.VBox“, die später die D3 Grafikkomponente enthalten soll.

sapui_metadata

Im Bereich „events“ der Metadaten wird das „Change“ Ereignis spezifiziert, das die Komponente ausführen kann.

sapui_eventscode

Tritt das Event ein, erwartet es einen Parameter namens „value“ vom Typ String. Die Getter und Setter Methoden der Komponente werden zur Laufzeit automatisch erzeugt.

Da wir zusätzlich zum Setzen der Eigenschaft noch eine weitere Methode aufrufen, überschreiben wir den Setter.

sapui_setvalue

Es wird also noch die Methode „changeObject“ aufgerufen, die den Text eines D3 Textelements ändert.

sapui_changeobject

In der Methode „onAfterRendering“ versorgen wir als erstes die Variable „myValue“ mit dem Wert der Komponenteneigenschaft „value“.

Als nächstes selektieren wir die VBox und weisen sie der Variablen „svgContainer“ zu, die die D3 Grafikelemente aufnehmen wird.

sapui_this.svgcontainer

Diesem Element fügen wir eine „Scalable Vector Graphics“ Komponente „SVG“ hinzu und dieser wiederum ein Textelement namens „mainNote“, in das die Ausgaben geschrieben werden können.

sapui_eventscode

sapui_this.svg

Nun erzeugen wir einen roten Kreis mit Radius 40 Pixel und dem Mittelpunkt 50px/60px und hängen ihn an das SVG Element.

sapui_this.circle

Zu beachten ist hierbei, der Nullpunkt des D3 Koordinatensystems liegt in der oberen linken Ecke des SVG Elements.

sapui_kreis

Jetzt hängen wir an unseren Kreis einen Ereignishandler an.

sapui_this.circle.on

Der Kreis reagiert nun auf das Ereignis „Click“ und führt eine anonyme Funktion aus. In dieser Funktion nutzten wir die von „Control“ geerbte Methode „fireEvent“, die das Ereignis „change“ mit dem Parameter „value“ und dessen Wert ausführt.

Bei Mausklick auf den Kreis wird nun die Methode „onChange“ des Kontrollers aufgerufen, die den Wert des Label-Feldes mit dem Wert der Eigenschaft „value“ aus der Komponente versorgt.

sapui_event1 sapui_event2 sapui_event3
Button überträgt den Wert des Eingabefelds an die Komponente „setValue“ Methode der Komponente übernimmt die Zeichenkette und zeigt sie im Textelement an Ein Klick auf den Kreis führt das Ereignis „change“ aus und überträgt die Zeichenkette zurück an den Kontroller

Somit ist gezeigt, wie die Komponente Werte mittels Ereignissen an ihre Umgebung weitergeben kann.

Im dritten und letzten Teil des Blogs werden wir uns anschauen, wie Daten eines Models an D3 Komponenten zur Visualisierung weitergegeben werden können und wie auf Änderung der Daten reagiert werden kann.

Sie haben Fragen zu SAP UI5? Dann sprechen Sie uns gerne an.

Marcel
Marcel Metzen

Senior Consultant

Getagged mit: , , , , , , , , , , ,