在全屏应用程序中强制实现响应性

学习目标

• 在全屏应用程序中强制实现响应性。

响应式 UI 控件

SAPUI5 的主要优势之一是它提供的 UI 控件已经为响应性而设计。

sap.m 库中提供的控件确实是专为移动性而设计的。

例如，sap.m.Table 控件为响应式表设计提供了一组精巧且易于使用的功能。在 Table 控件中作为聚合使用的 sap.m.Column 允许定义可管理响应性的列特定属性。以下是其中一些属性：

• minScreenWidth 定义显示或隐藏此列的最小屏幕宽度。默认情况下，列始终显示。sap.m.Table 的响应行为由此属性决定。例如，将 minScreenWidth 属性设置为 "40em"（或 "640px" 或 "Tablet"）会在平板电脑（和桌面）上显示此列，但在移动设备上隐藏。

• demandPopin 根据你的 minScreenWidth 设置，该列可在不同的屏幕尺寸下被隐藏。将此属性设置为 true 会将该列显示为弹出（pop-in），而不是隐藏它。这意味着要隐藏的列将显示在实际表行下方，一个接一个排列。

另一种替代方案是将表的 autoPopinMode 设置为 true，并管理每一列的 importance 属性。

结合对齐属性和用于固定列特定尺寸的 width 属性（无论屏幕尺寸如何），可确保无论使用何种设备，数据都能正确显示。

为全屏应用程序添加响应性

在以下练习中，你将使用 SAPUI5 检查并强制实现全屏应用程序的响应性。

注意

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

前提条件

你应当已完成上一个练习，以在全屏应用程序中实现导航。

如果没有，你可以在解决方案文件中找到全屏应用程序的中间状态。它名为 *fullscreen_stage1*。

任务 1：测试应用程序的响应性

步骤

1. 运行应用程序 fullscreen。

2. 按照上一个练习中所示执行此步骤。

3. 借助 Chrome DevTools，选择 1142 x 764 的大屏幕尺寸，以预览应用程序在桌面浏览器中的可能外观。从承运商列表中选择一个承运商，并注意航班表为每个字段都留有充足空间。

4. 按 F12（在键盘上）以访问 Chrome DevTools。

5. 选择 Toggle device toolbar。

6. 将屏幕尺寸设置为 1142 x 764 并按 Enter（在键盘上）。

7. 从承运商列表中选择一个承运商。注意航班表为每个字段都留有充足空间。

8. 借助 Chrome DevTools，选择 324 x 480 的较小屏幕尺寸，以预览应用程序在移动浏览器中的可能外观。注意航班表对新尺寸的适配效果很差。

9. 将屏幕尺寸设置为 324 x 480 并按 Enter（在键盘上）。

10. 注意航班表对新尺寸的适配效果很差。文本字段发生换行，难以阅读。

任务 2：为移动设备调整承运商视图

步骤

1. 打开 *Carrier.view.xml* 文件，并为每个 Column 元素添加以下属性。然后保存你的更改。

Column 元素的属性-值对

属性	值
minScreenWidth	Tablet
demandPopin	true

1. 打开 *Carrier.view.xml* 文件。

2. 将以下代码添加到每个 Column 定义中：

minScreenWidth="Tablet" demandPopin="true"

3. 有关 demandPopin 的更多信息，请访问以下 URL：https://sapui5.netweaver.ondemand.com/sdk/#/api/sap.m.Column%23controlProperties

4. 保存你的更改。你现在应具有以下代码：

任务 3：为移动设备调整航班视图

步骤

1. 打开 *Flights.view.xml* 文件。

2. 按照上一个练习中所示执行此步骤。

3. 将以下属性添加到第一个类型为 Column 的元素：

第一个 Column 元素的属性-值对

属性	值
width	12em

1. 将以下代码添加到第一个 Column 定义中：

width="12em"

3. 将以下属性添加到最后一个类型为 Column 的元素：

最后一个 Column 元素的属性-值对

属性	值
hAlign	Right

1. 将以下代码添加到最后一个 Column 定义中：

hAlign="Right"

4. 将以下属性添加到其他类型为 Column 的元素。然后保存你的更改。

第二个、第三个和第四个 Column 元素的属性-值对

属性	值
minScreenWidth	Tablet
demandPopin	true

1. 将以下代码添加到其他两个 Column 定义中：

minScreenWidth="Tablet" demandPopin="true"

2. 保存你的更改。你现在应具有以下代码：

任务 4：再次测试应用程序

步骤

1. 启动应用程序进行测试。

2. 按照上一个练习中所示执行此步骤。

3. 借助 Chrome DevTools，选择 1142 x 764 的大屏幕尺寸，以预览应用程序在桌面浏览器中的外观。然后从承运商列表中选择一个承运商。注意航班表为每个字段都留有充足空间。

4. 按 F12（在键盘上）以访问 Chrome DevTools。

5. 将屏幕尺寸设置为 1142 x 764。

6. 从承运商列表中选择一个承运商。

7. 注意航班表为每个字段都留有充足空间。

8. 借助 Chrome DevTools，选择 324 x 700 的较小屏幕尺寸，以预览应用程序在移动浏览器中的外观。注意航班表对新尺寸的适配效果良好。

9. 将屏幕尺寸设置为 324 x 700。

10. 注意航班表对新尺寸的适配效果良好。

11. 关闭并停止应用程序。

12. 由于我们将在后续练习中进一步开发你的 fullscreen 项目，你可以通过下载来保存项目的当前状态。选择 fullscreen 项目，然后从上下文菜单中选择 Download。