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

• 목록

Week 4 - Unit 5. 커스텀 컨트롤 제작하기

목차

1. 새 사용자 정의 컨트롤 구조 생성하기 
2. 제품 등급 관리 첫 번째 버전 구축 
3. 이벤트 처리 추가 및 제어 완료하기 
4. APP에 컨트롤 추가

1. 새 사용자 정의 컨트롤 구조 생성하기

webapp/control/ProductRate.js (NEW)

sap.ui.define(["sap/ui/core/Control"], function(Control) {

	"use strict";


	return Control.extend("opensap.manageproducts.control.ProductRate", {

		metadata : {
			properties : {},
			aggregations : {},
			events : {}
		},

		init : function() {

		},

		renderer : function(oRm, oControl) {
			oRm.write("<div>Hello World!</div>");
		}

	});
});

이 단계에서는 아래 첨부된 사진과 같은 컨트롤을 만들 예정입니다.

•  
•  
• 우리는 사용자에게 제품을 평가할 수 있는 기회를 제공하고자 합니다. 제품에 대한 평가는 버튼을 클릭하여 제출할 수 있습니다.
• 새로운 컨트롤은 사용자가 제출한 후 현재 투표 값을 노출하는 이벤트를 발생시켜야 합니다.
• 버튼은 사용자가 투표를 변경한 경우에만 활성화되어야 합니다. 처음에는 버튼을 비활성화해야 합니다.
   
• 이미 알려진 sap.ui.define 구문을 사용하고 확장하기 위해sap.ui.core.Control 기본 클래스가 필요합니다. 여기에 메타데이터 섹션을 추가합니다. 이는 컨트롤에서 제공할 속성, 집계 및 이벤트를 나중에 정의할 수 있는 간단한 개체입니다.

메서드로 컨트롤이 초기화될 때 호출되는 init 함수와 컨트롤 DOM을 작성하는 데 사용할 renderer 함수를 추가합니다. 렌더 관리자를 사용하여 HTML을 작성합니다.

2. 제품 등급 관리 첫 번째 버전 구축

webapp/control/ProductRate.js

sap.ui.define([
		'sap/ui/core/Control',
		"sap/m/RatingIndicator",
		"sap/m/Button"
	],
	function(Control, RatingIndicator, Button) {	

	"use strict";

return Control.extend("opensap.manageproducts.control.ProductRate", {

		metadata : {
			properties : {
				value : {type : "float", defaultValue : 0}
			},
			aggregations : {
				_rating : {type : "sap.m.RatingIndicator", multiple : false, 							visibility : "hidden"},
				_button : {type : "sap.m.Button", multiple : false, visibility : 						"hidden"}
			},
			events : {
				valueSubmit : {
					parameters : {
						value : {type : "float"}
					}
				}
			}
		},

		init : function() {
			this.setAggregation("_rating", new RatingIndicator({
				value : this.getValue(),
				maxValue : 5
			}).addStyleClass("sapUiTinyMarginEnd"));

			this.setAggregation("_button", new Button({
				text : "{i18n>productRatingButtonText}",
				enabled : false
			}));
		},

		renderer : function(oRm, oControl) {
			oRm.write("<div");
			oRm.writeControlData(oControl);
			oRm.addClass("sapUiSmallMarginBeginEnd");
			oRm.writeClasses();
			oRm.write(">");

			oRm.renderControl(oControl.getAggregation("_rating"));
			oRm.renderControl(oControl.getAggregation("_button"));

			oRm.write("</div>");
		};
});

이 단계에서는 aggregation, event 및 property에 대한 정의를 컨트롤 메타데이터에 추가하고 init 메서드와 renderer에 대한 구현을 추가합니다.

따라서 컨트롤의 메타데이터 섹션에서 구현 시 사용하는 몇 가지 속성을 정의합니다.

Properties- 이러한 속성에 대한 Getter 및 setter 함수는 자동으로 생성되며 원할 경우 XML 보기의 데이터 모델 필드에 바인딩할 수도 있습니다.

Value-

사용자가 등급을 매긴 값을 유지하는 컨트롤 속성 값을 정의합니다.

Aggregations-

등급 기능을 실현하려면 등급과 버튼이라는 두 가지 내부 컨트롤이 필요합니다. 따라서 가시성 속성을 hidden으로 설정하여 두 개의 숨겨진 aggregation을 만듭니다. 이러한 aggregation은 컨트롤 전용이며 해당 API의 일부가 아님을 나타냅니다. 이렇게 하면 뷰에 설정된 모델을 내부 컨트롤에서도 사용할 수 있으며 SAP UI5는 라이프사이클 관리를 처리하고 더 이상 필요하지 않을 때 컨트롤을 폐기합니다.

_rating-

사용자가 평가한 값을 보유할 제어 속성 값을 정의합니다.

_button-

평가를 제출하기 위한 sap.m.Button

event- 응용 프로그램은 이벤트에 등록하고 이벤트 매개 변수를 사용하여 결과를 처리할 수 있습니다.

o ValueSubmit 평가가 제출될 때 컨트롤이 실행할 값Submit 이벤트를 지정합니다. 여기에는 현재 값이 이벤트 매개 변수로 포함됩니다.

SAP UI5에서 새 컨트롤 인스턴스를 생성할 때마다 자동으로 호출하는 init 함수에서 내부 컨트롤을 설정합니다. NAT은 sap.ui.core에서 상속된 framework method setAggregation을 호출하여 두 컨트롤을 인스턴스화하고 내부 집계에 저장합니다. 위에서 지정한 내부 집계의 이름과 새로운 제어 인스턴스를 전달합니다. 사용자 정의 제어를 더 멋지게 보이도록 몇 가지 제어 속성을 지정합니다. 

SAP UI5 렌더 관리자 및 참조로 전달된 컨트롤 인스턴스의 도움으로 이제 컨트롤의 HTML 구조를 렌더링할 수 있습니다. 루트 태그 <div>의 시작을 렌더링하고 helper 메서드 writeControlData를 호출하여 div 태그 안에 있는 컨트롤의 ID 및 기타 기본 속성을 렌더링합니다.

다음으로 SAPUI5에서 제공하는 표준 마진 클래스를 추가합니다. 이 CSS 클래스 및 보기에 추가된 다른 클래스는 렌더 관리자 인스턴스에서 writeClasses를 호출하여 렌더링됩니다. 다음으로 div 태그를 닫고 내부 집계의 내용을 렌더 관리자의 renderControl 메서드에 전달하여 두 내부 컨트롤을 렌더링합니다. 컨트롤의 renderer를 호출하고 HTML을 페이지에 추가합니다. 마지막으로 주변 [div] 태그를 닫습니다.

webapp/i18n/i18n.properties

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

#XTIT: Object view title
objectTitle=Product

#XTIT: Submit Rating Button text
productRatingButtonText=Submit

…

리소스 번들은 사용자 지정 컨트롤에서 참조하는 문자열로 확장됩니다.

3. 이벤트 처리 추가 및 제어 완료하기

webapp/control/ProductRate.js

sap.ui.define([
		'sap/ui/core/Control',
		"sap/m/RatingIndicator",
		"sap/m/Button"
	],

	function(Control, RatingIndicator, Button) {

	"use strict";

	return Control.extend("opensap.manageproducts.control.ProductRate", {

		…

		init : function() {
			this.setAggregation("_rating", new RatingIndicator({
				value : this.getValue(),
				maxValue : 5,
				liveChange : this._onRate.bind(this)
			}).addStyleClass("sapUiTinyMarginEnd"));

			this.setAggregation("_button", new Button({
				text : "{i18n>productRatingButtonText}",
				press : this._onSubmit.bind(this),
				enabled : false
			}))
		},

		_onSubmit : function() {
			this.fireEvent("valueSubmit", {
				value : this.getValue()
			});
			this.getAggregation("_button").setEnabled(false);
		},

		_onRate : function(oEvent) {
			this.setValue(oEvent.getParameter("value"));
			this.getAggregation("_button").setEnabled(true);
		},

		renderer : function(oRm, oControl) {
			…
		}

	});
});

이 단계에서는 내부 이벤트에 대한 컨트롤을 추가하고 컨트롤 자체에서 제공하는 이벤트를 구현하여 컨트롤을 완성합니다.

먼저 Aggregations의 press 및 liveChange 이벤트에 대한 컨트롤을 추가합니다. 등급이 변경될 때마다 그에 따라 컨트롤의 값 속성이 변경되고 버튼이 활성화됩니다. 사용자가 버튼을 클릭하여 평가를 제출하면 현재 값을 이벤트 매개변수로 사용하여 제어 이벤트를 시작합니다.

4. APP에 컨트롤 추가

webapp/controller/Object.controller.js

sap.ui.define([
		"opensap/manageproducts/controller/BaseController",
		"sap/ui/model/json/JSONModel",
		"sap/ui/core/routing/History",
		"opensap/manageproducts/model/formatter",
		"sap/m/MessageToast"
	], function (
		BaseController,
		JSONModel,
		History,
		formatter,
    MessageToast
	) {
		"use strict";
		return Controller.extend("opensap.manageproducts.controller.Object", {

			formatter: formatter,
			
			onInit: function(){
				…
			},

			/* =========================================================== */
			/* event handlers                                              */
			/* =========================================================== */

			onRatingChanged: function(oEvent) {
				var iValue = oEvent.getParameter("value"),
					sMessage = this.getResourceBundle().getText("productRatingSuccess", [iValue]);
				MessageToast.show(sMessage);
			},
…
});
	}
);

이제 컨트롤러에 이벤트 핸들러 함수 onRatingChanged를 추가하겠습니다. 사용자 지정 컨트롤 내부에 채운 이벤트 개체에서 값 매개 변수를 검색합니다.

지금까지 ProductDetails 보기에 사용된 ProductDetails 컨트롤러에 추가하지 않고 Object 컨트롤러에 추가합니다. 이 방식을 통해 코드를 단순화할 수 있습니다. 이후에 뷰 정의에서 컨트롤러 이름을 업데이트합니다.

다음으로 sap.m.MessageToast에 대한 종속성을 로드하고 성공적인 상호 작용에 대한 피드백을 제공하는 메시지를 표시합니다. 여기에서는 ResourceBundle의 매개변수와 함께 i18n 텍스트를 사용합니다. 이 작업을 수행하기 위해 매개변수를 getText 함수 호출에 대한 인수로 전달합니다.

webapp/i18n/i18n.properties

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

#XTIT: Object view title
objectTitle=Product

#XTIT: Submit Rating Button text
productRatingButtonText=Submit

#YMSG: Submit Rating Success Message
productRatingSuccess=Your new rating value is {0}

마지막으로 이 텍스트를 i18n.properties 파일에 추가합니다. 인덱스가 0인 매개변수 자리 표시자를 표시하려는 위치의 중괄호 안에 추가합니다.

webapp/view/ProductDetails.view.xml

<mvc:View
	controllerName="opensap.manageproducts.controller.Object"
	xmlns="sap.m"
	xmlns:mvc="sap.ui.core.mvc"
	xmlns:form="sap.ui.layout.form"
	xmlns:course="opensap.manageproducts.control">
	<Panel
		headerText="{i18n>productTitle}"
		expandable="{device>/system/phone}"
		expanded="true">
		<content>
			<course:ProductRate valueSubmit="onRatingChanged"/>
			<form:SimpleForm id="simpleForm">
				<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:View>

먼저 view에 사용되는 컨트롤러를 ProductDetails 컨트롤러에서 새 이벤트 핸들러를 추가한 Object 컨트롤러로 변경합니다.

이제 ProductDetails view에 컨트롤을 추가합니다. 보기에서 사용자 지정 컨트롤을 참조할 수 있도록 새 네임스페이스 과정이 object view에 추가되었습니다.

그런 다음 ProductRate 컨트롤의 인스턴스를 세부 정보 페이지에 추가하고 valueSubmit 이벤트에 대한 이벤트 핸들러를 등록합니다.

이제 앱을 실행하고 사용자 지정 컨트롤을 사용해 보세요. 위에서 지정한 대로 작동해야 합니다.