第37步:内容密度

预览

桌面设备上的内容密度紧凑，而在触控设备上则舒适

代码

您可以在演练-步骤37查看和下载所有文件。

webapp/Component.js

为了准备内容密度特性，我们还将添加一个助手方法getContentDensityClass。SAPUI5控件可以以多种尺寸显示，例如为桌面和非触摸设备优化的紧凑尺寸，以及为触摸交互优化的舒适模式。控件在应用程序的HTML结构中寻找特定的CSS类来调整它们的大小。

这个助手方法直接查询设备API来获取客户端的触摸支持，如果不支持触摸交互，返回CSS类sapUiSizeCompact，其他情况返回sapUiSizeCozy。我们将在整个应用程序编码中使用它来设置适当的内容密度CSS类。

webapp/controller/App.controller.js

sap.ui.define([
	"sap/ui/core/mvc/Controller"
], function (Controller) {
	"use strict";

	return Controller.extend("sap.ui.demo.walkthrough.controller.App", {

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

我们在应用控制器上添加了一个onInit方法，当应用视图被实例化时调用它。在那里，我们查询我们在app组件上定义的helper函数，以在app视图上设置相应的样式类。app视图中的所有控件现在将自动调整到样式定义的紧凑或舒适的大小。

webapp/controller/HelloDialog.js

sap.ui.define([
	"sap/ui/base/ManagedObject",
	"sap/ui/core/Fragment",
	"sap/ui/core/syncStyleClass"
], function (ManagedObject, Fragment, syncStyleClass) {
	"use strict";

	return ManagedObject.extend("sap.ui.demo.walkthrough.controller.HelloDialog", {

		constructor : function (oView) {
			this._oView = oView;
		},

		exit : function () {
			delete this._oView;
		},

		open : function () {
			var oView = this._oView;

			// create dialog lazily
			if (!this.pDialog) {
				var oFragmentController = {
					onCloseDialog : function () {
						oView.byId("helloDialog").close();
					}
				};
				// load asynchronous XML fragment
				this.pDialog = Fragment.load({
					id: oView.getId(),
					name: "sap.ui.demo.walkthrough.view.HelloDialog",
					controller: oFragmentController
				}).then(function (oDialog){
					// connect dialog to the root view of this component (models, lifecycle)
					oView.addDependent(oDialog);
					// forward compact/cozy style into dialog
					syncStyleClass(oView.getController().getOwnerComponent().getContentDensityClass(), oView, oDialog);
					return oDialog;
				});
			} 
			// open the dialog once the loading promise resolves
			this.pDialog.then(function(oDialog) {
				oDialog.open();
			});
		}

	});

});

“Hello World”对话框不是应用视图的一部分，而是在DOM的一个叫做“static area”的特殊区域中打开的。在应用程序视图上定义的内容密度类对对话框来说是未知的，所以我们手动同步应用程序的样式类与对话框。

webapp/manifest.json

...
  "sap.ui5": {
    ...     
    "dependencies": {
      ...
    },
    "contentDensities": {
      "compact": true,
      "cozy": true
    }

  }

在sap.ui5命名空间的contentDensities部分，我们指定应用程序支持的模式。像SAP Fiori launchpad这样的容器允许根据这些设置切换内容密度。

由于我们刚刚根据设备的功能启用了应用程序在两种模式下运行，所以我们可以在应用程序描述符中将这两种模式都设置为true。

总结

现在，您应该熟悉SAPUI5的主要开发范例和概念，并已经创建了一个非常简单的第一个应用程序。现在，您已经准备好在您所学的基础上构建一个合适的应用程序。

如果您想更深入地研究特定主题，可以使用其他教程，这些教程将更详细地展示本演练和高级主题的一些内容。

章节

1. 第1步:你好世界
2. 第2步:引导
3. 第3步:控件
4. 第4步:XML视图
5. 第5步:控制器
6. 第6步:模块
7. 第7步:JSON模型
8. 第8步:可翻译的文本
9. 第9步:组件配置
10. 第10步:应用程序描述符
11. 第11步:页面和面板
12. 第12步:Shell控件作为容器
13. 第13步:外边距和内边距
14. 第14步:自定义CSS和主题颜色
15. 第15步:嵌套视图
16. 第16步:对话框和片段
17. 第17步:片段回调
18. 第18步:图标
19. 第19步:重用对话框
20. 第20步:聚合绑定
21. 第21步:数据类型
22. 第22步:表达式绑定
23. 第23步:自定义格式器
24. 第24步:过滤
25. 第25步:排序和分组
26. 第26步:远程OData服务
27. 第27步:模拟服务器配置
28. 第28步:使用QUnit进行单元测试
29. 第29步:与OPA的集成测试
30. 第30步:调试工具
31. 第31步:路由和导航
32. 第32步:路由与参数
33. 第33步:路由回溯和历史
34. 第34步:自定义控件
35. 第35步:响应性
36. 第36步:设备适应
37. 第37步:内容密度
38. 第38步:可访问性