天天看點

如何了解 SAP UI5 的 sap.ui.define 函數Modify main.view.xml

随着 1.28 版本中 sap.ui.define 函數的引入,SAPUI5 引入了對異步子產品定義 (AMD) 的支援。AMD 是 Asynchronous Module Definition 的縮寫。

所謂子產品(Module),即是可以在浏覽器中加載和執行的 JavaScript 檔案。

異步子產品定義 (AMD) 是一種 JavaScript API,它指定了一種定義子產品及其依賴項的方式,以便它們可以異步加載而無需擔心加載順序。

下面我們通過一個具體的例子來講解 sap.ui.define 的工作原理。

Create an Application Project for SAPUI5

打開 Eclipse 并轉到菜單選項,檔案 -> 建立 -> 其他…。 在 New 視窗中,打開節點 SAPUI5 Application Development 并選擇 Application Project 選項。 單擊下一步按鈕。

如何了解 SAP UI5 的 sap.ui.define 函數Modify main.view.xml
為項目提供一個名稱。 我們稱之為 sapui5.amd.demo。 選擇庫 sap.m 并選中 Create an Initial View 選項。 單擊下一步按鈕。
如何了解 SAP UI5 的 sap.ui.define 函數Modify main.view.xml
在下一個視窗中,為視圖提供一個名稱。 我們稱其為主要的。 選擇 Development Paradigm 作為 XML。 這将建立一個 XML 視圖。 單擊完成按鈕。
如何了解 SAP UI5 的 sap.ui.define 函數Modify main.view.xml
建立好的項目具有如下的層級結構:
如何了解 SAP UI5 的 sap.ui.define 函數Modify main.view.xml

Modify index.html

打開 index.html 檔案并使用以下代碼更新它。 Bootstrap 腳本部分已被修改,以防止過早加載 sap.m 庫。 此外,出于類似原因,建立 sap.m.App 執行個體的自動生成代碼已被注釋掉。 當 index.html 在浏覽器中運作時,for 循環會列印出加載庫子產品的初始清單。

如何了解 SAP UI5 的 sap.ui.define 函數Modify main.view.xml
如何了解 SAP UI5 的 sap.ui.define 函數Modify main.view.xml
如何了解 SAP UI5 的 sap.ui.define 函數Modify main.view.xml

Modify main.view.xml

打開 main.view.xml 檔案并使用以下代碼更新它。 它幾乎與 Eclipse 中自動生成的代碼相同,隻是添加了标題。

如何了解 SAP UI5 的 sap.ui.define 函數Modify main.view.xml

Modify main.controller.js

控制器是 AMD 相關操作發生的地方。 打開 main.controller.js 檔案并使用下面給出的代碼更新它。 這裡要注意的重要變化是在第一行中,函數調用 sap.ui.controller () 已被注釋掉,以便為 AMD 函數 sap.ui.define () 讓路,它具有以下文法:

sap.ui.define(sModuleName?, aDependencies?, vFactory, bExport?)

(1) sModuleName 是一個可選參數,它是正在定義的子產品的名稱。 如果省略,它将替換為用于請求子產品的名稱。 是以,如果一個子產品的名字比如說“LoginModule”沒有作為參數傳遞,它可以被請求為“sap/login/LoginMudule”,因為它存儲在一個檔案“sap/login/LoginModule.js”中。

(2) aDependencies 是作為依賴項的子產品名稱的字元串數組。

這個數組包含了在确定目前定義的子產品的值之前需要加載的依賴子產品。

(3) vFactory 是一個強制性的工廠函數,用于計算子產品的值。

每個依賴子產品名稱都作為參數傳遞給這個工廠函數,其順序與它們在字元串數組中指定的順序相同。

(4) bExport 是一個布爾變量,保留供 SAP 使用。

在下面的示例中,沒有傳遞子產品名稱。 并且依賴字元串數組 包含子產品名稱 [“sap / ui / core / mvc / Controller”, “sap / m / MessageToast”]。 然後将這些名稱作為參數(以相同的順序,即Controller、MessageToast)傳遞給工廠函數。

控制器的 onInit 生命周期方法中的代碼列印出所有已加載庫的清單。

最後 onAfterRendering 函數使用 sap.m.MessageToast.show () 在螢幕上顯示一個簡短的 Hello World 消息。

如何了解 SAP UI5 的 sap.ui.define 函數Modify main.view.xml
如何了解 SAP UI5 的 sap.ui.define 函數Modify main.view.xml
如何了解 SAP UI5 的 sap.ui.define 函數Modify main.view.xml

注意:“use strict”這個文字表達式是由 JavaScript 1.8.5 (ECMAScript 5) 引入的。 它告訴浏覽器以所謂的“嚴格模式”執行代碼。 嚴格模式有助于在開發時的早期狀态檢測潛在的編碼問題,這意味着,例如,它確定在使用變量之前聲明變量。 是以,它有助于防止常見的 JavaScript 陷阱,是以使用嚴格模式是一個很好的做法。

Deploy and Run Application

啟動伺服器并部署應用程式。 打開一個新的浏覽器視窗(此示例使用 Chrome 浏覽器)并打開 Chrome 開發者工具。

如何了解 SAP UI5 的 sap.ui.define 函數Modify main.view.xml

在浏覽器中打開如下網址 http://localhost:8180/sapui5.amd.demo/

請根據您的伺服器配置使用端口号。 加載 index.html 會簡要顯示 Hello World 消息,并将在開發人員工具控制台中列印日志。

從列印的 log 資訊可以看到: sap.m 子產品直到将子產品依賴清單傳遞給 sap.ui.define之後才加載。

如何了解 SAP UI5 的 sap.ui.define 函數Modify main.view.xml
如何了解 SAP UI5 的 sap.ui.define 函數Modify main.view.xml
如何了解 SAP UI5 的 sap.ui.define 函數Modify main.view.xml

繼續閱讀