1. 程式人生 > >UI5-文檔-2.5-開發混合Web容器

UI5-文檔-2.5-開發混合Web容器

最小 scrip html 查看 請求 困難 文件夾 而不是 程序包

開發混合Web容器

  您可以將移動應用程序開發為混合應用程序,該混合應用程序由本機應用程序包裝程序(例如PhoneGap)和HTML查看器組成,用於在用戶界面上顯示內容。

  混合應用程序的優點是可以在應用程序商店中發布它們。另外,通過將應用程序代碼和SAPUI5庫文件嵌入到混合容器中,用戶只需要安裝文件一次,而不需要每次啟動應用程序時都下載它們。但是庫的大小變得很重要,因為每個用戶都必須安裝文件,而在web應用程序中,庫部署在服務器上,用戶只需要在運行時下載庫的必要部分。

  要在混合應用程序中包含所需的資源,可以使用靜態移動運行時包openui5-runtime-mobile*.zip。這個包並不包含在SAPUI5中,而是包含在開源版本OpenUI5中。

  這些包的庫大小相當小,因為很可能不需要的內容已經被刪除了,例如測試頁面。一個包包含所有JavaScript文件的調試版本以及優化和最小化的版本。因此,您可以將包用於生產用途和調試目的。要在應用程序包裝器(如PhoneGap)中使用此包,請在應用程序開發人員的相應資源位置解壓該包。

  為了確保文件很小,它只包含最可能使用的控件庫,而不是所有控件庫。根據混合應用程序的不同,可能需要通過從運行時的各個文件夾中復制庫來添加庫,或者需要刪除庫來減少包大小,從而減少用戶的安裝大小。

該文件包含以下控制庫

  •sap.f

  •sap.m

  •sap.tnt

  •sap.ui.core

  •sap.ui.layout

  •sap.ui.suite

  •sap.ui.unified

  •sap.uxap

  這個定義,包括或不包括哪些庫可能是有爭議的。這只是基於經驗法則,而且許多應用程序都需要進行調整。

  而且,移動/混合包排除了某些類型的文件,這些文件通常是不需要的。您的裏程可能會有所不同,因此您可能需要為特定應用程序的需求添加相應的文件library-preload.js文件包含一個庫中的所有控件,以減少HTTP請求的數量,這在混合應用程序中是不需要的,因為沒有HTTP延遲。SAPUI5將在默認情況下嘗試訪問它們,因此您可能會看到在日誌文件或開發人員工具中加載這些文件的嘗試失敗。但是,這些錯誤消息不會造成傷害,您可以通過聲明不存在此類文件並在SAPUI5引導腳本標記中設置以下配置來消除它們:

data-sap-ui-preload=""

  

  雖然靜態包足夠小,可以包含在混合應用程序中,但是您可以通過刪除其他文件來進一步減小大小並優化特定應用程序的內容。以下列舉了一些例子:優化包大小

  ?如果不需要相應的控件庫,則可以刪除所有庫文件夾。例如,在OpenUI5版本中,您可以刪除套件和統一文件夾。

  ?在每一個/resources/sap/* ... */ themes文件夾,您可以刪除除您正在使用的主題文件夾以外的所有主題文件夾。

  請註意:對於所有JavaScript文件,都存在優化版本和調試(dbg)版本。如果您刪除了這些文件,請確保始終刪除這兩個版本。如果您不需要進行簡單的調試,並且希望實現最小的安裝大小,我們建議刪除所有*-dbg.js文件。您可以刪除更多的文件,但是大小縮減是有限的,要找到不需要的文件變得越來越困難。

設備準備事件

  混合web容器需要一些時間來初始化。在此期間,AJAX請求的發送被阻塞,這意味著一旦發送AJAX請求,JavaScript代碼就會停止,代碼執行也會停止。這會導致UI凍結效果。

  SAPUI5中的OData模型在內部使用AJAX請求,因此必須在混合容器準備好避免用戶界面凍結之後進行OData模型初始化。初始化之後,混合web容器將觸發一個事件,該事件在PhoneGap中稱為deviceready。要修復此問題,請將創建OData模型的代碼移動到核心對象或任何其他控件的model屬性設置到deviceready事件偵聽器。

Example:

<script>

<!-- put the following code in the beginning of the application code -->

function appReady(){

    sap.ui.getCore().setModel(new sap.ui.model.odata.v2.ODataModel(<ODATA_URL>));

}

<!-- bind to the deviceready event -->

document.addEventListener("deviceready", appReady, false);

</script>

跨域限制:

如果使用AJAX從外部服務器或服務加載數據,則必須在混合web容器中配置外部域,以使AJAX請求通過跨域限制。將演示應用程序集成到PhoneGap中的結果如下:

  ?Android

  如果AJAX代碼在Android的webview中運行,則不存在跨域限制。這意味著您可以從任何地方使用AJAX加載數據。但是,PhoneGap文檔仍然表示需要在一個XML文件中配置域。

  ?iOS

  iOS中的webview中的限制仍然存在,您需要將使用AJAX訪問的域添加到白名單文件中,以繞過該限制。有關白名單文件的詳細信息,請參閱PhoneGap網站上的PhoneGap文檔。

UI5-文檔-2.5-開發混合Web容器