ITPub博客

首页 > 应用开发 > IT综合 > SAP UI5控件ID的生成逻辑原理解析

SAP UI5控件ID的生成逻辑原理解析

原创 IT综合 作者:i042416 时间:2020-09-02 21:42:13 0 删除 编辑

We know that when we create a new UI5 control instance, we can explicitly pass an id into constructor. In this case, developer takes responsibility to ensure the id is unique.



We can find the unique id in rendered page.



An alternative is we do not pass any id but let UI5 framework to automatically generate one. Above code will have a button with id “__button0” generated.



Question: how can I find exactly location of code where UI5 does the trick?

Since I don’t know exactly where should I start to debug, I even do not know which js file I should start with.

As a result, I plan to manually bring some trouble to UI5 framework, so that it can raise some complain message in Chrome development tool console to give me some idea. So I write the following code. I assume line 11 will lead to some mistake due to the duplicate control id.



When I refresh the application, I see the expected error message in console. Ckick the third frame in callstack: Core.registerElement to view its source code:



Here below we can understand the UI5 framework logic how to detect duplicate control id:

(1) There is a central repository to store all registered control instance. See this.mElements in line 40711. (2) in line 40700, scan against the central repository with the id of new control to be registered. If byId returns one, it means there is already existing control with the same id. Duplication detected!



So far we still do not know where id is generated. Type oElement.getId in console and the source code of this function is printed out. Then we know for every control instance, it has a property sId to store its ID.



Perform key word search within the same JS file where registerElement is implemented with keyword “.sId”, only 11 matches found.

Then we find a constructor function which looks like just what I am looking for. The logic of automatic ID generation if not explicitly specified is implemented between line 29062 and 29064. Set a breakpoint to verify our guess.



Write the following code in controller:

var myButton = new sap.ui.commons.Button({
   text: "press me~"
  });

In the runtime breakpoint is triggered.



The ID fragment, “button”, comes from this.getName() in line 33711.



UI5 framework internally maintains a counter as the postfix of each control id.



This is the reason why we can see lots of number postfix in every UI5 application:



要获取更多Jerry的原创文章,请关注公众号"汪子熙":


来自 “ ITPUB博客 ” ,链接:http://blog.itpub.net/24475491/viewspace-2716709/,如需转载,请注明出处,否则将追究法律责任。

请登录后发表评论 登录
全部评论
SAP成都研究院开发专家,SAP社区导师,SAP中国技术大使。

注册时间:2018-01-20

  • 博文量
    1923
  • 访问量
    883254