본문 바로가기

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

튜토리얼
SAP Business Technology Platform(BTP)

SAP UI5 Week 3 - Unit 5. Fragments와 코드재사용

페이지 정보

profile_image
작성자 no_profile SAPBTP헬퍼 쪽지보내기 아이디로 검색 전체게시물
댓글 2건 조회 1,206회 작성일 21-09-24 13:06

본문

Week 3 - Unit 5. Fragments와 코드재사용

 

 

 

목차

  1. Fragment추가하기
  2. Nested 뷰와 컨트롤러 생성하기

 

 

webapp/view/SupplierInfo.fragment.xml (NEW)

 

<core:FragmentDefinition
	xmlns="sap.m"
	xmlns:core="sap.ui.core"
	xmlns:form="sap.ui.layout.form">
	<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 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>
</core:FragmentDefinition>

 

 

해당 코드는 앱의 뷰 디렉터리에 있는 공급업체 정보로 fragment를 만들고 있으며, 재사용하고자 하는 Object 뷰에서 패널 두 개를 잘라냅니다. 이러한 패널을 fragment 정의에 캡슐화하고 여기에 해당 네임스페이스를 지정해야 합니다. 기존 View 파일에 더 이상 코드의 이 부분이 포함되지 않아야 합니다.

 

 

다음으로 코드를 가져온 객체 뷰에 fragment를 다시 추가할 것입니다. 이렇게 fragment로 바꿔주게 되면, 공급업체 정보는 응용프로그램의 다른 위치/뷰에서 쉽게 재사용될 수 있습니다.

 

 

webapp/view/Object.view.xml

<mvc:View
	controllerName="opensap.manageproducts.controller.Object"
	xmlns="sap.m"
	xmlns:core="sap.ui.core"
	xmlns:mvc="sap.ui.core.mvc"
	xmlns:semantic="sap.m.semantic">
[…]
		<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 class="sapUiVisibleOnlyOnDesktop" 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 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>
			<core:Fragment fragmentName="opensap.manageproducts.view.SupplierInfo" type="XML"/>
 		</semantic:content>

 

지금 응용 프로그램을 다시 실행하면 똑같이 표시됩니다. 공급업체 정보는 객체 뷰의 동일한 위치에 표시되어야 합니다. 이 보기의 DOM도 동일하게 유지되며 개발자 도구에서 확인할 수 있습니다.

 

 

 

2.Nested 뷰와 컨트롤러 생성하기

 

 

 

webapp/view/ProductDetails.view.xml (NEW)

<mvc:View
	controllerName="opensap.manageproducts.controller.ProductDetails"
	xmlns="sap.m"
	xmlns:mvc="sap.ui.core.mvc"
	xmlns:form="sap.ui.layout.form">
	<Panel
		class="sapUiResponsiveMargin"
		width="auto"
		headerText="{i18n>productTitle}"
		expandable="{device>/system/phone}"
		expanded="true">
		<content>
			<form:SimpleForm id="objectForm">
				<form:content>
					<Label id="categoryLabel" text="{i18n>productCategoryLabel}"/>
					<Text id="category" text="{Category}"/>
					<Label text="{i18n>productNameLabel}"/>
					<Text text="{Name}"/>
					<Label text="{i18n>productWeightLabel}"/>
					<Text text="{= ${WeightMeasure} + ' ' + ${WeightUnit}}"/>
				</form:content>
			</form:SimpleForm>
		</content>
	</Panel>
</mvc:View>

 

이제 Object 뷰에서 코드를 추가로 추출하여 새 뷰를 만듭니다. 제품 데이터가 들어 있는 패널에서 전체 코드를 복사하여 보기 폴더의 새 파일에 붙여넣습니다.

이를 ProductDetails.view.xml이라고 합니다.

 

 

위 코드의 ID를 컨트롤러의 일부 코드에 필요한 첫 번째 라벨 및 텍스트에 추가하십시오. 더불어 뷰 정의를 추가하는 것과 뷰에 대해 올바른 컨트롤러 이름도 지정해야 합니다.

이제 객체 뷰에도 새 뷰를 포함시켜야 코드가 다음과 같이 표시됩니다.

 

 

webapp/view/Object.view.xml

<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>
			<mvc:XMLView viewName="opensap.manageproducts.view.ProductDetails"/>
			<core:Fragment fragmentName="opensap.manageproducts.view.SupplierInfo" type="XML"/>
		</semantic:content>
…

컨트롤러 폴더 내에서 새 컨트롤러를 정의합니다. 이를 ProductDetails.controller.js라고 합니다.

 

 

 

webapp/controller/ProductDetails.controller.js (NEW)

sap.ui.define([
	"sap/ui/core/mvc/Controller",
	"opensap/manageproducts/model/formatter"
	], function(Controller, formatter) {
		"use strict";
		
		return Controller.extend("opensap.manageproducts.controller.ProductDetails", {
			
			formatter: formatter,
		
			onInit: function() {
				this.byId("categoryLabel").setVisible(false);
				this.byId("category").setVisible(false);
			}
		});
			
});

 

이 컨트롤러 내에서 우리는 단지 우리의 관점에 의해 실제로 사용되는지 보기 위해 임의로 변경을 한 것입니다. 이제 이 ID가 새 ID를 정의한 nested view에서 두 개의 컨트롤을 검색하여 visible=visible로 설정해야 합니다.

 

 

앱을 다시 실행하면 제품 범주에 대한 레이블과 텍스트 컨트롤이 숨겨지는 것을 볼 수 있습니다. 

 

 

댓글목록

profile_image

KSUG님의 댓글

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

유익한 정보 감사합니다.

profile_image

최정아님의 댓글

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

감사합니다

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