使用控件的内容密度

学习目标

使用内容密度使应用程序适应不同的设备类型

内容密度

使用 SAPUI5 开发的应用程序所运行的设备运行着不同的操作系统，并且屏幕尺寸差异很大。

SAPUI5 为某些控件提供了不同的内容密度，使应用程序能够适应设备：为支持触摸的设备显示较大的控件，为使用鼠标操作的设备显示更小、更紧凑的设计。

在 SAPUI5 中，可用的内容密度包括（但不限于）以下几种：

Cozy
Compact

观看视频，进一步了解 Cozy 和 Compact 密度。

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

设置密度

属于 sap.m 库的所有控件的默认设计是 Cozy 密度（尺寸和间距较大）。如果您的应用程序只使用 sap.m 库，并且 Cozy 密度正是您所需，则可以跳过显式设置内容密度。但是，属于其他库的控件也可能支持 Cozy 设计（例如 sap.ui.table.Table），只是其默认值可能不同（例如 Compact 密度）。因此，如果您的应用程序使用属于不同库的控件，强烈建议显式设置所需的内容密度。

内容密度 Cozy 和 Compact 分别由 CSS 类 sapUiSizeCozy 和 sapUiSizeCompact 触发。

您要在希望切换到相应内容密度的容器上设置适当的 CSS 类，而不是在控件本身上设置。建议在较高的层级上设置，因为在大多数情况下您会希望为整个应用程序设置它。一旦在某一层级设置了该 CSS 类，它就会向下级联，这意味着您无法在代码的较低层级中覆盖它。

例如，要以 Compact 内容密度显示一个视图及其包含的所有 UI 元素，您可以如下实现：

<mvc:View class="sapUiSizeCompact" ... >
...
</mvc:View>

也可以只在特定情况下应用相关的内容密度，例如对于不支持触摸交互的设备。在这种情况下，请将 CSS 类动态添加到 UI，而不是静态添加。

要根据应用程序所运行设备的某些属性来指定内容密度，可以使用 Device API（sap.ui.Device）。

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

在组件控制器上实现辅助方法

getContentDensityClass 代码的截图，如下文所述。

图 Helper Method on the Component Controller 展示了如何借助 Device API 确定内容密度所需的 CSS 类。为此，在组件控制器上创建一个名为 getContentDensityClass 的辅助方法，它通过 Device API 的 sap.ui.Device.support.touch 字段检查应用程序所运行的设备是否支持触摸。Device API 通过组件控制器的依赖数组加载。如果设备支持触摸，该方法返回 CSS 类 sapUiSizeCozy，否则返回 CSS 类 sapUiSizeCompact。

为视图设置 CSS 类

onInit 代码的截图，如下文所述。

可以在例如组件根视图的控制器中调用 getContentDensityClass 辅助方法，为整个应用程序设置适当的 CSS 类。所需的代码如图 Setting the CSS Class for a View 所示。

在视图控制器的 onInit 初始化方法中，使用控制器的 getOwnerComponent 方法访问组件控制器。在该组件控制器上调用上文讨论的 getContentDensityClass 辅助方法，它根据设备的触摸支持情况返回 CSS 类。然后通过 addStyleClass 方法将获得的 CSS 类添加到视图。

指定支持的密度

应用程序描述符 manifest.json 的 sap.ui5 命名空间具有必需属性 contentDensities。该属性包含一个对象，用于维护应用程序支持的内容密度模式（示例参见图 Supported Content Densities）。

manifest.json 代码的截图，如正文所述。

当应用程序通过 SAP Fiori 启动板（FLP）调用时，FLP 会从应用程序描述符中读取支持的内容密度，并为 <body> 标签设置相应的内容密度类。在同时支持鼠标和触摸的设备上，FLP 还允许用户配置所需的内容密度。

如果您如上所述动态确定并设置应用程序内容密度的 CSS 类，则应避免在应用程序也于 FLP 中启动时，应用程序和 FLP 设置不同的内容密度类。在上面的示例中，您可以通过如下扩展辅助方法 getContentDensityClass 来实现这一点：如果 FLP 已经设置了内容密度 CSS 类，该辅助方法应返回空字符串。此类扩展所需的 JavaScript 代码可在文档中找到。

其他平台适配

除了用于指定内容密度的 CSS 类之外，SAPUI5 还提供其他基于 CSS 的选项，用于使应用程序适应其运行的设备。

要以依赖设备的方式确定控件的可见性，您可以使用以下 CSS 类：

sapUiVisibleOnlyOnDesktop
sapUiHideOnDesktop
sapUiVisibleOnlyOnTablet
sapUiHideOnTablet
sapUiVisibleOnlyOnPhone
sapUiHideOnPhone

这些 CSS 类的名称不言自明；对于每种设备类型，都有一个对应的类，可用于显式隐藏或显示某个控件。

因此，图 CSS Based Device Adaptation 中的面板仅在平板电脑和台式机上显示，而在手机上不显示。

代码的截图，高亮显示 Panel class 行。

SAPUI5 允许您通过添加边距在控件之间添加空间。边距会在相应控件的边框之外清理出其周围的一块区域。

如果您的应用程序要在手机、平板电脑和台式机上运行，那么根据可用屏幕宽度选择边距可能会很有用。SAPUI5 提供了正好能实现这一点的 CSS 类 sapUiResponsiveMargin。它使用媒体查询来确定可用的屏幕宽度，并使边距随之调整。

在图 CSS Based Device Adaptation 中，通过添加 CSS 类 sapUiResponsiveMargin，面板的边距变为取决于可用的屏幕宽度。

有关其他边距类和填充类的详细信息，请参见文档。

调整内容密度

业务场景

在本练习中，您将应用程序调整为适应用户的设备。您根据所用浏览器是否支持触摸事件来设置内容密度。此外，您使用标准 SAPUI5 CSS 类来实现特定于设备的布局。*Template:*Git 仓库：https://github.com/SAP-samples/sapui5-development-learning-journey.git，分支：*sol/8_SimpleFormModel solution:*Git 仓库：https://github.com/SAP-samples/sapui5-development-learning-journey.git，分支：sol/9_content_density

任务 1：在组件控制器上实现方法，以确定所需的内容密度 CSS 类

步骤

在编辑器中打开 *webapp* 文件夹中的 *Component.js* 文件。
将 sap/ui/Device 模块添加到组件控制器的依赖数组，并向工厂函数添加一个名为 Device 的相应参数。

注意

在下一步中，组件控制器需要 Device API 模块来查询用户设备的触摸支持情况。

结果

组件控制器现在应如下所示：生成的 Component.js，高亮显示 sap/ui/Device 代码。 3. 现在向组件控制器添加以下辅助方法，它查询 Device API 以了解用户设备的触摸支持情况，如果支持触摸交互则返回 CSS 类 sapUiSizeCozy，在所有其他情况下返回 sapUiSizeCompact：

getContentDensityClass: function () {
if (!this._sContentDensityClass) {
if (Device.support.touch) {
this._sContentDensityClass = "sapUiSizeCozy";
} else {
this._sContentDensityClass = "sapUiSizeCompact";
}
}
return this._sContentDensityClass;
}

结果

组件控制器现在应如下所示：生成的组件控制器代码，高亮显示 getContentDensityClass 函数。

任务 2：将确定的内容密度 CSS 类添加到 App 视图

步骤

在编辑器中打开 App 视图的控制器（*webapp/controller/App.controller.js* 文件）。
向视图控制器添加以下初始化方法，以便为组件的根视图设置由上面实现的辅助方法返回的内容密度 CSS 类：

onInit: function () {
this.getView().addStyleClass(this.getOwnerComponent().getContentDensityClass());
}

结果

App 视图的控制器现在应如下所示：

App.controller.js 文件，高亮显示 onInit 函数。

任务 3：在应用程序描述符中维护支持的内容密度

步骤

在编辑器中打开 *webapp* 文件夹中的应用程序描述符 *manifest.json*。
将 sap.ui5/contentDensities/compact 属性的值从 false 改为 true，以表明组件支持内容密度模式 compact。

注意

sap.ui5/contentDensities/cozy 属性的值已经为 true。

按如下方式修改 *manifest.json* 文件第 62 行的内容：

"compact": ,

结果

应用程序描述符中的 sap.ui5/contentDensities 属性现在应如下所示：

manifest.json 文件。compact 属性设置为 true。

任务 4：使 Overview 视图上 `sap.m.Panel` 的可见性及边距特定于设备

步骤

在编辑器中打开 *webapp/view* 文件夹中的 *Overview.view.xml* 文件。
向 <Panel> 标签添加以下属性：

class="sapUiResponsiveMargin sapUiHideOnPhone" width="auto"

注意

CSS 类 sapUiResponsiveMargin 使边距取决于可用的屏幕宽度。宽度设置为 auto，否则边距会被加到默认宽度 100% 上，从而超出页面尺寸。CSS 类 sapUiHideOnPhone 指定该面板不应显示在小屏幕（手机）上。

结果

Overview 视图上的标签现在应如下所示： Overview.view.xml 文件，高亮显示 class 属性。 3. 从 SAP Business Application Studio 启动应用程序对其进行测试运行。检查以下几点：

确保表单的布局适应可用的屏幕尺寸。
确保面板的边距具有响应性，并会随设备的屏幕尺寸调整。
确保该面板不显示在小屏幕（手机）上。
确保该组件支持内容密度 compact 和 cozy 。

注意

您可以更改浏览器窗口的大小，以模拟组件在大型（台式机）、中型（平板电脑）和小型（手机）屏幕上的呈现效果。

但是，更改窗口大小无法让您测试不同的内容密度，因为无法通过这种方式模拟触摸支持。

要测试不同的内容密度，您可以使用 Google Chrome、Firefox 或 Microsoft Edge 浏览器开发者工具中的设备工具栏：启动应用程序，然后在开发者工具（F12）中使用组合键 Ctrl + Shift + M 调出设备工具栏。您可以使用设备工具栏选择要模拟的设备。选择设备后，必须刷新浏览器（F5），以确保调用 App 视图控制器的 onInit() 方法，因为内容密度是在该方法中针对设备类型专门设置的。注意请不要在意开发者工具中控制台显示的错误。这是由于一些为后续练习准备的代码此时尚未完成。

右键单击 sapui5-development-learning-journey 项目中的任意子文件夹，并在出现的上下文菜单中选择 Preview Application。
在出现的对话框中选择名为 start-noflp 的 npm 脚本。
在打开的应用程序中，检查组件是否按预期显示。