SlideShare ist ein Scribd-Unternehmen logo
1 von 18
Downloaden Sie, um offline zu lesen
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.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, ...
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.

Weitere ähnliche Inhalte

Was ist angesagt?

Spring Boot - Wird Spring jetzt wirklich einfach?
Spring Boot - Wird Spring jetzt wirklich einfach?Spring Boot - Wird Spring jetzt wirklich einfach?
Spring Boot - Wird Spring jetzt wirklich einfach?jenspresser
 
Applikationsentwicklung für Android
Applikationsentwicklung für AndroidApplikationsentwicklung für Android
Applikationsentwicklung für AndroidThorsten Weiskopf
 
iOS Apps mit Webtechnologien erstellen
iOS Apps mit Webtechnologien erstelleniOS Apps mit Webtechnologien erstellen
iOS Apps mit Webtechnologien erstellenMichael Kühnel
 
EnterJS 2015 - JavaScript von Morgen schon heute
EnterJS 2015 - JavaScript von Morgen schon heuteEnterJS 2015 - JavaScript von Morgen schon heute
EnterJS 2015 - JavaScript von Morgen schon heutePhilipp Burgmer
 
Taugt AngularJS wirklich was? Erfahrungsbericht und Ausblick
Taugt AngularJS wirklich was? Erfahrungsbericht und AusblickTaugt AngularJS wirklich was? Erfahrungsbericht und Ausblick
Taugt AngularJS wirklich was? Erfahrungsbericht und AusblickPhilipp Burgmer
 
DWX 2017 - Alternativen zu Visual-Studio-Testtools: Wann lohnt es sich auch m...
DWX 2017 - Alternativen zu Visual-Studio-Testtools: Wann lohnt es sich auch m...DWX 2017 - Alternativen zu Visual-Studio-Testtools: Wann lohnt es sich auch m...
DWX 2017 - Alternativen zu Visual-Studio-Testtools: Wann lohnt es sich auch m...Marc Müller
 
Windows 8 für Entwickler
Windows 8 für EntwicklerWindows 8 für Entwickler
Windows 8 für EntwicklerJan Hentschel
 
Beschleunigen Sie Ihre Web-Entwicklung mit AngularJS Framework
Beschleunigen Sie Ihre Web-Entwicklung mit AngularJS FrameworkBeschleunigen Sie Ihre Web-Entwicklung mit AngularJS Framework
Beschleunigen Sie Ihre Web-Entwicklung mit AngularJS FrameworkDieter Ziegler
 
Angular 2 Workshop Oktober 2015
Angular 2 Workshop Oktober 2015Angular 2 Workshop Oktober 2015
Angular 2 Workshop Oktober 2015Manfred Steyer
 

Was ist angesagt? (11)

Spring Boot - Wird Spring jetzt wirklich einfach?
Spring Boot - Wird Spring jetzt wirklich einfach?Spring Boot - Wird Spring jetzt wirklich einfach?
Spring Boot - Wird Spring jetzt wirklich einfach?
 
Applikationsentwicklung für Android
Applikationsentwicklung für AndroidApplikationsentwicklung für Android
Applikationsentwicklung für Android
 
Elsholz stoll js_03_10
Elsholz stoll js_03_10Elsholz stoll js_03_10
Elsholz stoll js_03_10
 
iOS Apps mit Webtechnologien erstellen
iOS Apps mit Webtechnologien erstelleniOS Apps mit Webtechnologien erstellen
iOS Apps mit Webtechnologien erstellen
 
EnterJS 2015 - JavaScript von Morgen schon heute
EnterJS 2015 - JavaScript von Morgen schon heuteEnterJS 2015 - JavaScript von Morgen schon heute
EnterJS 2015 - JavaScript von Morgen schon heute
 
Taugt AngularJS wirklich was? Erfahrungsbericht und Ausblick
Taugt AngularJS wirklich was? Erfahrungsbericht und AusblickTaugt AngularJS wirklich was? Erfahrungsbericht und Ausblick
Taugt AngularJS wirklich was? Erfahrungsbericht und Ausblick
 
AngularJS
AngularJSAngularJS
AngularJS
 
DWX 2017 - Alternativen zu Visual-Studio-Testtools: Wann lohnt es sich auch m...
DWX 2017 - Alternativen zu Visual-Studio-Testtools: Wann lohnt es sich auch m...DWX 2017 - Alternativen zu Visual-Studio-Testtools: Wann lohnt es sich auch m...
DWX 2017 - Alternativen zu Visual-Studio-Testtools: Wann lohnt es sich auch m...
 
Windows 8 für Entwickler
Windows 8 für EntwicklerWindows 8 für Entwickler
Windows 8 für Entwickler
 
Beschleunigen Sie Ihre Web-Entwicklung mit AngularJS Framework
Beschleunigen Sie Ihre Web-Entwicklung mit AngularJS FrameworkBeschleunigen Sie Ihre Web-Entwicklung mit AngularJS Framework
Beschleunigen Sie Ihre Web-Entwicklung mit AngularJS Framework
 
Angular 2 Workshop Oktober 2015
Angular 2 Workshop Oktober 2015Angular 2 Workshop Oktober 2015
Angular 2 Workshop Oktober 2015
 

Andere mochten auch

Build responsive enterprise-grade web apps with OpenUI5
Build responsive enterprise-grade web apps with OpenUI5Build responsive enterprise-grade web apps with OpenUI5
Build responsive enterprise-grade web apps with OpenUI5Andreas Kunz
 
OSCON 2014: OpenUI5 - The New Responsive Web UI Library
OSCON 2014: OpenUI5 - The New Responsive Web UI LibraryOSCON 2014: OpenUI5 - The New Responsive Web UI Library
OSCON 2014: OpenUI5 - The New Responsive Web UI LibraryAndreas Kunz
 
UI5 Controls (UI5con 2016)
UI5 Controls (UI5con 2016)UI5 Controls (UI5con 2016)
UI5 Controls (UI5con 2016)Andreas Kunz
 
Developing Custom Controls with UI5 (OpenUI5 video lecture)
Developing Custom Controls with UI5 (OpenUI5 video lecture)Developing Custom Controls with UI5 (OpenUI5 video lecture)
Developing Custom Controls with UI5 (OpenUI5 video lecture)Michael Graf
 

Andere mochten auch (6)

Build responsive enterprise-grade web apps with OpenUI5
Build responsive enterprise-grade web apps with OpenUI5Build responsive enterprise-grade web apps with OpenUI5
Build responsive enterprise-grade web apps with OpenUI5
 
Bala murali sapui5 abapcv
Bala murali sapui5 abapcvBala murali sapui5 abapcv
Bala murali sapui5 abapcv
 
OSCON 2014: OpenUI5 - The New Responsive Web UI Library
OSCON 2014: OpenUI5 - The New Responsive Web UI LibraryOSCON 2014: OpenUI5 - The New Responsive Web UI Library
OSCON 2014: OpenUI5 - The New Responsive Web UI Library
 
SAPUI5 for everything
SAPUI5 for everythingSAPUI5 for everything
SAPUI5 for everything
 
UI5 Controls (UI5con 2016)
UI5 Controls (UI5con 2016)UI5 Controls (UI5con 2016)
UI5 Controls (UI5con 2016)
 
Developing Custom Controls with UI5 (OpenUI5 video lecture)
Developing Custom Controls with UI5 (OpenUI5 video lecture)Developing Custom Controls with UI5 (OpenUI5 video lecture)
Developing Custom Controls with UI5 (OpenUI5 video lecture)
 

Ähnlich wie UI5 Custom Controls (German language!) - Präsentation von den DSAG Thementagen im Juni 2016 (English version also available)

DACHNUG50 LeapTippsAndTricks.pdf
DACHNUG50 LeapTippsAndTricks.pdfDACHNUG50 LeapTippsAndTricks.pdf
DACHNUG50 LeapTippsAndTricks.pdfDNUG e.V.
 
Entwicklung mit Volt MX und Co. | Teil 1
Entwicklung mit Volt MX und Co. | Teil 1Entwicklung mit Volt MX und Co. | Teil 1
Entwicklung mit Volt MX und Co. | Teil 1DNUG e.V.
 
Slides zum Impulsreferat: HCL UDP - DNUG Stammtisch Salzburg
Slides zum Impulsreferat: HCL UDP - DNUG Stammtisch SalzburgSlides zum Impulsreferat: HCL UDP - DNUG Stammtisch Salzburg
Slides zum Impulsreferat: HCL UDP - DNUG Stammtisch SalzburgDNUG e.V.
 
2007 - Basta!: Nach soa kommt soc
2007 - Basta!: Nach soa kommt soc2007 - Basta!: Nach soa kommt soc
2007 - Basta!: Nach soa kommt socDaniel Fisher
 
Webinar - ABAP Development Tools
Webinar - ABAP Development ToolsWebinar - ABAP Development Tools
Webinar - ABAP Development ToolsCadaxo GmbH
 
Server Revolutions- Der Spring Source DM Server
Server Revolutions- Der Spring Source DM ServerServer Revolutions- Der Spring Source DM Server
Server Revolutions- Der Spring Source DM ServerSandro Sonntag
 
JavaScript und trotzdem Softwerker
JavaScript und trotzdem SoftwerkerJavaScript und trotzdem Softwerker
JavaScript und trotzdem SoftwerkerDennis Wilson
 
Schema.org - Strukturierte Daten und Rich Snippets
Schema.org - Strukturierte Daten und Rich SnippetsSchema.org - Strukturierte Daten und Rich Snippets
Schema.org - Strukturierte Daten und Rich Snippetsavenit AG
 
Ui5con satyendra raksha1725-1810
Ui5con satyendra raksha1725-1810Ui5con satyendra raksha1725-1810
Ui5con satyendra raksha1725-1810sayendra_dhar
 
Testing einer Angular App
Testing einer Angular AppTesting einer Angular App
Testing einer Angular AppFlorian Bader
 
Webinar - Boost your ABAP
Webinar - Boost your ABAPWebinar - Boost your ABAP
Webinar - Boost your ABAPCadaxo GmbH
 
Slides (2) zu Teil 2 der Veranstaltungsreihe Anwendungsentwicklung mit Volt M...
Slides (2) zu Teil 2 der Veranstaltungsreihe Anwendungsentwicklung mit Volt M...Slides (2) zu Teil 2 der Veranstaltungsreihe Anwendungsentwicklung mit Volt M...
Slides (2) zu Teil 2 der Veranstaltungsreihe Anwendungsentwicklung mit Volt M...DNUG e.V.
 
Webcast SAP Cloud Platform 2 - Developing Tools
Webcast SAP Cloud Platform 2 - Developing ToolsWebcast SAP Cloud Platform 2 - Developing Tools
Webcast SAP Cloud Platform 2 - Developing ToolsPatric Dahse
 
SharePointCommunity.ch SharePoint Lösungen für die Zukunft
SharePointCommunity.ch SharePoint Lösungen für die ZukunftSharePointCommunity.ch SharePoint Lösungen für die Zukunft
SharePointCommunity.ch SharePoint Lösungen für die ZukunftDavid Schneider
 
Windows as a Service - Herausforderungen ohne Windows Desktop Analytics
Windows as a Service - Herausforderungen ohne Windows Desktop AnalyticsWindows as a Service - Herausforderungen ohne Windows Desktop Analytics
Windows as a Service - Herausforderungen ohne Windows Desktop AnalyticsFabian Niesen
 
SEO Projekte in der agilen Entwicklung nach Scrum
SEO Projekte in der agilen Entwicklung nach ScrumSEO Projekte in der agilen Entwicklung nach Scrum
SEO Projekte in der agilen Entwicklung nach ScrumBianca Zang
 

Ähnlich wie UI5 Custom Controls (German language!) - Präsentation von den DSAG Thementagen im Juni 2016 (English version also available) (20)

DACHNUG50 LeapTippsAndTricks.pdf
DACHNUG50 LeapTippsAndTricks.pdfDACHNUG50 LeapTippsAndTricks.pdf
DACHNUG50 LeapTippsAndTricks.pdf
 
Entwicklung mit Volt MX und Co. | Teil 1
Entwicklung mit Volt MX und Co. | Teil 1Entwicklung mit Volt MX und Co. | Teil 1
Entwicklung mit Volt MX und Co. | Teil 1
 
Slides zum Impulsreferat: HCL UDP - DNUG Stammtisch Salzburg
Slides zum Impulsreferat: HCL UDP - DNUG Stammtisch SalzburgSlides zum Impulsreferat: HCL UDP - DNUG Stammtisch Salzburg
Slides zum Impulsreferat: HCL UDP - DNUG Stammtisch Salzburg
 
Swisscom runs SAP Lumira
Swisscom runs SAP LumiraSwisscom runs SAP Lumira
Swisscom runs SAP Lumira
 
2007 - Basta!: Nach soa kommt soc
2007 - Basta!: Nach soa kommt soc2007 - Basta!: Nach soa kommt soc
2007 - Basta!: Nach soa kommt soc
 
Webinar - ABAP Development Tools
Webinar - ABAP Development ToolsWebinar - ABAP Development Tools
Webinar - ABAP Development Tools
 
Server Revolutions- Der Spring Source DM Server
Server Revolutions- Der Spring Source DM ServerServer Revolutions- Der Spring Source DM Server
Server Revolutions- Der Spring Source DM Server
 
JavaScript und trotzdem Softwerker
JavaScript und trotzdem SoftwerkerJavaScript und trotzdem Softwerker
JavaScript und trotzdem Softwerker
 
Schema.org - Strukturierte Daten und Rich Snippets
Schema.org - Strukturierte Daten und Rich SnippetsSchema.org - Strukturierte Daten und Rich Snippets
Schema.org - Strukturierte Daten und Rich Snippets
 
Ui5con satyendra raksha1725-1810
Ui5con satyendra raksha1725-1810Ui5con satyendra raksha1725-1810
Ui5con satyendra raksha1725-1810
 
Testing einer Angular App
Testing einer Angular AppTesting einer Angular App
Testing einer Angular App
 
20110223 activiti
20110223 activiti20110223 activiti
20110223 activiti
 
Webinar - Boost your ABAP
Webinar - Boost your ABAPWebinar - Boost your ABAP
Webinar - Boost your ABAP
 
Slides (2) zu Teil 2 der Veranstaltungsreihe Anwendungsentwicklung mit Volt M...
Slides (2) zu Teil 2 der Veranstaltungsreihe Anwendungsentwicklung mit Volt M...Slides (2) zu Teil 2 der Veranstaltungsreihe Anwendungsentwicklung mit Volt M...
Slides (2) zu Teil 2 der Veranstaltungsreihe Anwendungsentwicklung mit Volt M...
 
Webcast SAP Cloud Platform 2 - Developing Tools
Webcast SAP Cloud Platform 2 - Developing ToolsWebcast SAP Cloud Platform 2 - Developing Tools
Webcast SAP Cloud Platform 2 - Developing Tools
 
SharePointCommunity.ch SharePoint Lösungen für die Zukunft
SharePointCommunity.ch SharePoint Lösungen für die ZukunftSharePointCommunity.ch SharePoint Lösungen für die Zukunft
SharePointCommunity.ch SharePoint Lösungen für die Zukunft
 
20110406 activiti april
20110406 activiti april20110406 activiti april
20110406 activiti april
 
20110321 activiti märz
20110321 activiti märz20110321 activiti märz
20110321 activiti märz
 
Windows as a Service - Herausforderungen ohne Windows Desktop Analytics
Windows as a Service - Herausforderungen ohne Windows Desktop AnalyticsWindows as a Service - Herausforderungen ohne Windows Desktop Analytics
Windows as a Service - Herausforderungen ohne Windows Desktop Analytics
 
SEO Projekte in der agilen Entwicklung nach Scrum
SEO Projekte in der agilen Entwicklung nach ScrumSEO Projekte in der agilen Entwicklung nach Scrum
SEO Projekte in der agilen Entwicklung nach Scrum
 

UI5 Custom Controls (German language!) - Präsentation von den DSAG Thementagen im Juni 2016 (English version also available)

  • 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)
  • 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.