likes
comments
collection
share

什么是 SAP UI5 的 Hybrid Web Containers

作者站长头像
站长
· 阅读数 40

我们可以将移动应用程序开发为包含原生应用程序包装器（例如 PhoneGap），和用于在用户界面上显示内容的 HTML 查看器的混合应用程序(Hybrid Web Container)。

混合应用的优势在于可以在应用商店中发布它们。此外，通过将应用程序代码和 SAP UI5 库文件嵌入到混合容器中，用户只需安装一次文件，无需每次启动应用程序时下载。

但是库的大小变得很重要，因为每个用户都必须安装文件，而在 Web 应用程序中，库部署在服务器上，用户只需要在运行时下载库的所需部分。

要在混合应用程序中包含需要的资源，可以使用静态移动运行时包 openui5-runtime-mobile*.zip。该包不包含在 SAP UI5 中，而是包含在开源版本 OpenUI5中。

这些包的库大小相当小，因为最有可能不需要的内容已被删除，例如测试页面。一个 package 包含所有 JavaScript 文件的调试版本以及优化和最小化的版本。因此，可以将包用于生产用途以及调试目的。要在应用程序包装器（例如 PhoneGap）中使用此包，请将包解压缩到应用程序开发项目的相应资源位置。然后，应用程序包装器构建包含文件并使其在运行时可用。

为了控制文件构建出的包文件尺寸，它只包含最有可能使用的控件库，而不是所有控件库。根据混合应用程序的不同，可能需要通过从运行时的相应文件夹复制库来添加库，或者删除库以减小包大小，从而减少用户的安装大小。

该文件包含以下控制库：

  • sap.f
  • sap.m
  • sap.tnt
  • sap.ui.core
  • sap.ui.layout
  • sap.ui.suite
  • sap.ui.unified
  • sap.uxap

包含或不包含哪些库的决定可能不存在绝对客观的标准。它仅基于经验法则，并且无论如何都需要对许多应用程序进行调整。

此外，移动/混合包不包括通常不需要的某些类型的文件。每个客户实际的应用场合都可能会有所不同，因此需要根据特定应用的要求添加相应的文件。本来 SAP UI5 应用里设计出的 library-preload.js，包含了该 library 里的所有控件。采用这种文件来加载库，可以减少 HTTP 请求数量。

但是 SAP UI5 的 Hybrid Web Containers 不再需要 library-preload.js 文件，因为在混合应用程序的执行环境里是从本地加载库文件，没有任何的 HTTP 延迟。SAPUI5 默认会尝试访问它们，因此您可能会在日志文件或开发人员工具中看到加载这些文件的尝试失败。但是，这些错误消息并没有什么影响，您可以通过声明不存在此类文件并在 SAPUI5 引导脚本标记中设置以下配置来消除它们：

data-sap-ui-preload=""

package 尺寸的优化

尽管静态包足够小，可以包含在混合应用程序中，但仍然可以通过删除其他文件来进一步减小大小并优化特定应用程序的内容。以下列表提供了一些示例：

  • 如果不需要相应的控制库，您可以删除所有库文件夹。例如，在 OpenUI5 版本中可以删除 suite 和 unified 文件夹。
  • 在每个/resources/sap/ ... /themes文件夹中，可以删除所有主题文件夹，但正在使用的主题文件夹除外。

device ready event

混合 Web 容器需要一些时间进行初始化。在此期间，AJAX 请求的发送被阻止，这意味着一旦发送 AJAX 请求，JavaScript 代码就会停止，代码执行也会停止。这会导致 UI 处于 freeze 状态。

SAPUI5 中的 OData 模型在内部使用 AJAX 请求，因此必须在混合容器准备好后再进行 OData 模型初始化，以避免用户界面冻结。初始化后，混合 Web 容器会触发一个 device ready 事件。为了避免 UI freeze，请将创建 OData 模型并进行模型绑定的相关代码，移至 device ready 事件侦听器中。

例子：


<!-- 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>

跨域限制(Cross Domain Restrictions)

如果使用 AJAX 从外部服务器或服务加载数据，则必须在混合 Web 容器内配置外部域，以使 AJAX 请求通过跨域限制。

转载自:https://segmentfault.com/a/1190000041432714
评论
请登录