在本演練教程的這一步中，我們將根據使用者的裝置調整內容密度。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