天天看點

SAP UI5 的初始化過程

加載 SAPUI5 運作時後開始初始化過程。

SAP UI5 的初始化過程

SAPUI5 運作時的初始化包括以下步驟:

(1) jQuery 插件主要位于 jQuery.sap 命名空間中,提供 SAPUI5 的基本功能,例如子產品化概念、日志架構、性能測量等。

如下圖所示:

SAP UI5 的初始化過程
(2) 定義了全局對象 sap:
SAP UI5 的初始化過程
(3) sap.ui.core.Core 類與其所有依賴項一起執行。
SAP UI5 的初始化過程

(4) 運作時配置(runtime configuration )由不同來源确定。

(5) 加載配置中聲明的所有庫和子產品及其依賴項, 例如下面這段代碼裡的 lib:

<script id="sap-ui-bootstrap"
    src="https://sapui5.hana.ondemand.com/resources/sap-ui-core.js"
    data-sap-ui-theme="sap_bluecrystal"
    data-sap-ui-libs="sap.m, sap.ui.comp"
    data-sap-ui-bindingSyntax="complex" 
    data-sap-ui-compatVersion="edge"
    data-sap-ui-preload="async"
    data-sap-ui-resourceroots='{
        "sap.ui.demo.tabledelete": "./"
    }'>
</script>
      

(6) 對于每個加載的庫,都會加載配置主題的 CSS 檔案。

例如:

https://sapui5.hana.ondemand.com/resources/sap/ui/core/themes/base/library.css
SAP UI5 的初始化過程

當所有庫都加載完畢并且文檔準備就緒時,核心的 initEvent 被觸發并執行所有注冊的處理程式。

Initialization Readiness

執行或啟動應用程式的最佳時間點是在架構初始化之後。有三種方法可以讓自己适應這個時間架構。以下清單較長的描述了這些初始化準備挂鈎,并提供了何時使用它們的示例。根據您的用例,您可能更喜歡一種方式而不是另一種方式。

ComponentSupport module

在架構初始化後執行代碼的最複雜方法是使用 sap.ui.core.ComponentSupport.

此選項适用于您希望使用 sap.ui.core.UIComponent 作為應用程式入口點的場景。

ComponentSupport 允許您在 HTML 檔案中聲明性地定義一個或多個 sap.ui.core.UIComponent 執行個體,并負責為您建立必要的 sap.ui.core.ComponentContainer。

有關詳細的使用指南,請參閱 ComponentSupport 文檔。

Standalone data-sap-ui-oninit module

除了使用 sap.ui.core.ComponentSupport,您還可以在 SAPUI5 引導腳本元素上定義一個名為 data-sap-ui-oninit 的資料屬性。

此屬性應引用有效的 SAPUI5 子產品,如下面的代碼段所示。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>SAPUI5 Walkthrough</title>
    <script
        id="sap-ui-bootstrap"
        src="https://sapui5.hana.ondemand.com/resources/sap-ui-core.js"
        data-sap-ui-async="true"
        data-sap-ui-resourceroots='{
            "sap.ui5.walkthrough": "./"
        }'
        data-sap-ui-oninit="module:sap/ui5/walkthrough/index">
    </script>
</head>
<body>
<div>Hello World</div>
</body>
</html>
      

SAPUI5 核心将確定在架構初始化過程後在正确的時間點加載和執行 data-sap-ui-oninit 子產品。在此子產品中,您可以執行其他應用程式代碼,例如建立一個新的 XML 視圖執行個體。

此外,由于不需要額外的内聯 script 标記,是以專用的 oninit 子產品可以根據您的要求實作更好的 CSP(

Content Security Policy) 合規性。

這種方式在 Jerry 的文章SAP UI5 初學者教程之二:SAP UI5 的引導過程 Bootstrap 裡有詳細闡述。

attachInit function

attachInit 函數的回調在架構初始化後直接執行。這段代碼可以寫在你的主 HTML 檔案中的一個單獨的内聯 script 标簽中:

sap.ui.getCore().attachInit(function(){

   // 應用程式自己的啟動邏輯可以寫在這裡

sap.ui.getCore().attachInit(function(){
    // 應用程式自己的啟動邏輯可以寫在這裡
});
      

Loading of Additional Resources During Bootstrap

SAPUI5 運作時在引導期間為控制庫加載和解釋附加資源。

檔案按以下順序加載:

(1) Library bootstrap file //resources//library.js

library.js 是一個 JavaScript 檔案,其中包含庫提供的所有枚舉類型的 JavaScript 代碼以及獨立于庫中控件的特定于庫的初始化代碼。該檔案調用 sap.ui.getCore().InitLibrary 方法,其中包含一個描述庫内容的對象(包含的控件清單、元素等)。對于使用 SAPUI5 應用程式開發工具或 SAPUI5 離線建構工具開發的庫,此檔案在建構過程中自動生成。

(2) Library style sheet file //resources//themes//library.css

包含與此庫相關的所有樣式的标準 CSS 檔案。對于應用程式開發工具,此檔案在建構期間自動生成。

Dynamic Loading of Libraries

SAPUI5 提供了 sap.ui.getCore().loadLibary() 方法,除了運作時配置中聲明的庫外,還提供了運作時加載庫。

加載後,您可以使用庫中的所有控件。 對于這些額外的庫,同樣的限制适用于聲明的庫:隻有在 HTML 頁面的 document.ready 事件之後才能通路文檔對象模型 (DOM)。 此外,渲染适用于這些庫的方式與聲明的庫相同。

繼續閱讀