1. 程式人生 > >UI5-文檔-4.2-Bootstrap

UI5-文檔-4.2-Bootstrap

選項 同時 註冊 vid 簡單 在哪裏 通過 relative theme

在使用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