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

[JerryWang]

• 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 - this blog
  
  
  • Part9 - Control internationalization support
  
  
  • Part10 - Button control in XML view
  
  
  • Part11 - Button control and its underlying DOM
  
  
  
  


• Content of this blog
  
  
  
  • Control ID implicit generation logic
  
  
  • Control ID explicitly assignment scenario
  
  
  • How to get control instance by id
  
  
  • 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 - this blog

Part9 - Control internationalization support

Part10 - Button control in XML view

Part11 - Button control and its underlying DOM

Content of this blog

In the second part of this tutorial, we use Chrome development tool to inspect the generated html source code of my sample application which contains only one button control.

Let's recall the simple application. It contains only one html file:



When looking into the html source code, we find out that the button tag has id attribute with value "__button0".

Control ID implicit generation logic

When and where is this id generated? Try to search in keyword "__button", nothing found.



This is probably because the text "button" is not hard coded in the JavaScript source code. Then I have no choice but to debug Button constructor line by line. Soon I found this "button" come from control metadata.



If you forget the study about control metadata usage, you can go back to part 4 for a review.

And why we get button id containing a "zero"? Actually there is a counter maintained internally, and the control button is the FIRST and the only one UI element used in the sample application.

Control ID explicitly assignment scenario

From the source code below, it is clear that when we create a new button control instance, we can pass into the constructor with an object as argument. If there is a "id" field in the object, UI5 Framework will use it as the button control id. If not, framework will automatically generated an internal id for it as illustrated in previous chapter.

So we can just make a verification accordingly. This time I explicitly assign one ID for my button control:

var oButton1 = new sap.ui.commons.Button({

id: "JerryButton",

text : "Button",

tooltip : "This is a test tooltip",

press : function() {

  console.log('Alert from ' + oButton1.getText());

  }

});

And it works as expected.

How to get control instance by id

It is a common requirement to obtain the control instance by its id via JavaScript. For practice, add the following two codes after the button is created:

var oSameButton = sap.ui.getCore().byId("JerryButton");

alert(oButton1 === oSameButton);

"True" will be alerted. So how does byId function work?

Wow, there is no magic there. When debugging byId() implementation, I just find out that there is again a central Array maintained by UI5 framework to store all control instances. For my simple application, there is only one button instance there.

Next question, when is a new generated control instance inserted into this central control repository?

You can of course still find out the answer by debugging. However I have another far more efficient way to find out the location of source code without debugging.

Let's consider what will happen if another button is tried to create with the duplicate id? Since it is not acceptable by UI5 framework to have two controls owning exactly the same id. Let's try anyway...

var oButton1 = new sap.ui.commons.Button({

id: "JerryButton",

text : "Button",

tooltip : "This is a test tooltip",

press : function() {

  console.log('Alert from ' + oButton1.getText());

  }

});

var oButton2s = new sap.ui.commons.Button({

id: "JerryButton" });

Then I find the expected error message in Chrome, and the callstack just guides me to the very code where the central repository is inserted. Just click the hyperlink below:

And then I am navigated to source code line 40705 where the error message is raised. The line 40711 next to it, is just the code which I am searching for the central control repository insertion.

Further reading

1. The blog How to monitor the control registration and deregistration introduces some advanced tips which makes use of the central repository this.mElements introduced above, to enable you to monitor the life cycle of a given control. Without the tip introduced there, suppose you are debugging a productive UI5 application with hundreds of controls and you just need to monitor the insertion of one control, where do you set breakpoint? You can get answer from that blog.

2. See more information about the topic Support for Unique IDs from SAP help portal.