UI5-文檔-4.2-Bootstrap
在使用SAPUI5做一些事情之前,我們需要加載並初始化它。加載和初始化SAPUI5的過程稱為引導。一旦引導完成,我們只需顯示一個警告。
Preview
An alert "UI5 is ready" is displayed
Coding
你可以在此查看和下載所有文件Walkthrough - Step 2.
webapp/index.html
請註意:SAPUI5是一個JavaScript庫,可以從應用程序所在的同一個Web服務器加載,也可以從不同的服務器加載。本教程中的代碼示例總是顯示相對路徑,並假設SAPUI5在本地部署在Web服務器根上下文的resources文件夾中。
如果SAPUI5部署在服務器上的其他地方,或者您希望使用不同的服務器,那麽您需要調整引導程序中的相應路徑(here:src="/resources/sap-ui-core.js")在本教程中根據您自己的需求。SAPUI5也可以從內容交付網絡(CDN)在https://sapui5.hana.ondemand.com/resources/sap-ui-core.js .
您可以在教程或測試目的中使用對SAPUI5最新穩定版本的引用,但絕不可將其用於生產用途。在實際的應用程序中,您總是必須顯式地指定SAPUI5版本。
有關CDN的更多信息,請參見Variant for Bootstrapping from Content Delivery Network.
如果您正在使用SAP Web IDE,您可以右鍵單擊該項目並選擇New HTML5 Application Descriptor參考/resources…作業。這就創建了一個neo-app.json文件,它為該路徑配置URL映射。
<!DOCTYPE html> <html> <head> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta charset="utf-8"> <title>Walkthrough</title> <script id="sap-ui-bootstrap" src="/resources/sap-ui-core.js" data-sap-ui-theme="sap_belize" data-sap-ui-libs="sap.m" data-sap-ui-compatVersion="edge" data-sap-ui-preload="async" > </script> <script> sap.ui.getCore().attachInit(function () { alert("UI5 is ready"); }); </script> </head> <body> <p>Hello World</p> </body> </html>
?第一個<script>標記的src屬性告訴瀏覽器在哪裏可以找到SAPUI5核心庫——它初始化SAPUI5運行時並加載額外的資源,例如data-sap-ui-libs屬性中指定的庫。在此步驟中,我們從本地web服務器加載SAPUI5框架,並使用以下配置選項初始化核心模塊:
?SAPUI5控件支持不同的主題,我們選擇sap_belize作為默認主題.
?我們指定所需的UI庫sap.m,其中包含本教程所需的UI控件。
?為了利用SAPUI5的最新功能,我們將兼容性版本定義為edge。
?我們將“bootstrapping”過程配置為異步運行。這意味著出於性能原因,SAPUI5資源可以在後臺同時加載。
當加載所有資源和庫時,SAPUI5運行時將觸發全局init事件,以表明庫已經就緒。偵聽此事件以便僅在事件被觸發後觸發應用程序邏輯,這是一種很好的實踐。
在上面的例子中,我們通過調用sap.ui.getCore()來獲得對SAPUI5內核的引用,並通過在內核上調用attachInit(…)來為init事件註冊一個匿名回調函數。在SAPUI5中,這類回調函數通常被稱為處理程序、偵聽器函數或簡單的偵聽器。核心是單例的,可以從代碼中的任何地方訪問。
當SAPUI5的引導完成並顯示原生JavaScript警告時,將執行匿名回調函數。
sap-ui-core.js文件包含了jQuery,這意味著你可以使用jQuery的所有特性。
Parent topic: Walkthrough
Previous: Step 1: Hello World!
Next: Step 3: Controls
Related Information
Bootstrapping: Loading and Initializing
Preload Variant for Bootstrapping
Compatibility Version Information
Variant for Bootstrapping from Content Delivery Network
https://jquery.org/
UI5-文檔-4.2-Bootstrap