SAPUI5에는 다양한 content density가 포함되어있어 touch 지원 장치에 대해서는 더 큰 컨트롤을 표시하고
mouse지원 장치에 대해서는 더 작은 디자인을 표시 한다.
사용자의 장치를 감지하고 그에 따라 밀도를 조정해보자

Preview

데스크탑

37_preview.png

아이패드

37_preview2.png

아이폰x

37_preview3.png

Coding

Walkthrough - Step 37.

webapp/Component.js

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

content density 기능을 사용하기 위해 getContentDensityClass helper method도 추가한다.
SAPUI5 control는 여러 디바이스에 최적화 된 compact size 및 touch상호작용에 최적화된 cozy mode와 같이 여러 크기로 표시 할 수 있다.

control들은 크기를 조정하기 위해 응용 프로그램의 HTML 구조에서 특정 CSS 클래스를 찾는다.
helper method는 sap.ui.Device API에서 touch지원장비 인지 알 수 있다.
tocuh지원장비가 아닌경우 sapUiSizeCompact를 반환하고 다른 모든 case의 경우에는 sapUiSizeCozy를 반환한다.
적절한 Content density용 CSS class 설정을 위해 애플리케이션 코딩 전체에서 이 코드를 사용한다.

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();
        }
    });
});

앱 뷰가 인스턴스화 될 때 호출되는 app 컨트롤러에 onInit 메소드를 추가한다.
앱 구성 요소에서 정의한 helper method를 쿼리로 해당 스타일 클래스를 app view에 설정한다.
이제 app view 내의 모든 컨트롤이 자동으로 스타일에 따라 크기가 조정된다.

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 (!oView.byId("helloDialog")) {
                var oFragmentController = {
                    onCloseDialog : function () {
                        oView.byId("helloDialog").close();
                    }
                };
                // load asynchronous XML fragment
                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);
                    oDialog.open();
                });
            } else {
                oView.byId("helloDialog").open();
            }
        }

    });

});

"Hello World"대화 상자는 App View의 일부가 아니고 "static area"이라는 DOM의 특수 부분에서 열린다.
App view에 정의 된 content density Class는 Dialog에 알려지지 않으므로 App의 Style class를 Dialog와 수동으로 동기화한다.

webapp/manifest.json

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

  }

sap.ui5 nameSpace의 contentDensities section에서 응용 프로그램이 지원하는 mode를 지정한다.
SAP Fiori launch pad와 같은 컨테이너를 사용하면 이러한 설정을 기반으로 content density를 전환 할 수 있다.
기기 기능에 따라 App을 두 mode에서 모두 실행하도록 설정 했으므로 애플리케이션 descriptor에서 true를 둘 다 설정할 수 있다.

Content Densities

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

API Reference: sap.ui.Device

API Reference: jQuery.sap.syncStyleClass