1. 程式人生 > >SAP UI5和CRM WebUI的View和Controller是如何綁定的

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

ons dialog nsh 如何 time 運行時 ui5 無需 一個

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的原創技術文章,請關註公眾號"汪子熙"或者掃描下面二維碼:

技術分享圖片

技術分享圖片

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