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

• 목록

Week 3 - Unit 6. 대화상자 구현하기

목차

1. 준비: 메타데이터 및 컨트롤 
2. 대화 상자 만들기 
3. 대화 상자 호출 
4. 속성 파일에 필요한 텍스트 추가 
5. fragment 만들기 
6. 검사 목록 보기 및 컨트롤러 조정 
7. 객체 뷰 및 컨트롤러 조정

1.준비: 메타데이터 및 컨트롤

이 과정에서는 대화 상자에 몇 가지 추가 제품 데이터를 표시하려고 합니다. 서비스 메타데이터의 각 제품에서 찾을 수 있는 크기를 사용합니다.

2.대화 상자 만들기

단일 뷰 내에서 생성된 대화 상자부터 시작하겠습니다.

대화 상자를 다른 컨트롤과 유사하게 뷰에 추가할 수 있습니다. 그러나 뷰 자체 제어 트리의 일부를 얻지 못하므로 종속성이라는 특정 집계에 추가해야 합니다. 이 경우 semantic 페이지 컨트롤의 종속 항목에 대화상자를 추가합니다. 

또한, sap.ui.layout을 사용하여 팝업 내의 그리드, 뷰 맨 위에 에 대한 네임스페이스 또한 추가해야 합니다.

webapp/view/Worklist.view.xml

<mvc:View
	controllerName="opensap.manageproducts.controller.WorklistWithDependent"
	xmlns="sap.m"
	xmlns:core="sap.ui.core"
	xmlns:mvc="sap.ui.core.mvc"
	xmlns:semantic="sap.m.semantic"
	xmlns:l="sap.ui.layout">
	<semantic:FullscreenPage
		id="page"
		navButtonPress="onNavBack"
		showNavButton="true"
		title="{i18n>worklistViewTitle}">
…
</semantic:content>
<semantic:dependents>
			<ResponsivePopover title="{i18n>dimensionsTitle}"
				class="sapUiPopupWithPadding"
				id="dimensionsPopover">
				<content>
					<l:Grid>
						<l:content>
							<Text text="{i18n>productWidth}: {
									path: 'Width', 
									formatter: '.formatter.numberUnit'
								} {DimUnit}" />
							<Text text="{i18n>productDepth}: {
									path: 'Depth',
									formatter: '. formatter.numberUnit'
								} {DimUnit}" />
							<Text text="{i18n>productHeight}: {
									path: 'Height',
									formatter: '. formatter.numberUnit'
								} {DimUnit}" />
							<Text text="{i18n>productWeight}: {
									path: 'WeightMeasure',
									formatter: '. formatter.numberUnit'
								} {WeightUnit}" />
						</l:content>
					</l:Grid>
				</content>
			</ResponsivePopover>
</semantic:dependents>
	</semantic:FullscreenPage>
</mvc:View>

이 대화 상자에서는 리소스 모델의 새 텍스트를 사용합니다. 실제 텍스트는 나중에 리소스 모델에 추가할 것입니다. 실제 값과 숫자 단위는 모델에서 가져온 것이며 sap.m 단위로 표시됩니다.각각 텍스트 제어. 포맷터 기능 번호도 재사용합니다.이전 유닛 중 하나의 유닛입니다.

컨트롤러에서 포맷터 개체의 포맷터를 사용할 수 있습니다. 치수를 표시하는 텍스트 컨트롤의 바인딩 경로는 상대적이므로 나중에 현재 선택한 제품과 비교하여 해결됩니다.

3.대화 상자 호출

Popover를 열기 위해 뷰의 List를 조정해야 합니다. 이를 위해 ObjectIdentifier 제목을 클릭할 수 있도록 활성 상태로 설정하고 Popover를 여는 이벤트 핸들러를 지정합니다.

webapp/view/Worklist.view.xml

<items>
	<ColumnListItem
		type="Navigation"
		press="onPress">
		<cells>
			<ObjectIdentifier
				title="{ProductID}"
				text="{Name}"
				titleActive="true" 
				titlePress="onShowDetailPopover"/>
			<Text text="{SupplierName}"/>
			<Link
				text="{ToSupplier/WebAddress}"
				href="{ToSupplier/WebAddress}"
				target="_blank"/>
			<ObjectNumber
				number="{
					path: 'Price',
					formatter: '.formatter.numberUnit'
				}"
				unit="{CurrencyCode}"/>
		</cells>
	</ColumnListItem>
</items>

이제 이 이벤트 핸들러를 구현해야 합니다. 검사 목록 컨트롤러로 이동하여 시작되는 섹션 바로 위에 해당 기능을 추가하겠습니다.

webapp/controller/Worklist.controller.js

…
onRefresh : function () {
	this._oTable.getBinding("items").refresh();
},

/**
 * Event handler for press event on object identifier. 
 * opens detail popover to show product dimensions.
 * @public
 */
onShowDetailPopover : function (oEvent) {
	var oPopover = this.byId("dimensionsPopover");
	var oSource = oEvent.getSource();
	oPopover.bindElement(oSource.getBindingContext().getPath());
	// open dialog
	oPopover.openBy(oEvent.getParameter("domRef"));
},

/* =========================================================== */
/* internal methods                                            */
/* =========================================================== */
…

이제 뷰에서 팝오버를 ID로 회수합니다. 다음으로 이벤트 처리기에 자동으로 전달되는 이벤트 개체 oEvent에 이벤트 소스를 요청합니다. 소스는 클릭할 때 이벤트를 트리거한 특정 컨트롤입니다.

ObjectIdentifier 인스턴스를 다시 가져오고 바인딩 컨텍스트를 요청하여 선택된 제품에 대한 정보를 가져올 수 있습니다. 이후 이 바인딩 컨텍스트에서 경로를 요청하고 Popover를 모델의 올바른 엔티티에 바인딩하는 데 사용할 수 있습니다. 여기서는 Popover에서 요소 바인딩을 사용하므로 Popover의 바인딩 경로는 올바른 제품을 기준으로 해결됩니다.

Popover를 열기 위해서는 openBy 메서드를 호출하고 이벤트 매개 변수 domRef를 전달하여 Popover가 클릭된 실제 링크의 오른쪽 경계에 가깝게 위치하도록 합니다.

4.속성 파일에 필요한 텍스트 추가

이제 응용 프로그램의 속성 파일에 새 텍스트를 만듭니다. 아래 텍스트를 추가하십시오.

webapp/i18n/i18n.properties

#~~~ Worklist Popover Fragment ~~~~~~~~~~~~
#XTIT: The title of the popover for product dimensions
dimensionsTitle=Product Dimensions

#XTIT: The label for the product width dimension
productWidth=Width

#XTIT: The label for the product height dimension
productHeight=Height

#XTIT: The label for the product depth dimension
productDepth=Depth

#XTIT: The label for the product weight
productWeight=Weight

이제 앱을 실행할 때 worklist 뷰에서 개체 ID를 클릭하면 해당 dimension의 응답 팝오버가 나타납니다.

5.fragment 만들기

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

<core:FragmentDefinition
		xmlns="sap.m"
		xmlns:l="sap.ui.layout"
		xmlns:core="sap.ui.core">
	<ResponsivePopover title="{i18n>dimensionsTitle}"
		class="sapUiPopupWithPadding">
		<content>
			<l:Grid>
				<l:content>
					<Text text="{i18n>productWidth}: {
							path: 'Width', 
							formatter: '.formatter.numberUnit'
						} {DimUnit}" />
					<Text text="{i18n>productDepth}: {
							path: 'Depth',
							formatter: '.formatter.numberUnit'
						} {DimUnit}" />
					<Text text="{i18n>productHeight}: {
							path: 'Height',
							formatter: '.formatter.numberUnit'
						} {DimUnit}" />
					<Text text="{i18n>productWeight}: {
							path: 'WeightMeasure',
							formatter: '.formatter.numberUnit'
						} {WeightUnit}" />
				</l:content>
			</l:Grid>
		</content>
	</ResponsivePopover>
</core:FragmentDefinition>

이제 Response Popover를 보다 효율적으로 재사용할 수 있도록 지원합니다. 이를 위해 우리는 팝오버의 코드가 포함된 fragment를 만들 것입니다.

검사 목록 보기에서 응답형 팝오버 코드를 잘라내어 새 fragment에 붙여넣기만 하면 됩니다. 

검사 목록 보기에서 코드를 제거하는 것을 잊지 말고 fragment 정의로 묶으십시오.

webapp/view/Worklist.view.xml

…
			</IconTabBar>
		</semantic:content>


		<semantic:sendEmailAction>
			<semantic:SendEmailAction id="shareEmail" press="onShareEmailPress"/>
		</semantic:sendEmailAction>
	
<semantic:dependents>
<ResponsivePopover title="{i18n>dimensionsTitle}"
		class="sapUiPopupWithPadding"
		id="dimensionsPopover">
		<content>
			<l:Grid>
				<l:content>
					<Text text="{i18n>productWidth}: {
							path: 'Width', 
							formatter: '.formatter.numberUnit'
						} {DimUnit}" />
					<Text text="{i18n>productDepth}: {
							path: 'Depth',
							formatter: '.formatter.numberUnit'
						} {DimUnit}" />
					<Text text="{i18n>productHeight}: {
							path: 'Height',
							formatter: '.formatter.numberUnit'
						} {DimUnit}" />
					<Text text="{i18n>productWeight}: {
							path: 'WeightMeasure',
							formatter: '.formatter.numberUnit'
						} {WeightUnit}" />
				</l:content>
			</l:Grid>
		</content>
	</ResponsivePopover>
</semantic:dependents>
</semantic:FullscreenPage>

6.검사 목록 보기 및 컨트롤러 조정

이제 worklist view에서 Response Popover에 속하는 코드가 남아 있지 않아야 합니다. sap.ui.layout 라이브러리는 더 이상 필요하지 않으므로 사용되지 않는 네임스페이스 선언 또한 제거해야 합니다.

webapp/controller/Worklist.controller.js

/**
 * Event handler for press event on object identifier. 
 * opens detail popup from component to show product dimensions.
 * @public
 */
onShowDetailPopover : function (oEvent) {
	var oPopover = this._getPopover();
	var oSource = oEvent.getSource();
	oPopover.bindElement(oSource.getBindingContext().getPath());

	// open dialog
	oPopover.openBy(oEvent.getParameter("domRef"));
},

/* =========================================================== */
/* internal methods                                            */
/* =========================================================== */

_getPopover : function () {
// create dialog lazily
	if (!this._oPopover) {
		// create popover via fragment factory
		this._oPopover = sap.ui.xmlfragment(
		"opensap.manageproducts.view.ResponsivePopover", this);
		this.getView().addDependent(this._oPopover);
	}
	return this._oPopover;
},

이제 worklist 뷰의 컨트롤러에서 팝오버를 여는 기능을 조정해야 합니다.

뷰는 구문을 분석할 때 자동으로 인스턴스화되지 않으므로 바인딩해야하며 열기 전에 ResponsePopover 인스턴스를 만들어야 합니다.

필요할 때만 팝오버를 인스턴스화하고 여러 번 인스턴스화하지 않기 위해 새로운 개인 함수 _getPopover를 만듭니다. 이 함수는 fragment에서 팝오버 인스턴스를 만들어 컨트롤러의 개인 속성에 할당합니다(이 인스턴스가 아직 없는 경우에만 해당).

이벤트 핸들러에서는 이제 popover를 id로 검색하는 행을 _getPopover 메서드에 대한 호출로 바꿉니다.

이제 AddDependent를 사용하여 Response Popover 인스턴스를 보기에 추가하는 것이 한 가지 더 필요합니다. 이렇게 하면 팝오버가 뷰가 구성요소로부터 상속받은 모델에 액세스할 수 있으며 뷰의 라이프사이클에도 참여할 수 있습니다.

7.객체 뷰 및 컨트롤러 조정

이제 Object 뷰에서 Response Popover를 쉽게 재사용할 수 있습니다. 여기서 개체 ID도 클릭 가능하도록 만들겠습니다. 이 뷰에서는 ObjectHeader를 조정합니다.

webapp/view/Object.view.xml

<semantic:content>
	<ObjectHeader
		id="objectHeader"
		title="{ProductID}"
		titleActive="true"
		titlePress="onShowDetailPopover"
		responsive="true"
		number="{
					path: 'Price',
					formatter: '.formatter.numberUnit'
		}"
		numberUnit="{CurrencyCode}">
	</ObjectHeader>
</semantic:content>

	</semantic:FullscreenPage>

webapp/controller/Object.controller.js

…
onNavBack : function() {
	var sPreviousHash = History.getInstance().getPreviousHash();

	if (sPreviousHash !== undefined) {
		history.go(-1);
	} else {
		this.getRouter().navTo("worklist", {}, true);
	}
},

/**
 * Event handler for press event on object identifier. 
 * opens detail popup from component to show product dimensions.
 * @public
 */
	onShowDetailPopover : function (oEvent) {

	var oPopover = this._getPopover();
	var oSource = oEvent.getSource();
	oPopover.bindElement(oSource.getBindingContext().getPath());

	// open dialog
	oPopover.openBy(oEvent.getParameter("domRef"));
},


/* =========================================================== */
/* internal methods                                            */
/* =========================================================== */

_getPopover : function () {
// create dialog lazily
	if (!this._oPopover) {
		// create popover via fragment factory
		this._oPopover = sap.ui.xmlfragment(
		"opensap.manageproducts.view.ResponsivePopover", this);
		this.getView().addDependent(this._oPopover);
	}
	return this._oPopover;
},

마지막으로, 두 가지 방법인 getPopover 및 ShowDetailPopover를 Worklist.controller.js에서 Object.controller.js로 복사하면 됩니다. 

이제 앱을 다시 실행하고 한 제품에 대한 뷰로 전환하면 제품 ID를 클릭하여 팝오버가 이 보기에도 나타나도록 할 수 있습니다.