Jerry Wang

October 30, 2015 3 minute read

How I do self-study on a given Fiori control – part 10

Tutorial Index – how I do self study on the following topics
Content of this blog

Tutorial Index – how I do self study on the following topics

Part1 – UI5 Module lazy load mechanism

Part3 – Html native event VS UI5 semantic event

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

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: