How I do self-study on a given Fiori control – part 10
- 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
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
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:
How is button control defined in xml view initialized in the runtime
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:
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:
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: