使应用程序适配不同设备类型

学习目标

  • 使用设备模型使应用程序适配不同设备类型

内置设备适配的控件

SAPUI5 自带若干控件，它们本身就能够对可用的屏幕空间和分辨率做出反应。其中一些需要设置特定属性，而另一些则开箱即用。

此类内置设备适配的控件例如包括 sap.m.SplitApp、sap.m.ResponsivePopover、sap.m.OverflowToolbar 和 sap.m.PullToRefresh。

窗体 sap.ui.layout.form.SimpleForm 和 sap.ui.layout.form.Form 也可以适配可用的屏幕尺寸。建议为它们设置 sap.ui.layout.form.ColumnLayout，因为它的响应式特性可以让可用空间得到尽可能最佳的利用。

带有列响应式属性的 XML 表格定义。桌面和平板显示以表格形式展示 Customer Name、City 和 Email。手机显示以堆叠列表展示 Customer Name 和 Email。

在各种不同类型的应用程序中广泛使用的一个控件是 sap.m.Table（也称为 "Responsive Table"），它提供了多项可用于设备适配的功能。例如，在较小的设备上，你可以设置某些属性，使特定列弹出显示（pop in）而不是作为普通列显示，或者完全显示和隐藏列。

例如，你可以为各列设置 minScreenWidth。这会使各列仅在满足特定屏幕宽度时才显示。你可以用 px 或 rem 定义该 minScreenWidth，但这里也可以使用来自 Device API 的标准类别（Phone、Tablet 或 Desktop）。为某一列将附加属性 demandPopin 设置为 true 也会对指定的 minScreenWidth 做出反应。在这种情况下，该列将在较小屏幕上显示为弹出列，而不是被完全隐藏。

在图中 Responsive Table 的示例中，在 XML 视图中为 sap.m.Table 定义了三个列：Customer Name、City 和 Email。

Customer Name 列未设置 minScreenWidth 属性。因此它在所有设备类型（即台式机、平板和手机）上都会显示。

对于 City 列，指定了 minScreenWidth="Tablet" 属性。因此该列仅在平板和台式机上显示，在手机上不显示。

在 Email 列中，除属性 minScreenWidth="Tablet" 之外还添加了属性 demandPopin="true"。因此，该列在手机上不会完全消失，而是在那里显示为弹出列（参见该图）。在平板和台式机上，Email 列的显示方式与 City 列相同。

设备模型

实例化设备模型

根据运行应用程序的设备的能力，应用程序的功能和设计可能会有所不同。

例如，在台式机设备上，无需在列表-明细场景的明细视图中显示返回按钮，因为列表视图和明细视图是同时显示的。而在手机上，由于列表视图与明细视图之间存在导航，因此需要这样的返回按钮。要控制返回按钮的可见性，可以使用设备模型。

设备模型基于 Device API（sap.ui.Device）。该 API 提供有关设备特定信息的数据，例如操作系统及其版本、浏览器和浏览器版本、屏幕尺寸、当前方向，以及对特定功能的支持情况，例如触摸事件支持、方向更改等。有关更多信息，请参见 sap.ui.Device 命名空间的 API 参考。

使用设备模型，你可以将 Device API 的大多数属性作为 JSON 模型提供。

component.js 文件中的示例设备模型代码，如以下文本所述。

通常，设备模型在组件控制器 Component.js 的初始化方法中创建，如图 Creating a Device Model in the Component Controller 所示。

要创建设备模型，需将模块 sap/ui/Device 和 sap/ui/model/json/JSONModel 的依赖项添加到组件控制器。然后，在控制器的初始化方法中，只需将加载的 Device 模块传递给 JSON 模型的构造函数，即可实例化设备模型。由于设备模型是只读的，因此绑定模式设置为 OneWay。设备模型作为命名模型（名称：device）为组件设置。

使用设备模型

示例绑定控件属性，如以下文本所述。

创建设备模型后，来自 Device API 的属性（例如 /system/desktop）就可以用在数据绑定中，以使控件适应当前平台。图中 Binding Control Properties to Device Capabilities 展示了实现这一目标的一些示例。

注意

不要忘记在绑定路径前加上设备模型的名称（"device"）以及一个 ">" 字符。

如果要取反 Device API 中的属性值，可以使用图中所示的表达式绑定语法。

使应用程序适配不同设备

业务场景

在本练习中，你将使 Overview 视图上面板的显示适配不同设备：在台式机上，面板应处于展开状态，并且不应能够将其折叠。而在所有其他设备上，面板应初始为折叠状态，并提供展开选项。为实现此行为，你将创建一个设备模型。

你还将按设备调整两个表格中各列的显示：你将指定哪些列应在哪些设备上显示，以及列是应显示为弹出列（pop-in）而不是被隐藏。*模板：*Git Repository: https://github.com/SAP-samples/sapui5-development-learning-journey.git, Branch: **sol/17_expression_binding***参考答案：*Git Repository: https://github.com/SAP-samples/sapui5-development-learning-journey.git, Branch: sol/18_device_adaptation

任务 1：在组件控制器中创建设备模型

步骤

  1. 在编辑器中打开 *webapp* 文件夹中的 *Component.js* 组件控制器。

  2. 将 sap/ui/model/json/JSONModel 模块添加到组件控制器的依赖项数组，并向工厂函数添加一个名为 JSONModel 的相应参数。

结果

组件控制器现在应如下所示： XML 代码，突出显示了 sap/ui/model/json/JSONModel 行。 3. 现在，在 init() 初始化方法的末尾添加以下代码，以实例化设备模型并将其以 device 名称设置为组件的模型：

// set device model
var oDeviceModel = new JSONModel(Device);
oDeviceModel.setDefaultBindingMode("OneWay");
this.setModel(oDeviceModel, "device");

注意

请务必在调用基础组件的 init() 方法之后添加该编码。

为创建设备模型，将已声明的 Device 模块传递给 JSONModel 的构造函数。这会使 SAPUI5 Device API 的大多数属性可作为 JSON 模型使用。

由于设备模型是只读的，因此绑定模式设置为 OneWay。

该模型被设置为组件的命名模型，以便可以在数据绑定中通过名称 device 引用它，正如你将在下一步中所做的那样。

结果

组件控制器的 init() 方法现在应如下所示：

XML 文件，突出显示了设备模型代码。

任务 2：根据设备设置面板的 expandable 和 expanded 属性

步骤

  1. 在编辑器中打开 *webapp/view* 文件夹中的 *Overview.view.xml* 文件。

  2. 使视图中 New Customer 面板的显示适配不同设备：在台式机上，面板应处于展开状态，并且不应能够将其折叠。而在所有其他设备上，面板应初始为折叠状态，并提供展开选项。 为此，按如下方式将面板的 expanded 属性绑定到设备模型：

expanded="{device>/system/desktop}"

相应地，使用表达式绑定语法按如下方式将面板的 expandable 属性绑定到设备模型：

expandable="{= !${device>/system/desktop} }"

结果

New Customer 面板现在应如下所示：

生成后的 New Customer 面板，突出显示了 expandable 和 expanded 代码。

任务 3：使表格列的显示与设备相关

步骤

  1. 确保 *Overview.view.xml* 文件已在编辑器中打开。

  2. 在客户表格中，将以下属性添加到 Street 和 Post Code 的 <Column> 标签，以使这些列在台式机上显示，但在平板和手机上隐藏：

minScreenWidth="Desktop"

此外，在客户表格中，将以下属性添加到 标签（用于 Country ），以使该列在平板和台式机上显示，但在手机上隐藏：

minScreenWidth="Tablet"

最后，将以下属性添加到 标签（用于 Email ），以使该列在平板和台式机上显示。在手机上，该列将显示为弹出列而不是被隐藏：

minScreenWidth="Tablet" demandPopin="true"

结果

客户表格各列的定义现在应如下所示： XML 代码，突出显示了 minScreenWidth 属性。 3. 在预订表格中，将以下属性添加到 Class 的 <Column> 标签，以使该列在台式机上显示。在平板和手机上，该列将显示为弹出列而不是被隐藏：

minScreenWidth="Desktop" demandPopin="true"

最后，在预订表格中，将以下属性添加到 标签（用于 Foreign Currency Payment 和 Cancellation Status ），以使这些列在平板和台式机上显示。在手机上，这些列将显示为弹出列而不是被隐藏：

minScreenWidth="Tablet" demandPopin="true"

结果

预订表格各列的定义现在应如下所示： XML 代码，突出显示了 minScreenWidth 属性。 4. 通过从 SAP Business Application Studio 启动应用程序来进行测试运行。 确保 New Customer 面板在台式机上处于展开状态，并且无法将其折叠。在所有其他设备上，面板应初始为折叠状态，并提供展开选项。

注意

请注意，由于分配了 sapUiHideOnPhone CSS 类，面板在手机上会被隐藏。因此，你应使用平板与台式机进行比较。

要测试台式机与平板之间的差异，你可以使用 Google Chrome、Firefox 或 Microsoft Edge 浏览器开发者工具中的设备工具栏：启动你的应用程序，然后在开发者工具（F12）中使用组合键 Ctrl + Shift + M 调出设备工具栏。你可以使用设备工具栏选择想要模拟的设备。选择设备后，必须刷新浏览器（F5），以确保调用组件控制器的 init() 方法，设备模型就是在该方法中初始化的。注意 请不要在意开发者工具中控制台显示的错误。这是由于为后续练习准备的一些代码尚未完成所致。 还要确保两个表格的各列以设备特定的方式显示。 注意

与面板的显示不同，要测试表格的响应式行为，只需更改浏览器窗口的大小即可。这允许你模拟表格在台式机、平板和手机上的显示效果。

  1. 右键单击你的 sapui5-development-learning-journey 项目中的任意子文件夹，然后在出现的上下文菜单中选择 Preview Application。

  2. 在出现的对话框中选择名为 start-noflp 的 npm 脚本。

  3. 在打开的应用程序中，检查组件是否按预期工作。