Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

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

Slides from the session at UI5con@SAP 2017:
The UI5 development team is working on new ways to bind data within composite controls and to even declare controls by combining others within so-called "XMLComposites" (formerly known as "FragmentControls"). The slide deck content is about features in development, straight from the lab, not seen before.

  • Login to see the comments

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

  1. 1. Andreas Kunz, SAP SE June 30, 2017 Create Your Own UI5 Controls – What’s Coming Up
  2. 2. Disclaimer „What‘s Coming Up“ means:  No guarantees about future features!  What‘s there (control dev in general) has been presented last year:  
  3. 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. 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. 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 XMLComposite control is born! NOTE: until mid July 2017 the XMLComposite was developed under the name “FragmentControl”, and that’s the name under which it was also presented at UI5con@SAP 2017. The name changed, but the functionality remains the same. Why is the standard approach not good enough?
  6. 6. 6 Two files:  HelloWorld.js – regular control implementation, with API/metadata part, but without the renderer – inherits from sap.ui.core.XMLComposite  HelloWorld.control.xml – just like a regular XMLView (or rather an XML Fragment) How does an XMLComposite control look? Demo Code
  7. 7. 7 In XMLComposites, 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 (e.g. in regular composite controls without XML): sap.ui.model.base.ManagedObjectModel We‘ll get to it later… Digression: what is $this?
  8. 8. 8 SearchField Declarative way to map events also being investigated Demo
  9. 9. 9 When application should have full control over content added into your XMLComposite:  Use a sap.ui.core.AggregationProxy in XML, as placeholder for controls from outside. Handling Aggregations, Part 1: Using aggregated controls as-provided JS file is trivial, just defines the aggregation: NOTE: AggregationProxy was also renamed (from FragmentProxy) after UI5con@SAP. Demo Code
  10. 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 inner Button. Demo Code
  11. 11. 11 XMLComposites are 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. 12 Initially „ControlTreeModel“ and just used for controls within an XMLComposite, 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. 13 For each ListItem in oList, there will be a Button within the HorizontalLayout. ManagedObjectModel also works for aggregations Demo Code
  14. 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. 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!  Update: it was indeed renamed (FragmentControl to XMLComposite) in 1.50. When we say such a thing, we mean it! Trying the feature and giving feedback is welcome. No support guarantees.  Source code:  Commits:  Nightly:  1.48: Caveat: session title includes „what‘s coming up“!
  16. 16. 16 XMLComposite controls are written like XMLView+Controller – but they have an API like regular controls. They 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 XMLComposites, to connect inner controls to the outer API, but can be used for other purposes. XMLComposites 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: Summary *) In 1.48 as „FragmentControl“, from 1.50 as „XMLComposite“
  17. 17. Thank you. Contact information: Andreas Kunz Twitter: @aku_dev You are welcome to give feedback for this session in the UI5con Event App