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 Anwend...
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 abstrakte...
ModelViewController im Kleinen
API:
Setzen/Binden von
Daten, …
Behavior:
Ereignisbehandlung,
Logik
Renderer:
HTML Struktur...
Object
EventProvider
ManagedObject
Element
Control
sap.ui.basesap.ui.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, ...
all...
Äh… wie funktioniert das?
1. Touch Event auf dem Slider
• Der Slider setzt den neuen Wert gemäß der Position
2. ManagedObj...
Total flüssig…
• Selbst kompletes Neu-Rendern ist abartig schnell!
• Meistens.
• Lässt sich verhindern durch Überschreiben...
Und wie geht das mit dem Support-Tool?
var komischesDing = sap.ui.getCore().byId("__map0");
komischesDing.getMetadata().ge...
Besondere Methoden
• init, exit
• onBeforeRendering, onAfterRendering
• on…. (Events wie „onclick“)
• Nur für die meistben...
Rendering-Details
• Aufgabe: HTML erzeugen, das den aktuellen Zustand darstellt
• EIN Wurzelelement, writeControlData(…)
•...
Und das CSS?
• Öhm….. irgendwo ablegen und laden…
• Oder es gleich richtig machen: Libraries! (Grunt-Build)
• LESS
https:/...
Für Fortgeschrittene
• Accessibility:
• Tastaturbedienung (ItemNavigation!)
• ARIA
• „High Contrast Black“ Theme
• Right-t...
Zum Nachlesen
• UI5 SDK:
• Developing Content:
• Developing Controls
• Control Development Guidelines
• …
• Walkthrough Tu...
ENDE
© 2016 SAP SE oder ein SAP-Konzernunternehmen.
Alle Rechte vorbehalten.
Weitergabe und Vervielfältigung dieser Publikation...
Nächste SlideShare
Wird geladen in …5
×

UI5 Custom Controls (deutschsprachig) - Präsentation von den DSAG Thementagen im Juni 2016

305 Aufrufe

Veröffentlicht am

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.

Veröffentlicht in: Software
0 Kommentare
2 Gefällt mir
Statistik
Notizen
  • Als Erste(r) kommentieren

Keine Downloads
Aufrufe
Aufrufe insgesamt
305
Auf SlideShare
0
Aus Einbettungen
0
Anzahl an Einbettungen
10
Aktionen
Geteilt
0
Downloads
0
Kommentare
0
Gefällt mir
2
Einbettungen 0
Keine Einbettungen

Keine Notizen für die Folie

UI5 Custom Controls (deutschsprachig) - Präsentation von den DSAG Thementagen im Juni 2016

  1. 1. UI5 ControlsWie funktionieren sie? Wie entwickelt man eigene Controls? . Andreas Kunz, SAP SE 06/2016
  2. 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. 3. Ihre SAPUI5 App könnte so aussehen! Demo Video
  4. 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. 5. ModelViewController im Kleinen API: Setzen/Binden von Daten, … Behavior: Ereignisbehandlung, Logik Renderer: HTML Struktur (+CSS)
  6. 6. Object EventProvider ManagedObject Element Control sap.ui.basesap.ui.core
  7. 7. Hä? Ich will Code sehen! • Ein einfaches „Quadrat“-Control: http://jsbin.com/openui5-control/2/edit
  8. 8. Das war zu einfach… • Ok, ein Google-Map-Control: http://jsbin.com/xavuhi/1/edit • Data-Binding, Supportwerkzeuge, ... alles funktioniert automatisch.
  9. 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. 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. 11. Und wie geht das mit dem Support-Tool? var komischesDing = sap.ui.getCore().byId("__map0"); komischesDing.getMetadata().getName(); metaData.getProperties()["latitude"];
  12. 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. 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. 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. 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. 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. 17. ENDE
  18. 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.

×