SAPUI5에는 다양한 content density가 포함되어있어 touch 지원 장치에 대해서는 더 큰 컨트롤을 표시하고
mouse지원 장치에 대해서는 더 작은 디자인을 표시 한다.
사용자의 장치를 감지하고 그에 따라 밀도를 조정해보자
Preview
데스크탑
아이패드
아이폰x
Coding
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를 둘 다 설정할 수 있다.
Related Information
