Entwicklung von SAPUI5 Custom Controls - Beispiele aus der Praxis
In einem vorherigen Blogbeitrag wurde aufgezeigt, welche Vorbereitung die Erstellung von SAPUI5 Custom Controls benötigt und wie diese dann Schritt für Schritt entwickelt werden >>.
Das sich auch komplett neue Controls mit einfachen HTML und CSS Kenntnissen realisieren lassen, wird im nachfolgenden Beitrag aufgezeigt. Wie das genau funktioniert stellen wir anhand von zwei Beispielen aus aktuellen Kundenprojekten vor. Bei der ersten Entwicklung handelt es sich um eine Erweiterung eines bestehenden Controls. Bei der zweiten ist es eine komplette Neu-Entwicklung mit eigener renderer-Funktion.
Erweiterung eines SAPUI5 Custom Controls
Die Erweiterung kommt von einer Desktop-Applikation, welche für mobile Endgeräte nicht zur Verfügung steht. Das Design-Team im Projekt wollte einen Button, der auf Mouse-Hover unterschiedliche Farben und Icons darstellt. Links sieht man ein Icon / Button mit einem Haken als Icon. Hovert man mit der Maus über dieses Icon, tauscht es sich zu einem Bleistift-Icon aus.
Bei dem vorliegendem Beispiel bietet es sich an, ein bestehendes Control zu erweitern. So können die bestehenden Funktionalitäten wie z.B. Properties, Events oder Aggregations normal weiterverwendet werden. Wir haben uns für eine Erweiterung des Controls sap.ui.core.Icon entschieden, da dort bereits das Property für hoverColor vorhanden ist. Somit musste lediglich ein Austausch des Icons vorgenommen werden.
Das sap.ui.core.Icon besitzt bereits das Property „src“ für die Angabe eines Icons. In unserem Custom Control haben wir zwei neue Properties erzeugt, die „defaultSrc“ und „hoverSrc“ heißen. Sobald das Mouse-Event „onmouseover“ ausgelöst wird, wird der Wert aus dem hoverSRC in das bestehende src geschrieben. Wird im Anschluss wieder das „onmouseout“ ausgeführt, wird das defaultSRC in src geschrieben. Durch die Verwendung der bereits bestehenden setSrc-Funktion aus dem Ursprungscontrol muss das Rendering nicht angepasst werden. Es wird im Hintergrund nur das Icon ausgetauscht.
Durch die Ausführung einer Setter-Funktion eines Controls wird immer die renderer-Funktion getriggert. Daher muss hier in den entsprechenden mouse-Events dies nicht selbst ausgelöst werden.
Neu-Entwicklung eines Controls
In einem weiteren Beispiel sollte ein bestimmtes Chart gebaut werden, welches im Standard von SAPUI5 so nicht vorkommt.
Dieses Chart zeigt immer einen Wert zwischen 0 und 100 an, besteht aus einem Farbverlauf im Balken, soll die Y-Achse in 20er Schritten darstellen und eigene Farben und X-Achsenbeschriftungen entgegennehmen können.
In einfaches HTML runtergebrochen ist dies kein großes Hexenwerk. Es sind lediglich ein paar Labels, Linien und ein Rechteck mit einem Gradienten. Daher wurde hier auf die Verwendung eines Charts-Framework (z.B. D3.js) verzichtet und dies als ein eigenes Custom Control entwickelt. Als Parameter wurden 5 verschiedene Farben, sowie ein Wert und eine X-Achsen Beschriftung erwartet:
- colorBarRGB (Die Farbe, auf welche der transparente Gradient aufgebaut werden soll)
- colorBarAccentRGB (Die Farbe, welche die oberste Linie auf dem Balken darstellen soll)
- colorNumberRGB (Die Farbe, in welcher die angezeigte Zahl dargestellt werden soll)
- colorXAxisRGB (Die Farbe, in welcher die X-Achse dargestellt werden soll)
- colorXAxisDescRGB (Die Farbe, in welcher die X-Achsenbeschreibung dargestellt werden soll)
- value (Der Wert, auf deren Basis der Balken aufgebaut wird)
- xAxisName (Die anzuzeigende X-Achsen Beschriftung)
Die Renderer-Funktion sieht zunächst folgendermaßen aus:
Der übergebene oRM steht für den RenderManager von SAPUI5. Das übergebene oControl ist die Custom Control Instanz, aus der die Properties ausgelesen werden können. Zunächst beginnt man mit einem div, welches am Ende wieder geschlossen wird. In das Div selbst werden noch die ControlData und CSS-Classes geschrieben, welche über das XML übergeben werden können. Innerhalb der beiden Div-Tags kann nun das eigene HTML geschrieben werden, welches das Custom Control mit Leben befüllt. Dies wurde hier in drei eigene Methoden ausgelagert. Innerhalb der Methoden wurden wiederum einzelne Divs erzeugt, Styles hinzugefügt und am Ende an die Haupt-Renderer Funktion zurück übergeben.
Um nicht umständliche String-Konkatenationen durchführen zu müssen, werden in den drei ausgelagerten Methoden Div-Objekte erzeugt. Diese werden von jQuery in einen HTML-String umgewandelt und so an die write-Funktion übergeben. Hier ist als Beispiel die Funktion zu sehen, welche für den Hintergrund und die X- und Y-Achsen verantwortlich sind.
Fazit
In diesem Beitrag wurde anhand zweier aktueller Kundenbeispiele aufgezeigt, dass die Entwicklung von Custom Controls nicht mit einem enormen Aufwand verbunden sein muss. Oftmals können diese einfach erweitert werden. Auch Neu-Entwicklungen lassen sich mit einfachen HTML und CSS Kenntnissen schnell und bequem realisieren – und das ohne große Budgets und langfristigen Ressourceneinsatz.
Verfasst von Martika Möller
Weitere spannende Themen aus unserem Newsroom
Datenqualität in der S/4HANA-Migration
Der Artikel zeigt, warum Datenqualität in der S/4HANA-Migration kein Einmalprojekt,...
Mehr lesen
S/4HANA System Conversion
Der Artikel erklärt, wie sich Business-Downtime bei einer SAP S/4HANA...
Mehr lesen
ABAP unter S/4HANA ist alt?
Der Artikel zeigt, wie modernes ABAP unter S/4HANA sein volles...
Mehr lesen