天天看點

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

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是如何綁定的