开发混合 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 文档.
来源: http://www.bubuko.com/infodetail-2879292.html