Ent­wicklung von SAPUI5 Custom Controls - Bei­spiele aus der Praxis​

In einem vor­herigen Blog­bei­trag wurde auf­ge­zeigt, welche Vor­be­rei­tung die Er­stellung von SAPUI5 Custom Controls ben­ötigt und wie diese dann Schritt für Schritt ent­wickelt werden >>.
Das sich auch komplett neue Controls mit einfachen HTML und CSS Kennt­­nissen rea­­lisieren lassen, wird im nach­folgenden Beitrag auf­ge­zeigt. Wie das genau funkt­ioniert stellen wir anhand von zwei Bei­spielen aus aktuellen Kunden­proj­ekten vor­. Bei der ersten Ent­wicklung handelt es sich um eine Er­weiterung eines be­stehenden Controls. Bei der zweiten ist es eine komplette Neu-Entwicklung mit eigener renderer-Funktion.

Er­weiterung eines SAPUI5 Custom Controls

Die Er­weiterung kommt von einer Desktop-Applikation, welche für mobile End­geräte nicht zur Ver­fügung steht. Das Design-Team im Projekt wollte einen Button, der auf Mouse-Hover unter­schiedliche Farben und Icons dar­stellt. Links sieht man ein Icon / Button mit einem Haken als Icon. Hovert man mit der Maus über dieses Icon, tauscht es sich zu einem Blei­stift-Icon aus.
SAPUI5 Custom Controls
SAPUI5 Custom Controls
SAPUI5 Custom Controls
Bei dem vor­liegen­dem Bei­spiel bietet es sich an, ein be­stehendes Control zu er­weitern. So können die be­stehenden Funk­tionalitäten wie z.B. Properties, Events oder Aggregations normal weiter­ver­wendet werden. Wir haben uns für eine Er­weiterung des Controls sap.ui.core.Icon en­tschieden, da dort bereits das Property für hoverColor vor­handen ist. Somit musste ledig­lich ein Aus­tausch des Icons vor­genommen 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 er­zeugt, die „defaultSrc“ und „hoverSrc“ heißen. Sobald das Mouse-Event „onmouseover“ aus­gelöst wird, wird der Wert aus dem hoverSRC in das be­stehende src ge­schrieben. Wird im Anschluss wieder das „onmouseout“ aus­geführt, wird das defaultSRC in src ge­schrieben. Durch die Ver­wendung der bereits bes­tehenden setSrc-Funktion aus dem Ursprungs­control muss das Rendering nicht ange­passt werden. Es wird im Hinter­grund nur das Icon aus­getauscht.

Durch die Ausführung einer Setter-Funktion eines Controls wird immer die renderer-Funk­tion ge­triggert. Daher muss hier in den ent­sprechen­den mouse-Events dies nicht selbst ausgelöst werden.

Neu-Ent­wicklung eines Controls

In einem weiteren Bei­spiel sollte ein be­stimmtes Chart ge­baut werden, welches im Standard von SAPUI5 so nicht vor­kommt.

Dieses Chart zeigt immer einen Wert zwischen 0 und 100 an, be­steht aus einem Farb­verlauf im Balken, soll die Y-Achse in 20er Schritten dar­stellen und eigene Farben und X-Achsen­be­schrif­tungen ent­gegen­nehmen können.
In einfaches HTML runter­ge­brochen ist dies kein großes Hexenwerk. Es sind ledig­lich ein paar Labels, Linien und ein Rech­teck mit einem Gradienten. Daher wurde hier auf die Verwendung eines Charts-Framework (z.B. D3.js) ver­zichtet und dies als ein eigenes Custom Control entwickelt. Als Parameter wurden 5 ver­schiedene Farben, sowie ein Wert und eine X-Achsen Be­schriftung erwartet:

  • colorBarRGB (Die Farbe, auf welche der trans­pa­rente Gradient auf­gebaut werden soll)
  • colorBarAccentRGB (Die Farbe, welche die oberste Linie auf dem Balken dar­stellen soll)
  • colorNumberRGB (Die Farbe, in welcher die an­ge­zeigte Zahl dar­ge­stellt werden soll)
  • colorXAxisRGB (Die Farbe, in welcher die X-Achse dar­ge­stellt werden soll)
  • colorXAxisDescRGB (Die Farbe, in welcher die X-Achsen­be­schrei­bung dar­gestellt werden soll)
  • value (Der Wert, auf deren Basis der Balken auf­gebaut wird)
  • xAxisName (Die an­zu­zeigende X-Achsen Beschriftung)
Die Renderer-Funktion sieht zunächst folgender­maßen aus:
Der übergebene oRM steht für den RenderManager von SAPUI5. Das über­gebene oControl ist die Custom Control Instanz, aus der die Properties aus­gelesen werden können. Zunächst beginnt man mit einem div, welches am Ende wieder ge­schlossen wird. In das Div selbst werden noch die ControlData und CSS-Classes ge­schrieben, welche über das XML über­geben werden können. Innerhalb der beiden Div-Tags kann nun das eigene HTML ge­schrieben werden, welches das Custom Control mit Leben befüllt. Dies wurde hier in drei eigene Methoden aus­gelagert. Innerhalb der Methoden wurden wiederum einzelne Divs erzeugt, Styles hinzu­gefügt und am Ende an die Haupt-Renderer Funktion zurück über­geben. Um nicht umständliche String-Konkatenationen durch­führen zu müssen, werden in den drei aus­gelagerten Methoden Div-Objekte erzeugt. Diese werden von jQuery in einen HTML-String um­gewandelt und so an die write-Funktion über­geben. Hier ist als Bei­spiel die Funktion zu sehen, welche für den Hinter­grund und die X- und Y-Achsen verant­wortlich sind.

Fazit

In diesem Beitrag wurde anhand zweier aktueller Kundenbeispiele aufgezeigt, dass die Ent­wicklung von Custom Controls nicht mit einem enormen Aufwand ver­bunden sein muss. Oftmals können diese einfach erweitert werden. Auch Neu-Entwicklungen lassen sich mit einfachen HTML und CSS Kennt­nissen schnell und bequem rea­lisieren – und das ohne große Budgets und lang­fristi­gen Ressourcen­ein­satz.

Verfasst von Martika Möller

Beitrag teilen

Share on linkedin
Share on xing
Share on facebook
Share on twitter
Share on whatsapp
Share on email

Weitere spannende Themen aus unserem Newsroom

Automatische Berechtigung von Calculation Views

Wie wir Automatische Berechtigung von Calculation Views auf der SAP...

Mehr lesen
SAPUI5 Custom Controls

Schritt für Schritt zu eigenen SAPUI5 Custom Controls (1)

In diesem Beitrag wird aufgezeigt, welche Vor­teile von Custom Controls...

Mehr lesen

Q-THOR von der SAP zertifiziert

Diese Vorteile bestehen für aktuelle und zukünftige Anwender durch die...

Mehr lesen