SAP UI5和CRM WebUI的View和Controller是如何綁定的

UI5

例如我在UI5的界面上畫一個按鈕，點擊以後彈出一個Alert dialog。

在XML view裏只定義了controller的名稱和事件處理函數的名稱。那麼按鈕被點擊以後，controller的onShowHello被觸發。可是，這個controller的實例是何時被建立， 而且關聯到這個申明它的XML view裏呢？

在XMLView.js裏，我定義的XML view的源代碼被加載以後，XMLView會調用XMLTemplateProcessor， 解析XML view的內容，根據裏面的control申明建立對應的UI5控件實例。下圖的變量_xContent.innerHTML即爲上圖XML view的源代碼。

XMLView的實例經過工廠模式建立以後，XMLView源代碼裏定義的controller名稱sap.ui.demo.walkthrough.controller.App，會賦到oView實例的字段_controllerName上。

View和Controller的綁定是經過這個方法createAndConnectController完成：

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

Controller的實例也經過工廠模式建立：

一旦connectToView執行以後，

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

CRM WebClient UI

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

在BSP的編程環境裏，開發人員根本無需操心這個controller實例的初始化，直接用就行。

那麼View的controller實例究竟在何時被框架初始化的？

要本身搞清楚這個問題，能夠隨便找個BSP UI component作個實驗。我找的是PRDHS。在其View的controller CL_PRDHS_HEADER_IMPL的構造函數裏設置斷點：

打開該view，從調用棧上下文便可得知BSP框架在什麼地方初始化controller實例的。記下這個實例在ABAP runtime的地址編號4633:

同UI5邏輯相似，在CL_BSP_PAGE_BASE~CREATE_PAGE內部，第190行建立controller的實例並將其同View實例創建關聯關係。

最後運行時View的controller實例4633和以前咱們在PRDHS/Header的controller CL_PRDHS_HEADER_IMPL的構造函數中的me指針4633同樣，證實兩個變量指向的是同一個實例。

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