More Related Content

UI5con 2017 - Create your own UI5 controls – what’s coming up

  1. Andreas Kunz, SAP SE June 30, 2017 Create Your Own UI5 Controls – What’s Coming Up
  2. Disclaimer „What‘s Coming Up“ means:  No guarantees about future features!  What‘s there (control dev in general) has been presented last year:  https://www.slideshare.net/andreaskunz/ui5-controls-ui5con-2016  https://www.youtube.com/watch?v=W3Qkev2yk9w
  3. 3 JavaScript file with API, renderer and behavior All-imperative Can create HTML from scratch, but also re-use other controls internally UI5 controls at present
  4. 4 More and more “composite controls” are being developed:  Controls that purely consist of other controls, with some additional logic, but no own HTML Composite Controls SearchField (composite control) sap.m.Input sap.m.Button „placeholder“ property „placeholder“ property „press“ event „search“ event„buttonText“ property „text“ property sync sync handle in control code Outer API:
  5. 5 Creating composite controls requires lots of error-prone glue code:  Instantiating inner controls (at the right time, and not too often), rendering them, managing lifecycle  Making sure they are properly connected in the control hierarchy (for data models, events, invalidation)  Forwarding outer API properties/aggregations to inner controls and vice versa Could we get rid of all that code?  XMLViews and Fragments are well-established and already used for composing controls.  Just use a Fragment to define the inner controls, add an API and a way to bind inner controls to this API!  voilà: the FragmentControl is born! Why is the standard approach not good enough?
  6. 6 Two files:  HelloWorld.js – regular control implementation, with API/metadata part, but without the renderer – inherits from sap.ui.core.FragmentControl  HelloWorld.control.xml – just like a regular XMLView (or rather a Fragment, hence the name) How does a FragmentControl look? Demo Code
  7. 7 In FragmentControls, you can bind inner controls to the outer control API. $this: name of model which contains the outer API Mechanism behind this feature is generic and can be used elsewhere: sap.ui.model.base.ManagedObjectModel We‘ll get to it later… Digression: what is $this? ?
  8. 8 SearchField Declarative way to map events also being investigated Demo
  9. 9 When application should have full control over content added into your FragmentControl:  JS file is trivial, just defines the aggregation:  Use a sap.ui.core.FragmentProxy in XML, as placeholder for controls from outside. Handling Aggregations, Part 1: Using aggregated controls as-provided Demo Code
  10. 10 Handling Aggregations, Part 2: Using different controls internally When you want to hide some properties of the internal controls or use different control type:  Fully declare the inner control and bind some properties against the outer aggregation. Example: application should be able to make your control display any number of buttons, but should only control the button text and only get one consolidated event. The binding context in the aggregation template (= the Button) refers to the respective item in the outer aggregation, so the relative path „text“ points to a different outer control for each actual Button. Demo Code
  11. 11 FragmentControl is very well-suited for static, always equal control structures. Can use aggregation binding and visibility of inner controls to handle dynamic structure. XML Templating can be an option to:  Handle complex structure decisions declaratively  Set up structure in advance, possibly store result in view cache (performance!) But feels complicated right now… working on it… What if the structure is not always the same?
  12. 12 Initially „ControlTreeModel“ and just used for controls within a FragmentControl, then generalized. Makes tree of UI5 controls (or other ManagedObjects) and their properties available as a model . Just do and set the model on a view or control, e.g. as „inputModel“, and you can: CAVEAT: usually don‘t do this in applications! Normally, binding both controls to a separate data model is a cleaner option, but sometimes you don‘t own both controls or don‘t know both models. Coming back to the ManagedObjectModel Demo Code
  13. 13 For each ListItem in oList, there will be a Button within the HorizontalLayout. ManagedObjectModel also works for aggregations Demo Code
  14. 14 When creating inner controls in init(), bind their properties and aggregations to a ManagedObjectModel you create. ManagedObjectModel in regular composite controls Demo Code …
  15. 15 All shown features are available in master branch and 1.48, BUT:  Documentation and APIdoc is hidden  Classes are marked as „private“ Productive use is discouraged because API might change, or entire feature may be removed or renamed! Trying the feature and giving feedback is welcome. No support guarantees.  Source code: https://github.com/SAP/openui5/blob/master/src/sap.ui.core/src/sap/ui/core/FragmentControl.js  Commits: https://github.com/SAP/openui5/search?p=1&q=fragmentcontrol&type=Commits  Nightly: https://openui5nightly.hana.ondemand.com/resources/sap/ui/core/FragmentControl-dbg.js  1.48: https://openui5.hana.ondemand.com/1.48.0/resources/sap/ui/model/base/ManagedObjectModel-dbg.js Caveat: session title includes „what‘s coming up“!
  16. 16 FragmentControls are written like XMLView+Controller – but they have an API like controls. Make creating composite controls much easier. The ManagedObjectModel offers the API of a control (or other ManagedObject) as a bindable Model. It is created automatically in FragmentControls, to connect inner controls to the outer API, but can be used for other purposes. FragmentControls and ManagedObjectModel are present in UI5 1.48, but not yet documented and intended for productive use. You can try, but they may change. All code samples: https://github.com/akudev/UI5con2017-ControlDevNews Summary
  17. Thank you. Contact information: Andreas Kunz andreas.kunz@sap.com Twitter: @aku_dev You are welcome to give feedback for this session in the UI5con Event App