Technology Blogs by SAP
Learn how to extend and personalize SAP applications. Follow the SAP technology blog for insights into SAP BTP, ABAP, SAP Analytics Cloud, SAP HANA, and more.
cancel
Turn on suggestions
Auto-suggest helps you quickly narrow down your search results by suggesting possible matches as you type.
Showing results for 
Search instead for 
Did you mean: 

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

JerryWang
Product and Topic Expert
Product and Topic Expert
‎2015 Oct 30 4:07 AM
0 Kudos
2,122


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:




Labels in this area
Popular Blog Posts