UI5 Controls (UI5con 2016)

2.912 Aufrufe

Veröffentlicht am

Explaining what UI5 controls are, how they can be developed. Including links to several running jsbin examples explaining different aspects of control development. With an updated resources section at the end.

Slides were initially created for a UI5 CodeJam in s'Hertogenbosch, Netherlands, and then adapted for a 30-minute presentation given at UI5con 2016 in Frankfurt.

Veröffentlicht in: Software
  • Als Erste(r) kommentieren

UI5 Controls (UI5con 2016)

  1. 1. UI5 ControlsHow they work, how to create your own Andreas Kunz, SAP SE 03/2016
  2. 2. Want your UI5 app to look like this? Demo
  3. 3. If you can see it… …then it‘s a Control. 529 Controls shipped with SAPUI5 1.34 (270 with OpenUI5) *) Including all kinds of not-so relevant stuff like abstact base classes, duplicate Controls, deprecated Controls, spacer controls and whatever. *)
  4. 4. Like MVC, just smaller API Setting/binding data, … Behavior: Event handling, logic Renderer: HTML structure (+CSS)
  5. 5. Object EventProvider ManagedObject Element Control sap.ui.basesap.ui.core
  6. 6. Huh? Show me code! • A simple „Square“ control: http://jsbin.com/openui5-control/2/edit
  7. 7. Nah, that was too simple! • Ok, a Google Map control: http://jsbin.com/xavuhi/1/edit • Data binding, support tools, ... working out of the box.
  8. 8. Wait… how does this work? 1. Touch Event on Slider • Slider sets its value according to position 2. ManagedObject • Generic setters/getters: connection to data binding 3. Model update => Waaait! 4. Invalidation => Waaait! 5. Call the renderers 6. Put HTML into DOM
  9. 9. Smooooooooooooooooooooooother • Complete re-rendering is frigging fast! • Mostly. • Prevent by overriding property setters etc. (see http://jsbin.com/fosiya/edit) setLatitude: function(lat) { this.setProperty("latitude", lat, true); // suppress rerendering if (this._map) { this._map.panTo(new google.maps.LatLng(lat, this.getLongitude())); } return this; }
  10. 10. And the Support Tool? var crazyThing = sap.ui.getCore().byId("__map0"); crazyThing.getMetadata().getName(); metaData.getProperties()["latitude"];
  11. 11. Special Methods • onInit, onExit • onBeforeRendering, onAfterRendering • on…. (Events) • Only for most-used events, otherwise jQuery.on(…) • UI5 event dispatching • UI5 mouse-touch emulation • Browser vs Control events • my.Square with event: http://jsbin.com/zuhiri/1/edit
  12. 12. Rendering Details • Create the DOM for current state • One root node, writeControlData(…) • Conventions • Renderer functions • Escaping (XSS!) • Container Controls render their children • my.Square as container: http://jsbin.com/zuhiri/2/edit?html,output
  13. 13. And the CSS? • Umm….. just put it somewhere… • Or do it right: Libraries! (Grunt build) • LESS https://github.com/SAP/openui5/blob/master/docs/controllibraries.md
  14. 14. Advanced Stuff • Accessibility Support: • Keyboard interaction (ItemNavigation!) • ARIA • High Contrast Black theme • ResizeListener • Popups • my.Square as popup: http://jsbin.com/zuhiri/3/edit • Unit Tests
  15. 15. Resources • UI5 SDK: • Developing Content: • Developing Controls • Control Development Guidelines • … • Walkthrough Step 34 • GitHub: • How to build Control Libraries (grunt required, hence not documented in SDK) • UI5 Slack with #customcontrol and #controlplatform channels • Get your invite here • Proposed repository for community controls: https://github.com/slackUI5Controls • These slides  (links at http://jsbin.com/desequ or http://tinyurl.com/ui5con-controls )
  16. 16. The END

×