SAP UI5和CRM WebUI的View和Controller是如何繫結的

i042416發表於2018-05-11

UI5

例如我在UI5的介面上畫一個按鈕,點選之後彈出一個Alert dialog。


SAP UI5和CRM WebUI的View和Controller是如何繫結的

在XML view裡只定義了controller的名稱和事件處理函式的名稱。那麼按鈕被點選之後,controller的onShowHello被觸發。但是,這個controller的例項是什麼時候被建立, 並且關聯到這個申明它的XML view裡呢?

SAP UI5和CRM WebUI的View和Controller是如何繫結的

在XMLView.js裡,我定義的XML view的原始碼被載入之後,XMLView會呼叫XMLTemplateProcessor, 解析XML view的內容,根據裡面的control申明建立對應的UI5控制元件例項。下圖的變數_xContent.innerHTML即為上圖XML view的原始碼。

SAP UI5和CRM WebUI的View和Controller是如何繫結的

XMLView的例項通過工廠模式建立之後,XMLView原始碼裡定義的controller名稱sap.ui.demo.walkthrough.controller.App,會賦到oView例項的欄位_controllerName上。

SAP UI5和CRM WebUI的View和Controller是如何繫結的

View和Controller的繫結是通過這個方法createAndConnectController完成:

connect controller to view after controller and control tree are fully initialized

SAP UI5和CRM WebUI的View和Controller是如何繫結的

Controller的例項也通過工廠模式建立:

SAP UI5和CRM WebUI的View和Controller是如何繫結的

一旦connectToView執行之後,

SAP UI5和CRM WebUI的View和Controller是如何繫結的

oView和oController的關聯關係就建立起來了。

SAP UI5和CRM WebUI的View和Controller是如何繫結的

CRM WebClient UI

每個UI component view裡有一個built-in的屬性controller, 指向這個view對應的controller例項。

SAP UI5和CRM WebUI的View和Controller是如何繫結的

在BSP的程式設計環境裡,開發人員根本無需操心這個controller例項的初始化,直接用就行。

那麼View的controller例項究竟在什麼時候被框架初始化的?

要自己搞清楚這個問題,可以隨便找個BSP UI component做個實驗。我找的是PRDHS。在其View的controller CL_PRDHS_HEADER_IMPL的建構函式裡設定斷點:

SAP UI5和CRM WebUI的View和Controller是如何繫結的

開啟該view,從呼叫棧上下文即可得知BSP框架在什麼地方初始化controller例項的。記下這個例項在ABAP runtime的地址編號4633:

SAP UI5和CRM WebUI的View和Controller是如何繫結的

同UI5邏輯類似,在CL_BSP_PAGE_BASE~CREATE_PAGE內部,第190行建立controller的例項並將其同View例項建立關聯關係。

SAP UI5和CRM WebUI的View和Controller是如何繫結的

最後執行時View的controller例項4633和之前我們在PRDHS/Header的controller CL_PRDHS_HEADER_IMPL的建構函式中的me指標4633一樣,證明兩個變數指向的是同一個例項。

SAP UI5和CRM WebUI的View和Controller是如何繫結的

要獲取更多Jerry的原創技術文章,請關注公眾號"汪子熙"或者掃描下面二維碼:

SAP UI5和CRM WebUI的View和Controller是如何繫結的
SAP UI5和CRM WebUI的View和Controller是如何繫結的

來自 “ ITPUB部落格 ” ,連結:http://blog.itpub.net/24475491/viewspace-2154324/,如需轉載,請註明出處,否則將追究法律責任。

相關文章