본문 바로가기

SAP 사용자들의 오픈 커뮤니티

튜토리얼
SAP Business Technology Platform(BTP)

SAP UI 5 Week 3 - Unit 4. 사용자 기기에 맞춤 UI 제공하기

페이지 정보

profile_image
작성자 no_profile SAPBTP헬퍼 쪽지보내기 아이디로 검색 전체게시물
댓글 3건 조회 316회 작성일 21-09-24 10:25

본문

Week 3 - Unit 4. 사용자 기기에 맞춤 UI 제공하기

 

 

 

목차

  1. 객체 뷰에 내용 추가
  2. 모바일 버전에서 지도 숨기기
  3. 디바이스 모델을 사용하여 모바일 상에서 패널을 확장/축소 가능하게 하기

 

 

 

1.객체 뷰에 내용 추가

 

 

 

응용 프로그램의 제품 페이지가 여전히 비어 있기 때문에 먼저 작업할 콘텐츠가 필요합니다. 강조 표시된 코드를 오브젝트 뷰에 추가하십시오.

 

webapp/view/Object.view.xml

 

<mvc:View
	controllerName="opensap.manageproducts.controller.Object"
	xmlns="sap.m"
	xmlns:mvc="sap.ui.core.mvc"
	xmlns:semantic="sap.m.semantic"
	xmlns:form="sap.ui.layout.form">

	<semantic:FullscreenPage
		id="page"
		navButtonPress="onNavBack"
		showNavButton="true"
		title="{i18n>objectTitle}"
		busy="{objectView>/busy}"
		busyIndicatorDelay="{objectView>/delay}">

		<semantic:content>
			<ObjectHeader
				id="objectHeader"
				title="{ProductID}"
				responsive="true"
				number="{
					path: 'Price',
					formatter: '.formatter.numberUnit'
				}"
				numberUnit="{CurrencyCode}">
				<attributes>
					<ObjectAttribute text="{Name}"/>
				</attributes>
			</ObjectHeader>

			<Panel
				class="sapUiResponsiveMargin"
				width="auto"
				headerText="{i18n>productTitle}"
				expandable="{device>/system/phone}"
				expanded="true">
				<content>
					<form:SimpleForm id="objectForm">
						<form:content>
							<Label text="{i18n>productCategoryLabel}"/>
							<Text text="{Category}"/>
							<Label text="{i18n>productNameLabel}"/>
							<Text text="{Name}"/>
							<Label text="{i18n>productWeightLabel}"/>
							<Text text="{= ${WeightMeasure} + ' ' + ${WeightUnit}}"/>
						</form:content>
					</form:SimpleForm>
				</content>
			</Panel>
			
			<Panel
				class="sapUiResponsiveMargin"
				width="auto"
				headerText="{i18n>supplierTitle}"
				expandable="{device>/system/phone}"
				expanded="false">
				<content>
					<List id="supplierList">
						<items>
							<StandardListItem icon="sap-icon://building" title="{ToSupplier/CompanyName}"/>
							<StandardListItem icon="sap-icon://email" title="{ToSupplier/EmailAddress}"/>
							<StandardListItem icon="sap-icon://world" title="{ToSupplier/WebAddress}"/>
							<StandardListItem icon="sap-icon://phone" title="{ToSupplier/PhoneNumber}"/>
							<StandardListItem icon="sap-icon://map" title="{ToSupplier/Address/City}"/>
						</items>
					</List>
				</content>
			</Panel>
			
			<Panel
				class="sapUiResponsiveMargin"
				width="auto"
				headerText="{i18n>mapTitle}">
				<Image src="{
					parts: [
						'ToSupplier/Address/Street',
						'ToSupplier/Address/PostalCode',
						'ToSupplier/Address/City',
						'ToSupplier/Address/Country'
					],
					formatter: '.formatter.formatMapUrl'
				}" />
			</Panel>
			
 		</semantic:content>

		<semantic:sendEmailAction>
			<semantic:SendEmailAction id="shareEmail" press="onShareEmailPress"/>
		</semantic:sendEmailAction>

	</semantic:FullscreenPage>

</mvc:View>

 

 

새 코드에는 세 개의 패널이 추가됩니다. 첫 번째 패널에는 제품 정보가 포함된 양식, 두 번째 패널에는 공급업체 정보가 포함된 목록, 세 번째 패널에는 지도 이미지가 추가됩니다.

 

추가하는 양식에는 sap.ui.layout이라는 고유한 패키지 이름이 있습니다.

위의 코드에 설명된 대로 뷰 XML 문서의 루트 태그에 XML 네임스페이스 sap.ui.layout을 정의하십시오.

 

 

 

webapp/controller/Object.controller.js

….
		_bindView : function (sObjectPath) {
				var oViewModel = this.getModel("objectView"),
					oDataModel = this.getModel();

				this.getView().bindElement({
					path: sObjectPath,
					parameters: {
						expand: "ToSupplier"
					},
					events: {
	…

 

또한 공급업체 정보가 있는 리스트에는 "ToSupplier" 연결의 데이터가 데이터에 표시됩니다. 

제품 페이지를 직접 시작할 때도 OData 서비스에 이 관련 정보가 포함되도록 하려면 개체 보기를 바인딩할 때 이 연결 이름을 "expand parameter"로 지정해야 합니다. 

 

 

Object 뷰에 속한 컨트롤러에서 이 작업을 수행하십시오.

세 번째 패널에 있는 지도는 sap.m을 사용합니다. 이미지 컨트롤. 이미지 원본(이미지가 로드된 URL)은 MapUrl 포맷터에 바인딩되어 있으며, 이 포맷에 거리, 도시 및 국가와 같은 공급업체 정보가 제공됩니다.

 

 

지도를 만들려면 포맷터를 구현해야 하므로 다음 코드를 formater.js에 추가하십시오.

 

 

webapp/model/formatter.js

…
			numberUnit : function (sValue) {
				if (!sValue) {
					return "";
				}
				return parseFloat(sValue).toFixed(2);
			},

			/**
			 * Formats an address to a static google maps image
			 * @public
			 * @param {string} sStreet the street
			 * @param {string} sZIP the postal code
			 * @param {string} sCity the city
			 * @param {string} sCountry the country
			 * @returns {string} sValue a google maps URL that can be bound to an image
			 */
			formatMapUrl: function(sStreet, sZIP, sCity, sCountry) {
				return "https://maps.googleapis.com/maps/api/staticmap?zoom=13&size=640x640&markers="
					+ jQuery.sap.encodeURL(sStreet + ", " + sZIP +  " " + sCity + ", " + sCountry);
			}

		};

	}
);

 

이 코드는 공급업체 위치 정보를 Google 지도 API URL에 추가하고 URL을 반환합니다. 이미지 컨트롤이 이 URL에서 이미지를 요청하고 Google 지도에서 요청된 위치를 표시하는 정적 비트맵 이미지를 반환합니다.

 

 

참고: 무료 Google 지도 API는 교육용으로만 사용됩니다. 생산적인 응용 프로그램에 지도를 표시하려는 경우 항상 지도 제공자의 서비스 약관을 확인하십시오.

크게 확장된 제품 페이지가 작동하려면 새로운 UI 레이블에 대한 번역 텍스트가 한 가지 더 필요합니다. 이 요소들을i18n.properties 파일에 추가하십시오.

 

 

webapp/i18n/i18n.properties

…
#~~~ Object View ~~~~~~~~~~~~~~~~~~~~~~~~~~

#XTIT: Object view title
objectTitle=Product

#XGRP: Product panel title
productTitle=Product

#XFLD: Product category
productCategoryLabel=Category

#XFLD: Product name
productNameLabel=Name

#XFLD: Product weight
productWeightLabel=Weight

#XGRP: Supplier panel title
supplierTitle=Supplier

#XGRP: Map panel title
mapTitle=Map

#~~~ Footer Options ~~~~~~~~~~~~~~~~~~~~~~~
…

 

이제 응용 프로그램을 실행하고 첫 번째 스크린샷에 표시되는 내용을 볼 수 있습니다.

 

브라우저 창의 폭을 변경할 때 패널의 왼쪽과 오른쪽에 있는 여백이 변경됩니다. 창이 매우 좁으면 이러한 여백이 완전히 사라집니다. 이는 추가한 코드의 세 패널 모두에 대해 설정된 "sapUiResponseMargin" CSS 클래스 때문입니다.

 

 

 

2.모바일 버전에서 지도 숨기기

 

 

이제 우리는 콘텐츠의 대응적 숨김을 위해 클래스 중 하나를 사용합니다. 스마트폰 크기의 작은 화면에서 지도를 숨기려면 "sapUiHideOnPhone" 클래스를 세 번째 패널에 추가합니다.

 

 

webapp/view/Object.view.xml

<Panel
				class="sapUiResponsiveMargin sapUiHideOnPhone"
				width="auto"
				headerText="{i18n>mapTitle}">
				<Image src="{
					parts: [
						'ToSupplier/Address/Street',
						'ToSupplier/Address/PostalCode',
						'ToSupplier/Address/City',
						'ToSupplier/Address/Country'
					],
					formatter: '.formatter.formatMapUrl'
				}" />
			</Panel>

 

창을 좁히면 지도 패널이 숨겨집니다.

 

이러한 숨김은 CSS 수준에서 수행되므로 패널의 HTML은 계속 작성됩니다. 복잡한 경우 성능상의 이유로 HTML을 생성하지 않으려면 SAP UI5 수준에서 컨트롤의 "visible" 속성을 대신 "false"으로 설정하는 것이 좋습니다.

 

 

 

3.디바이스 모델을 사용하여 모바일 상에서 패널을 확장/축소 가능하게 하기

 

 

 

이 응용 프로그램을 만드는 데 사용된 응용 프로그램 템플릿에는 sap.ui를 포함하는 JSON 모델인 "Device Model"이라는 코드가 이미 포함되어 있습니다. webapp/models/model.js 파일의 createDeviceModel 함수는 이 JSONModel을 인스턴스화합니다.

 

 

이 기능은 webapp/Component.js의 init 함수에서 호출되며, "device"라는 이름을 사용하여 모델을 구성 요소 자체에 할당합니다. 따라서 응용 프로그램 전체에서 사용할 수 있습니다.

 

이제 이 모델을 사용하여 제어 속성을 장치의 특성에 선언적으로 바인딩합니다. 스마트폰에서 앱이 실행될 때 패널을 확장할 수 있도록 합니다.

 

 

이렇게 하려면 패널의 "expandable" 속성을 장치 모델의 데이터 속성 "system/phone"에 바인딩하는 다음 코드를 추가하십시오. 또한 첫 번째 패널은 기본적으로 확장되고 두 번째 패널은 기본적으로 축소됩니다. 세 번째 패널은 휴대폰 장치에서 나타나지 않게 만들어 두었기 때문에 생각하지 않아도 괜찮습니다.

 

 

webapp/view/Object.view.xml

…
			<Panel
				class="sapUiResponsiveMargin"
				width="auto"
				headerText="{i18n>productTitle}"
				expandable="{device>/system/phone}"
				expanded="true">
				<content>
					<form:SimpleForm id="objectForm">
						<form:content>
							<Label text="{i18n>productCategoryLabel}"/>
							<Text text="{Category}"/>
							<Label text="{i18n>productNameLabel}"/>
							<Text text="{Name}"/>
							<Label text="{i18n>productWeightLabel}"/>
							<Text text="{= ${WeightMeasure} + ' ' + ${WeightUnit}}"/>
						</form:content>
					</form:SimpleForm>
				</content>
			</Panel>
			
			<Panel
				class="sapUiResponsiveMargin"
				width="auto"
				headerText="{i18n>supplierTitle}"
				expandable="{device>/system/phone}"
				expanded="false">
				<content>
…

 

 

sap.ui.Device.system.phone 속성은 화면 크기뿐만 아니라 터치 지원과 같은 다른 특징에도 의존하기 때문에 크롬 브라우저의 장치 에뮬레이션 모드 또는 실제 스마트폰에서 테스트해야 합니다.

 


 


 

댓글목록

profile_image

KSUG님의 댓글

no_profile KSUG 쪽지보내기 아이디로 검색 전체게시물 작성일 0

감사합니다.

profile_image

최정아님의 댓글

no_profile 최정아 쪽지보내기 아이디로 검색 전체게시물 작성일 0

감사합니다

profile_image

최정아님의 댓글

no_profile 최정아 쪽지보내기 아이디로 검색 전체게시물 작성일 0

감사합니다

이용약관
개인정보처리방침