IT干货网

UI5-文档-4.37-Content Density

lxf 2022年03月09日 SAP 152 0

在本演练教程的这一步中,我们将根据用户的设备调整内容密度。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


评论关闭
IT干货网

微信公众号号:IT虾米 (左侧二维码扫一扫)欢迎添加!

UI5-文档-4.36-Device Adaptation