UI5 ControlsWie funktionieren sie? Wie entwickelt man eigene Controls? .

Andreas Kunz, SAP SE

06/2016

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

Ihre SAPUI5 App könnte so aussehen!

Demo

Video

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.

*)

ModelViewController im Kleinen

API:Setzen/Binden von

Daten, …

Behavior:Ereignisbehandlung,

Logik

Renderer: HTML Struktur

(+CSS)

Object

EventProvider

ManagedObject

Element

Control

sap.u

i.base

sap.u

i.core

Hä? Ich will Code sehen!

• Ein einfaches „Quadrat“-Control: http://jsbin.com/openui5-control/2/edit

Das war zu einfach…

• Ok, ein Google-Map-Control: http://jsbin.com/xavuhi/1/edit

• Data-Binding, Supportwerkzeuge, ... alles funktioniert automatisch.

Ä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

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;

}

Und wie geht das mit dem Support-Tool?

var komischesDing = sap.ui.getCore().byId("__map0");

komischesDing.getMetadata().getName();

metaData.getProperties()["latitude"];

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

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

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

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

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)

ENDE

© 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.