There are now several new features for UI5 control development (and beyond). These slides from the UI5con@SAP 2018 session explain them: - XMLComposites - ManagedObjectModel - Aggregation Forwarding - Event Handler Parameters in XMLViews/XMLComposites

1. Andreas Kunz & Thomas Gauguin Houghton-Larsen, SAP SE
June 22, 2018
News from
Control Development

2. Disclaimer
„News“ means: we will not talk about control development basics
 UI5con 2016:
 https://www.slideshare.net/andreaskunz/ui5-controls-ui5con-2016
 https://www.youtube.com/watch?v=W3Qkev2yk9w
 16:05 h in Room B:
„Create your own UI5 Control, wrap it in a library and consume it“

3. 3
JavaScript file with API, renderer and
behavior
All-imperative
Can create HTML from scratch, but
can 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)
▪ Sync of outer API properties / aggregations with inner controls
▪ No visualization of the final control layout
How can we address these challenges ?
▪ XMLViews and Fragments are well-established and already used for combining controls
▪ XMLViews have proven to make their inner structure easily understandable
▪ 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: “FragmentControl” was a preliminary working title of the XMLComposite (preview at UI5con@SAP 2017)
Why is the standard approach not good enough?

6. 6
Pair of 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) + $this ….
How does an XMLComposite control look?
Demo Code

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
SearchField
Demo
Code

9. 9
Handling Aggregations: 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.
DemoCode

10. 10
Makes properties and aggregations of a UI5 control (or a ManagedObject) available as a model.
Just do
and set the model on a view or control, e.g. as „inputModel“, and you can:
Note: Usually, this additional level of indirection makes less sense if an application has the models
and the Controls at its disposal.
Coming back to the ManagedObjectModel
Demo Code

11. 11
For each ListItem in oList, there will be a Button within the HorizontalLayout.
ManagedObjectModel also works for aggregations
Demo Code

12. 12
Example: a new composite container control uses a Panel internally for expand/collapse.
All controls in „content“ aggregation should be displayed inside this Panel.
What if we just want to re-use the same control somewhere inside?
my.Container (composite control)
sap.m.Panel
„content“ aggregation
Outer API:

13. 13
Composite controls can define an aggregation to be forwarded to an internal child control:
metadata : { // "my.Container" API
aggregations : {
content: {
type: "sap.ui.core.Control",
multiple: true,
forwarding: {
idSuffix: "-panel",
aggregation: "content"
}
},
...
init: function() {
var oPanel = new sap.m.Panel(this.getId() + "-panel", { ... });
Demo Playground Demo
Aggregation Forwarding

14. 14
forwarding: {
getter: "getPanel",
aggregation: "content"
}
...
getPanel: function() {
// if not yet created:
var oPanel = new sap.m.Panel({ ... });
...
return oPanel;
}
Demo
Aggregation Forwarding – create inner control lazily

15. 15
Aggregation Forwarding in XMLComposites
Demo Code
Even easier:
<!– somewhere in the XML Fragment: -->
<Panel id="panel" headerText="Inner Panel" expandable="true" />
<!-- controls given into the "content" aggregation will be forwarded in here -->
content: {
type: "sap.ui.core.Control",
multiple: true,
forwarding: {
idSuffix: "--panel",
aggregation: "content"
}
...

16. 16
Have you ever written XMLView & Controller code like this?
<Button text="-10" press=".minus10" />
<Button text="-" press=".minus1" />
<Button text="+" press=".plus1" />
<Button text="+10" press=".plus10" />
And now for something completely different…

17. 17
Then you‘ll love this:
<Button text="-10" press=".changeBy(-10)" />
<Button text="-" press=".changeBy(-1)" />
<Button text="+" press=".changeBy(1)" />
<Button text="+10" press=".changeBy(10)" />
Event Handler Parameters

18. 18
…and probably also this:
<Button text="Calculate Tax" press=".calcTax(${unitPrice}, ${taxCategory})" />
▪ Accessing model data with binding statements, according to current data context
<ColorPalette colorSelect=".setColor(${$parameters>/value})" />
<Button text="Tell Me" press=".doSomething(${$source>/text})" />
▪ Keeping knowledge about controls away from controller code
<Button text="Greet Me!" press="sap.m.MessageBox.show('Hello!')" />
▪ Calling static functions directly, without a controller method
$event is the event object, $controller is the controller
Evaluated as a Binding Expression.
Event Handler Parameters
Playground Demo Table Demo

19. 19
Event parameters can be used in XMLViews, but also in XMLComposites.
<core:FragmentDefinition xmlns="sap.m" xmlns:core="sap.ui.core" xmlns:layout="sap.ui.layout">
<layout:HorizontalLayout>
<Button text="-10" press=".changeBy(-10)" />
<Button text="-" press=".changeBy(-1)" />
<Input value="{$this>/page}" editable="false" />
<Button text="+" press=".changeBy(1)" />
<Button text="+10" press=".changeBy(10)" />
</layout:HorizontalLayout>
</core:FragmentDefinition>
…something completely different? Maybe not.
Demo XML Code JS Code

20. 20
...
<Input id="innerInput" />
<Button text="{$this>/buttonText}"
press=".fireEvent('search', {value: $controller.byId('innerInput').getValue()})"/>
...
Use with moderation…
Or in the SearchField XMLComposite shown earlier

21. 21
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 properties & aggregations of a control (or other
ManagedObject) as a bindable Model. It is automatically provided in XMLComposites.
Aggregation Forwarding can be used to declare that every control put into an aggregation of
a composite shall be forwarded to an inner control.
Event Handler Parameters can now be specified in XMLViews and XMLComposites.
Summary

22. 22
All features are in UI5 1.56
▪ XMLComposites & ManagedObjectModel earlier, but improved now
▪ ManagedObjectModel only publicly documented in 1.58
▪ Still sort of experimental
Code samples: https://github.com/akudev/UI5con2018-ControlDevNews
Documentation (openui5nightly, as 1.56 is not yet released):
▪ XML Composite Controls
▪ ManagedObjectModel
▪ Aggregation Forwarding
▪ Handling Events in XML Views
Resources

23. Thank you.
Contact information:
Andreas Kunz
@aku_dev
Thomas Gauguin Houghton-Larsen