UI5-文档-4.37-Content Density

在本演练教程的这一步中，我们将根据用户的设备调整内容密度。SAPUI5包含不同的内容密度，允许您为支持触摸的设备显示更大的控件，为鼠标操作的设备显示更小、更紧凑的设计。在我们的app中，我们将检测设备并相应地调整密度。

Preview

 

The content density is compact on desktop devices and cozy on touch-enabled devices

Coding

You can view and download all files at Walkthrough - Step 37.

 

webapp/Component.js

...
               init: function () {
...            },
...
               getContentDensityClass :function(){
                       if(!this._sContentDensityClass){
                               if(!sap.ui.Device.support.touch){
                                      this._sContentDensityClass ="sapUiSizeCompact";
                               }else{
                                      this._sContentDensityClass ="sapUiSizeCozy";
                               }
                       }
                       returnthis._sContentDensityClass;
               }
 
        });
});

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

这个助手方法查询sap.ui。设备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();
               }
        });
});

webapp/controller/HelloDialog.js我们在app控制器上添加onInit方法，该方法在实例化app视图时调用。在这里，我们查询在app组件上定义的helper函数，以在app视图上设置相应的样式类，app视图中的所有控件现在将自动调整到样式定义的紧凑或舒适的大小。

sap.ui.define([
   "sap/ui/base/ManagedObject"
], function (ManagedObject) {
   "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;
         var oDialog = oView.byId("helloDialog");
 
         // create dialog lazily
         if (!oDialog) {
            var oFragmentController = {
               onCloseDialog : function () {
                  oDialog.close();
               }
            };
            // create dialog via fragment factory
            oDialog = sap.ui.xmlfragment(oView.getId(), "sap.ui.demo.walkthrough.view.HelloDialog", oFragmentController);
            // connect dialog to the root view of this component (models, lifecycle)
            oView.addDependent(oDialog);
            // forward compact/cozy style into dialog
            jQuery.sap.syncStyleClass(oView.getController().getOwnerComponent().getContentDensityClass(), oView, oDialog);
         }
         oDialog.open();
      }
   });
 
});

“Hello World”对话框不是app view的一部分，而是在DOM中一个叫做“static area”的特殊部分打开的。对话框不知道在app视图中定义的content density类，所以我们手动将app的style类与对话框同步。 

webapp/manifest.json

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

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

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

这是最后一步，您已经成功地完成了演练!

Summary

您现在应该熟悉SAPUI5的主要开发范式和概念，并创建了一个非常简单的第一个应用程序。

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

Parent topic: Walkthrough

Previous: Step 36: Device Adaptation

Next: Step 38: Accessibility

Related Information

Content Densities

API Reference: sap.ui.Device.media.RANGESETS

API Reference: sap.ui.Device

API Reference: jQuery.sap.syncStyleClass