- Tutorial Index - how I do self study on the following topics
- Part1 - UI5 Module lazy load mechanism
- Part2 - Control renderer
- Part3 - Html native event VS UI5 semantic event
- Part4 - Control metadata
- Part5 - Control instance data - how are setXXX and getXXX implemented
- Part6 - Control data binding under the hood
- Part7 - Implementations for different binding mode: OneWay, TwoWay, OneTime
- Part8 - Control ID
- Part9 - Control internationalization support
- Part10 - this blog
- Part11 - Button control and its underlying DOM
- Content of this blog
- Sample application setup for this blog
- How is button control defined in xml view initialized in the runtime
- XMLView renderer
- Further reading
Tutorial Index - how I do self study on the following topics
Part1 - UI5 Module lazy load mechanism
Part2 - Control renderer
Part3 - Html native event VS UI5 semantic event
Part4 - Control metadata
Part5 - Control instance data - how are setXXX and getXXX implemented
Part6 - Control data binding under the hood
Part7 - Implementations for different binding mode: OneWay, TwoWay, OneTime
Part8 - Control ID
Part9 - Control internationalization support
Part10 - this blog
Part11 - Button control and its underlying DOM
Content of this blog
So far, all of our discussion are done based on the fact that the button control instance is created by JavaScript code in the html file of sample application. In this blog, let's try to place the button control in XML view.
Sample application setup for this blog
In previous blog, we have already create a folder "buttontutorial". In this blog, just create a child folder "view" under it, and create a new xml file "simple.view.xml". The content of the xml view:
<core:View xmlns:core="sap.ui.core" xmlns:common="sap.ui.commons">
<common:Button text="Jerry" id="jerryButton"/>
</core:View>The content of outside index.html:
The hierarchy of this sample application:
--- buttontutorial
|--- view
|- simple.view.xml
--- index.html
How is button control defined in xml view initialized in the runtime
In all previous blogs so far, the button control is directly created by JavaScript code. So for the button defined in xml view, who is responsible for its creation? You might have already found a hint: in xml view I assign the button with id "jerryButton", and in the generated html code, the button tag has id "__xmlview0--jerryButton", which consists of the very id in the xml view and its parent, the xml view's id.
In Chrome network tag, use "xml" to filter the downloaded files. We find a promising function "parseTemplate" which might be able to answer our doubt.
Set a breakpoint on it and refresh the application. From the callstack we can understand the logic.
1. The xml view file containing the button control is downloaded.
2. The function parseTemplate of XMLTemplateProcessor is called. There is a recursive logic written within this function to go through all UI elements defined in the xml view and create a runtime instance for them one by one.
The button id is generated by this line:
XMLView renderer
Still remember the Button renderer introduced in the part 2 of this tutorial? In this blog, you have put the button control in an XML view. And in the runtime, this XML view is also rendered as tag div with id "__xmlview0". This rendering is done by XMLView renderer, as you could observe the load of it via Chrome network tab:
Further reading
In this blog, the source code where the control instance defined in XML view is created in the runtime is introduced. In my daily work, I prefer to set breakpoint there to trouble shooting issues such as:
- I have defined a formatter for a control in xml view, why it does not work in the runtime?
- I have defined some control in xml view, why it is not rendered at all in the runtime?
I list them here for your reference:
- Why my formatter does not work? A trouble shooting example to know how it works
- How to find UI element binding path which is not statically defined in XML view
- SAP Managed Tags:
