(find the English version here: https://www.slideshare.net/andreaskunz/ui5-controls-ui5con-2016) Enhanced German-language version of the previously shown control development slides. Das Konzept von UI5-Controls wird erklärt und anhand einfacher Code-Beispiele und Live-Demos veranschaulicht.

1. UI5 ControlsWie funktionieren sie? Wie entwickelt man eigene Controls? .
Andreas Kunz, SAP SE
06/2016

2. Warum?
Umfrage auf http://scn.sap.com/polls/2503:
„Wie groß ist der Anteil an selbstgeschriebenen Controls in
Ihren Anwendungen?“ (203 Antworten)
> 50% stimmten für „mehr als 5% eigene Controls”
< 20% benutzen überhaupt keine eigenen Controls

3. Ihre SAPUI5 App könnte so aussehen!
Demo
Video

4. Alles, was man sieht…
…ist ein Control.
529 Controls enthalten in SAPUI5 1.34 (270 in OpenUI5)
*) Einschließlich abstrakter Basisklassen, doppelt vorhandener und anderer Controls, die nicht allzu wichtig sind.
*)

5. ModelViewController im Kleinen
API:
Setzen/Binden von
Daten, …
Behavior:
Ereignisbehandlung,
Logik
Renderer:
HTML Struktur
(+CSS)

6. Object
EventProvider
ManagedObject
Element
Control
sap.ui.basesap.ui.core

7. Hä? Ich will Code sehen!
• Ein einfaches „Quadrat“-Control:
http://jsbin.com/openui5-control/2/edit

8. Das war zu einfach…
• Ok, ein Google-Map-Control:
http://jsbin.com/xavuhi/1/edit
• Data-Binding, Supportwerkzeuge, ...
alles funktioniert automatisch.

9. Äh… wie funktioniert das?
1. Touch Event auf dem Slider
• Der Slider setzt den neuen Wert gemäß der Position
2. ManagedObject
• Generische Setter/Getter verbinden mit Data Binding
3. Model Update
=> Kleines Päuschen!
4. Invalidierung
=> Kleines Päuschen!
5. Der Renderer wird gerufen
6. Das neue HTML wird ins DOM gehängt

10. Total flüssig…
• Selbst kompletes Neu-Rendern ist abartig schnell!
• Meistens.
• Lässt sich verhindern durch Überschreiben von Settern etc. (siehe
http://jsbin.com/fosiya/edit)
setLatitude: function(lat) {
this.setProperty("latitude", lat, true); // KEIN Neu-Rendern!
if (this._map) {
this._map.panTo(new google.maps.LatLng(lat, this.getLongitude()));
}
return this;
}

11. Und wie geht das mit dem Support-Tool?
var komischesDing = sap.ui.getCore().byId("__map0");
komischesDing.getMetadata().getName();
metaData.getProperties()["latitude"];

12. Besondere Methoden
• init, exit
• onBeforeRendering, onAfterRendering
• on…. (Events wie „onclick“)
• Nur für die meistbenötigten Events, ansonsten: jQuery.on(…)
• UI5 Event Dispatching
• UI5 Maus-/Touch-Emulierung
• Browser- und Control-Events
• my.Square mit Event: http://jsbin.com/zuhiri/1/edit

13. Rendering-Details
• Aufgabe: HTML erzeugen, das den aktuellen Zustand darstellt
• EIN Wurzelelement, writeControlData(…)
• Konventionen
• Renderer-Funktionen
• Escaping (XSS!)
• Container-Controls rendern ihre Kinder
• my.Square als Container: http://jsbin.com/zuhiri/2/edit?html,output

14. Und das CSS?
• Öhm….. irgendwo ablegen und laden…
• Oder es gleich richtig machen: Libraries! (Grunt-Build)
• LESS
https://github.com/SAP/openui5/blob/master/docs/controllibraries.md

15. Für Fortgeschrittene
• Accessibility:
• Tastaturbedienung (ItemNavigation!)
• ARIA
• „High Contrast Black“ Theme
• Right-to-Left
• ResizeListener
• Popups
• my.Square als Popup: http://jsbin.com/zuhiri/3/edit
• Unit Tests

16. Zum Nachlesen
• UI5 SDK:
• Developing Content:
• Developing Controls
• Control Development Guidelines
• …
• Walkthrough Tutorial, Schritt 34
• GitHub:
• How to build Control Libraries (es wird Grunt benötigt, daher nicht im SDK dokumentiert)
• UI5 Slack Chat mit den Räumen #customcontrol und #controlplatform
• Anmelden auf http://slackui5invite.herokuapp.com/
• Git Repository für Controls aus der Community:
https://github.com/slackUI5Controls
• Diese Folien  (Link-Übersicht auf http://jsbin.com/daqozo)

17. ENDE

18. © 2016 SAP SE oder ein SAP-Konzernunternehmen.
Alle Rechte vorbehalten.
Weitergabe und Vervielfältigung dieser Publikation oder von Teilen daraus sind, zu welchem Zweck und in welcher Form auch immer, ohne die ausdrückliche schriftliche
Genehmigung durch SAP SE oder ein SAP-Konzernunternehmen nicht gestattet.
SAP und andere in diesem Dokument erwähnte Produkte und Dienstleistungen von SAP sowie die dazugehörigen Logos sind Marken oder eingetragene Marken der
SAP SE (oder von einem SAP-Konzernunternehmen) in Deutschland und verschiedenen anderen Ländern weltweit.
Weitere Hinweise und Informationen zum Markenrecht finden Sie unter http://global.sap.com/corporate-de/legal/copyright/index.epx.
Die von SAP SE oder deren Vertriebsfirmen angebotenen Softwareprodukte können Softwarekomponenten auch anderer Softwarehersteller enthalten.
Produkte können länderspezifische Unterschiede aufweisen.
Die vorliegenden Unterlagen werden von der SAP SE oder einem SAP-Konzernunternehmen bereitgestellt und dienen ausschließlich zu Informationszwecken.
Die SAP SE oder ihre Konzernunternehmen übernehmen keinerlei Haftung oder Gewährleistung für Fehler oder Unvollständigkeiten in dieser Publikation.
Die SAP SE oder ein SAP-Konzernunternehmen steht lediglich für Produkte und Dienstleistungen nach der Maßgabe ein, die in der Vereinbarung über die jeweiligen
Produkte und Dienstleistungen ausdrücklich geregelt ist. Keine der hierin enthaltenen Informationen ist als zusätzliche Garantie zu interpretieren.
Insbesondere sind die SAP SE oder ihre Konzernunternehmen in keiner Weise verpflichtet, in dieser Publikation oder einer zugehörigen Präsentation dargestellte
Geschäftsabläufe zu verfolgen oder hierin wiedergegebene Funktionen zu entwickeln oder zu veröffentlichen. Diese Publikation oder eine zugehörige Präsentation,
die Strategie und etwaige künftige Entwicklungen, Produkte und/oder Plattformen der SAP SE oder ihrer Konzernunternehmen können von der SAP SE oder ihren
Konzernunternehmen jederzeit und ohne Angabe von Gründen unangekündigt geändert werden.
Die in dieser Publikation enthaltenen Informationen stellen keine Zusage, kein Versprechen und keine rechtliche Verpflichtung zur Lieferung von Material, Code oder
Funktionen dar. Sämtliche vorausschauenden Aussagen unterliegen unterschiedlichen Risiken und Unsicherheiten, durch die die tatsächlichen Ergebnisse von den
Erwartungen abweichen können. Die vorausschauenden Aussagen geben die Sicht zu dem Zeitpunkt wieder, zu dem sie getätigt wurden. Dem Leser wird empfohlen,
diesen Aussagen kein übertriebenes Vertrauen zu schenken und sich bei Kaufentscheidungen nicht auf sie zu stützen.