Step 37: Content Density

opensapkr·2019년 7월 5일
0

ui5-Walkthrough

목록 보기
38/39

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

Preview

데스크탑

아이패드

아이폰x

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

profile
UI5/Fiori/SCP 도큐먼트 번역 및 관련 정보 공유합니다.

0개의 댓글