UI5-文档-2.5-开发混合Web容器

Posted 2021-01-25 学无止境

开发混合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文档。