Step 36: Device Adaptation

opensapkr·2019년 7월 5일

ui5-Walkthrough

목록 보기

37/39

이제 응용 프로그램을 실행하는 디바이스를 기반으로 하는 Control의 visibility과 property을 구성한다.
sap.ui.Device API를 사용하고 장치 모델을 정의하면 많은 디바이스에서 앱 ui가 최적화 된다.

Preview

Coding

Walkthrough - Step 36.

webapp/view/HelloPanel.view.xml

<mvc:View
	controllerName="sap.ui.demo.walkthrough.controller.HelloPanel"
	xmlns="sap.m"
	xmlns:mvc="sap.ui.core.mvc">
	<Panel
		headerText="{i18n>helloPanelTitle}"
		class="sapUiResponsiveMargin"
		width="auto"
		expandable="{device>/system/phone}"
		expanded="{= !${device>/system/phone} }">
		<content>
			<Button
				id="helloDialogButton"
				icon="sap-icon://world"
				text="{i18n>openDialogButtonText}"
				press=".onOpenDialog"
				class="sapUiSmallMarginEnd sapUiVisibleOnlyOnDesktop"/>
			<Button
				text="{i18n>showHelloButtonText}"
				press=".onShowHello"
				class="myCustomButton"/>
			<Input
				value="{/recipient/name}"
				valueLiveUpdate="true"
				width="60%"/>
			<FormattedText
				htmlText="Hello {/recipient/name}"
				class="sapUiSmallMargin sapThemeHighlight-asColor myCustomText"/>
		</content>
	</Panel>
</mvc:View>

HelloPanel에 expandable 및 expanded 두 개의 새 property을 추가한다.
이러면 작은 화면의 디바이스에서 table에 더 많은 공간을 확보 할 수 있다.
expandable 속성은 device model의 /system/phone path에 바인딩된다.
따라서 Panel은 모바일에서만 확장 할 수 있다.

device 모델은 SAPUI5의 sap.ui.Device API로 채워져 있다.
expanded 속성은 panel의 status를 제어하며, expression binding문법을 사용하여 모바일에선 닫고 다른 기기에서 panel을 펼친다.
"{= !${device>/system/phone} }" expandable에 의해 자동으로 디바이스가 설정되면 디바이스값이 들어온다.

note: sap.ui.Device API는 user agent 및 기타 여러 가지 속성을 기반으로 기기 유형(전화, 태블릿, 데스크톱)을 감지한다.
따라서 단순히 화면 크기를 줄이면 장치 유형이 변경되지 않는다. 이 기능을 테스트하려면 브라우저에서 장치 에뮬레이션을 활성화하거나 실제 핸드폰에서 열어야 한다.

sapUiVisibleOnlyOnDesktop 또는 sapUiHideOnDesktop과 같은 CSS Class를 설정하여 device type에 따른 control을 숨길 수 있다.
데스크톱에서만 대화 상자를 열수있는 버튼을 표시히고 다른장치(핸드폰등)에서는 숨긴다.

webapp/view/Detail.view.xml

<mvc:View
	controllerName="sap.ui.demo.walkthrough.controller.Detail"
	xmlns="sap.m"
	xmlns:mvc="sap.ui.core.mvc"
	xmlns:wt="sap.ui.demo.walkthrough.control">
	<Page
		title="{i18n>detailPageTitle}"
		showNavButton="true"
		navButtonPress=".onNavBack">
		<ObjectHeader
			responsive="true"
			fullScreenOptimized="true"
			number="{
				parts: [{path: 'invoice>ExtendedPrice'}, {path: 'view>/currency'}],
				type: 'sap.ui.model.type.Currency',
				formatOptions: {
					showMeasure: false
				}
			}"
			numberUnit="{view>/currency}"
			intro="{invoice>ShipperName}"
			title="{invoice>ProductName}">
			<attributes>
				<ObjectAttribute title="{i18n>quantityTitle}" text="{invoice>Quantity}"></ObjectAttribute>
				<ObjectAttribute title="{i18n>dateTitle}" text="{
					path: 'invoice>ShippedDate',
					type: 'sap.ui.model.type.Date',
					formatOptions: {
					  style: 'long',
					  source: {
						pattern: 'yyyy-MM-ddTHH:mm:ss'
					  }
					}
				  }"/>
			</attributes>
		</ObjectHeader>
		<wt:ProductRating id="rating" class="sapUiSmallMarginBeginEnd" change=".onRatingChange"/>
	</Page>
</mvc:View>

일부 control에는 이미 구성 할 수 있는 반응형 기능이 내장되어 있다.
ObjectHeader 컨트롤은 responsive = true, fullScreenOptimized = true등의 속성을 설정하여
보다 반응형으로 만들 수 있다.

장치 크기에 따라 view는 다른 위치에 추가되어 데이터가 표시된다.
List의 number 및 numberUnit 필드를 ObjectHeader에 추가하고
currency 형식의 formatter를 사용하여 데이터 model의 일부인 배송 날짜, 수량을 설정한다.
Date 형식을 사용하고 format 옵션의 source 섹션에서 날짜 format의 pattern을 제공한다.
작은 화면 장치에도 날짜 텍스트가 표시된다.

webapp/controller/Detail.controller.js

sap.ui.define([
	"sap/ui/core/mvc/Controller",
	"sap/ui/core/routing/History",
	"sap/m/MessageToast",
	"sap/ui/model/json/JSONModel",

	"sap/ui/core/UIComponent"
], function (Controller, History, MessageToast, JSONModel, UIComponent) {
	"use strict";
	return Controller.extend("sap.ui.demo.walkthrough.controller.Detail", {
		onInit : function () {
			var oViewModel = new JSONModel({
				currency: "EUR"
			});
			this.getView().setModel(oViewModel, "view");

			var oRouter = sap.ui.core.UIComponent.getRouterFor(this);
			oRouter.getRoute("detail").attachPatternMatched(this._onObjectMatched, this);
		},
		_onObjectMatched : …
});

Detail controller에서 숫자를 올바르게 표시하기 위해 통화 정의가 있는 view model을 추가하기만 하면된다.
InvoiceList controller 파일과 동일한 코드이다.

webapp/i18n/i18n.properties

# Detail Page
detailPageTitle=Walkthrough - Details
ratingConfirmation=You have rated this product with {0} stars
dateTitle=Order date
quantityTitle=Quantity