Skip to Content

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.

/wp-content/uploads/2015/10/clipboard1_821252.png

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.

/wp-content/uploads/2015/10/clipboard2_821253.png

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.

/wp-content/uploads/2015/10/clipboard3_821254.png

The button id is generated by this line:

/wp-content/uploads/2015/10/clipboard4_821261.png

/wp-content/uploads/2015/10/clipboard5_821262.png

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:

/wp-content/uploads/2015/10/clipboard10_821263.png

/wp-content/uploads/2015/10/clipboard11_821264.png

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:

To report this post you need to login first.

Be the first to leave a comment

You must be Logged on to comment or reply to a post.

Leave a Reply