關于 SAP UI5 控件的 Densities 話題讨論

所有屬于 ​

​sap.m​

​庫的控件的預設設計是Cozy密度，這意味着更大的尺寸和間距。

如果我們的應用程式隻使用 ​

​sap.m​

​​庫，并且 Cozy的密度正是項目所需要的，這種情況下可以跳過設定CSS類。然而，屬于其他庫的控件也可能支援 ​

​Cozy​

​​的設計(如sap.ui.table.Table)，但預設值可能不同(如Compact密度)。是以，如果 SAP UI5 應用程式使用屬于不同庫的控件，則建議設定CSS類 ​

​sapUiSizeCozy​

​.

如何根據裝置尺寸的不同，智能的設定對應的 Densities CSS 類？一個解決方案如下圖所示：

(1) 使用 ​

​sap.ui.define​

​​ 導入 SAP UI5 标準的 Device API，并作為輸入參數 Device，參看圖例 (2) .

(3) Device.system.desktop 為 true，則說明是在桌面環境下。

sap.ui.define([
  'sap/ui/core/mvc/Controller',
  'sap/ui/model/odata/v2/ODataModel',
  'sap/rules/ui/services/ExpressionLanguage',
  'sap/ui/core/util/MockServer',
  'sap/m/MessageToast',
  'sap/ui/Device'
], function (Controller, ODataModel, ExpressionLanguage, MockServer, MessageToast,) {
  "use strict";

  return Controller.extend("sap.ui5.walkthrough.Page", {

    onInit: function () {

      this.getView().addStyleClass(Device.system.desktop ? "sapUiSizeCompact" : "sapUiSizeCozy");      

SAP UI5 控件的 Densities 檢測是由相關的CSS類觸發的，例如，​

​sapUiSizeCompact​

​​ 用于Compact密度，設定在你想要使用控件的 UI 區域的​

​父元素​

​上。這意味着 UI 的某些部分或 sap.m. shell 中的不同應用程式可以使用 sap.m 控件的标準密度，而其他部分可以同時使用不同的密度。