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

SAPUI5 運作時的初始化包括以下步驟:
(1) jQuery 插件主要位于 jQuery.sap 命名空間中,提供 SAPUI5 的基本功能,例如子產品化概念、日志架構、性能測量等。
如下圖所示:
(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當所有庫都加載完畢并且文檔準備就緒時,核心的 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)。 此外,渲染适用于這些庫的方式與聲明的庫相同。