SAPUI5应用的内容密度适配与响应式设计-CSDN博客

预览

在这里插入图片描述

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

代码

您可以在演练-步骤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的主要开发范例和概念，并已经创建了一个非常简单的第一个应用程序。现在，您已经准备好在您所学的基础上构建一个合适的应用程序。

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

章节

第37步:内容密度

预览

代码

总结