如何檢測SAP UI5應用裡控制元件的初始化和析構時間點
Recently in order to resolve some internal incidents, I have the requirement to monitor the control registration and deregistration, that is, I need to know when and where the control is created and destructed. If you don’t know where to set breakpoint to achieve it, just follow me
For example, I have a list and all the information I have is its id “list”, as defined in xml view:
(1) Open Chrome development tool, get the core instance via sap.ui.getCore().
(2) There is one function byId available on this core instance, type “core.byId” in console and put the mouse on the returned “function anonymous()”.
Now you can click it to see detail:
(3) Once clicked, the implementation will be automatically opened. The main logic is in line 41. Till now we cannot know much about it. So set a breakpoint on line 41.
(4) Type “core.byId(“list”)” in console and press enter key, breakpoint triggered. Our hard coded argument “list” is passed in.
Now we reached Core.js which contains the implementation of byId function.
And the byId function just simply return the corresponding entry in a big object “this.mElements” if there exists such one.
By going through this file soon I find what I am looking for. The control registration is just to add a key ( control id ) – value ( control instance ) pair to the central container “this.mElements”. This could be found in line 1921. The control deregistration is just to remove the entry from container – line 1930.
(5) When I set the breakpoint in line 1921 trying to capture the time when the list instance is created. What annoying me is the breakpoint is triggered again and again since there is so many controls in my ui. Then I just wrote a small pieces of code below:
And now it works like a charm. The breakpoint is triggered only once for the very list creation, the runtime id of list is “__xmlview6–list”.
Then through callstack I get to know that the list creation is triggered by the successfully load and parse of the xml view where the list is defined.
I would find the source code of xml view which is to be parsed by XMLTemplateProcessor, which is exactly the same as the one in my IDE.
You can also use the same approach to observe the control deregistration timeslot:
Hope this small tip can help you learn control life-cycle knowledge by debugging yourself
要獲取更多Jerry的原創文章,請關注公眾號"汪子熙":
來自 “ ITPUB部落格 ” ,連結:http://blog.itpub.net/24475491/viewspace-2717880/,如需轉載,請註明出處,否則將追究法律責任。
相關文章
- SAP UI5 檢視裡的 OverflowToolbar 控制元件UI控制元件
- 如何找到SAP UI5控制元件ID生成的準確時間點和程式碼位置UI控制元件
- SAP UI5 應用裡 FlexBox 控制元件的設計原理UIFlex控制元件
- SAP UI5 xml 檢視裡定義的控制元件,執行時如何建立其例項的?UIXML控制元件
- SAP UI5 應用裡一些容器控制元件的介紹UI控制元件
- 關於 SAP UI5 SimpleForm 控制元件裡的 ColumnsL 和 labelSpanXL 的測試UIORM控制元件
- SAP UI5 應用開發教程之四十五 - 如何在 SAP UI5 應用裡使用 jQuery 和原生的 DOM APIUIjQueryAPI
- SAP UI5應用裡的列表處理UI
- SAP UI5 XML 檢視裡 label 和 text 控制元件文字對齊問題UIXML控制元件
- SAP UI5 BarcodeScannerButton 的初始化邏輯 - feature 檢測,Cordova API 檢測等邏輯UIAPI
- SAP UI5 SimpleForm 控制元件例項的初始化除錯UIORM控制元件除錯
- 在 SAP BAS 裡使用 SAP UI5 應用消費 OData 的 Create 和 Delete 操作UIdelete
- 如何把SAP UI5應用部署到SAP雲平臺的Fiori Launchpad裡去UI
- SAP UI5 應用 FlexBox 控制元件 growFactor 的使用方法UIFlex控制元件
- SAP UI5應用裡型別為Edm.DateTime的日期控制元件設計原理UI型別控制元件
- SAP UI5 BarcodeScannerButton 的初始化邏輯 - Cordova API 檢測等邏輯UIAPI
- SAP UI5 應用開發教程之三十二 - 如何建立一個自定義 SAP UI5 控制元件UI控制元件
- SAP UI5 裡的 Busy Dialog 控制元件使用概述UI控制元件
- SAP UI5 裡的 Busy Indicator 控制元件使用概述UIIndicator控制元件
- SAP UI5應用裡搜尋功能的實現UI
- SAP UI5應用裡的頁面路由處理UI路由
- 如何在SAP UI5應用裡新增使用攝像頭拍照的功能UI
- SAP UI5 應用開發教程之五十九 - 如何在 SAP UI5 應用裡顯示世界地圖試讀版UI地圖
- SAP UI5 裡如何讓每次檢視顯示時都執行某方法UI
- SAP UI5 應用 index.html 裡 data-sap-ui-resourceroots 指令的含義和作用UIIndexHTML
- SAP UI5 應用的螢幕尺寸檢測工作原理深入剖析試讀版UI
- 透過 FileUploader 的初始化,瞭解 SAP UI5 應用的 StaticArea 初始化邏輯UI
- SAP UI5 Web Component React應用如何在Component之間跳轉UIWebReact
- 使用 SAP UI5 CLI 命令列工具構建和執行 SAP UI5 應用UI命令列
- SAP UI5 barcode 控制元件的 feature 檢查探測機制單步除錯 - checkCordovaInIframeUI控制元件除錯AI
- SAP UI5 應用 XML 檢視的載入邏輯分析UIXML
- 如何在 SAP UI5 應用裡顯示 PDF 檔案試讀版UI
- 如何在瀏覽器裡開發並執行 SAP UI5 應用瀏覽器UI
- SAP UI5 應用開發教程之一百零六 - 如何提高 SAP UI5 應用路由 url 的可讀性UI路由
- SAP UI5 應用 SimpleForm 控制元件 ResponsiveGridLayout 佈局的工作原理深入剖析UIORM控制元件
- SAP UI5 應用開發教程之五十六 - SAP UI5 樹控制元件(tree)的開發試讀版UI控制元件
- SAP UI5 應用在 Business Application Studio 裡的構建單步分析UIAPP
- 如何分析SAP UI5應用的undefined is not a function錯誤UIUndefinedFunction