设计全屏应用程序

学习目标

  • 使用 sap.m.App 设计全屏应用程序。

理解全屏应用程序的基本应用程序设计

SAPUI5 中使用模型-视图-控制器（MVC）概念将信息表示与用户交互分离。这种分离便于开发和独立更改各个部分。通常，当你实现应用程序的信息架构时，它由多个页面组成。应用由若干页面构成。基于用户交互，用户将从一个视图导航到多个相关视图。以下是一个示例：用户将从一个概览视图导航到一个或多个显示其他相关类型信息的视图。

sap.m.App

SAPUI5 通过提供控件 sap.m.App 来支持此模式。导航时的默认过渡类型是“slide”。其他预定义选项有“fade”、“flip”和“show”。

sap.m.App 控件的 pages 聚合示意图

该图展示了 sap.m.App 控件的技术设计。sap.m.App 从 sap.m.NavContainer 控件继承导航能力。尽管 sap.m.App 控件提供了导航功能，但不建议你在生产应用程序中使用此方式（请参见路由）。

典型 MVC 方式

关注点分离也是一个非常重要的概念，即使在实现 SAPUI5 视图时也是如此。

观看此视频以进一步了解典型的 MVC 方式。

视频：本节含 SAP 官方视频（视频 ID 1_tafqli5k），需在 learning.sap.com 在线观看。

推荐的应用程序设计是：用一个 XML 仅包含作为根控件的 sap.m.App 控件的实现。其余视图（也是 XML 视图）用于各个页面。

sap.m.App 控件提供一个名为 pages 的聚合。由 sap.m.App 的 pages 聚合所聚合的控件会接收诸如 beforeShow 之类的导航事件。这些导航事件记录在伪接口 sap.m.NavContainerChild 中。

index.html 文件

每个 SAPUI5 应用程序的起点都是 index.html 文件。

一个 index.html 文件示例

index.html 文件包含 SAPUI5 引导实现。页面中的 SAPUI5 引导脚本在脚本被浏览器加载并执行后，会自动初始化 SAPUI5 运行时。html-body 包含使用命名空间加载 SAPUI5 组件所需的全部实现细节。

App.view.xml 文件

每个应用程序都包含一个视图实现，其中以 sap.m.App 作为中心控件。该视图在应用程序加载到客户端后立即显示。如下图中所示，App.view.xml 文件包含一个 sap.ui.core.mvc.View 控件。该控件本身仅包含带有指定 id 的 sap.m.App 控件。

一个示例 App.view.xml 文件

说明如下：

  • App 视图仅包含空的 App 标签（1）。

  • App 视图在 Application Descriptor（ manifest.json ）中被指定为将要打开的根视图。

  • 路由器会根据当前 URL 自动将这些页面添加到 App 控件中。

  • 路由器借助 id 来标识 App 控件。

  • displayBlock="true" 可防止在视图设置为 100% 高度时出现垂直滚动条（2）。

Carrier.view.xml 的示例页面

如前所述，良好的做法是将应用程序的不同方面分离到不同的视图实现中。下图向你展示了一个与显示由 OData 服务提供的承运商列表相关的视图实现。

一个示例 Carrier.view.xml 文件

sap.m.Page 为应用程序屏幕提供基本容器。

sap.m.Page 提供一个名为 content 的聚合。该聚合可接受 0..n 个控件。在上述实现中，sap.m.Table 控件被添加到 content 聚合，用于显示来自实体集 CarrierCollection 的实体列表。

探索全屏应用程序的设计

业务示例

在以下练习中，你将使用 SAPUI5 探索全屏应用程序的设计。

前提条件

  1. 在开始本练习之前，你应当已经从 Github 下载了准备好的文件： https://github.com/SAP-samples/sapui5-development-advanced-learning-journey

  2. 在以下练习中，将使用 SAP Business Application Studio 作为开发环境。假定你已经有权访问此开发工具。 如果情况并非如此，你可以使用 SAP Business Technology Platform (SAP BTP) 的免费层模型免费获得 SAP Business Application Studio 的访问权限。为此，请阅读本教程 Get an Account on SAP BTP to Try Out Free Tier Service Plans，了解如何在 SAP BTP 上创建免费账户。在此基础上，视频 SAP Business Application Studio Free Tier Model Onboarding 向你展示了为 SAP Business Application Studio 设置免费层计划的必要步骤。

  3. 如果可能，你可能还希望将浏览器设置为允许所有弹出窗口。如果不允许更改这些设置，则每次在 Business Application Studio 中预览应用程序时你都会收到通知，并且必须在显示的对话框中选择 Open 。

注意

SAP Business Technology Platform 及其工具是云服务。由于云软件的特性，步骤流程以及字段和按钮的命名可能与练习解决方案有所不同。

步骤

  1. 将 *fullscreen.tar* 项目导入到你的 Business Application Studio。

  2. 在你的培训文件中找到 *fullscreen.tar* 文件。

  3. 如先前培训中所示，登录培训用的 SAP Business Application Studio。

  4. 选择菜单 File→Open Folder...。

  5. 选择或输入 /home/user/projects/ 文件夹并选择 OK。

  6. 选择菜单 File→Import Project..。

  7. 选择 *fullscreen.tar* 文件并选择 OK。

  8. 查看视图和控制器。 主应用程序控件的名称是什么？ 什么是 App 视图所显示的？ 什么是 Carrier 视图所显示的？ 什么是 Flights 视图所显示的？ 什么是 NotFound 视图所显示的？

  9. 展开 *view* 子文件夹。 主应用程序控件名为 App 。

  10. 打开 App 视图。 App 视图仅包含 sap.m.App 控件。

  11. 打开 Carrier 视图。 Carrier 视图显示一个表，其中列出 UX_C_Carrier_TP 实体中的承运商。

  12. 打开 Flights 视图。 Flights 视图显示一个表，其中列出某个承运商 id 的 to_flights 关联中的航班。

  13. 打开 NotFound 视图。 NotFound 视图显示一条消息，其中包含一个 Go Back 按钮，用于导航回上一个屏幕。。

  14. 展开 *controller* 子文件夹并打开这些文件。 目前，除 NotFound 视图外，这些视图没有提供脚本；NotFound 视图包含用于管理返回上一屏幕导航的脚本。