Step 17: Fragment Callbacks

opensapkr·2019년 7월 3일

Walkthrough ui5

ui5-Walkthrough

목록 보기

18/39

이번 튜토리얼에선 다이얼로그를 닫고 이벤트 핸들러를 지정하는 버튼을 추가한다.

Preview

Coding

Walkthrough - Step 17.

webapp/controller/HelloPanel.controller.js

sap.ui.define([
	"sap/ui/core/mvc/Controller",
	"sap/m/MessageToast",
	"sap/ui/core/Fragment"
], function (Controller, MessageToast, Fragment) {
	"use strict";

	return Controller.extend("sap.ui.demo.walkthrough.controller.HelloPanel", {

		onShowHello : function () {
			// read msg from i18n model
			var oBundle = this.getView().getModel("i18n").getResourceBundle();
			var sRecipient = this.getView().getModel().getProperty("/recipient/name");
			var sMsg = oBundle.getText("helloMsg", [sRecipient]);

			// show message
			MessageToast.show(sMsg);
		},

		onOpenDialog : function () {
			var oView = this.getView();

			// create dialog lazily
			if (!this.byId("helloDialog")) {
				// load asynchronous XML fragment
				Fragment.load({
					id: oView.getId(),
					name: "sap.ui.demo.walkthrough.view.HelloDialog",
					controller: this
				}).then(function (oDialog) {
					// connect dialog to the root view of this component (models, lifecycle)
					oView.addDependent(oDialog);
					oDialog.open();
				});
			} else {
				this.byId("helloDialog").open();
			}
		},

		onCloseDialog : function () {
			this.byId("helloDialog").close();
		}
	});

});

Fragment.load 함수의 세 번째 매개변수는 선택적이며(controller) 객체에 대한 참조를 전달할 수 있다.
다이얼로그에서 HelloPanel 컨트롤러를 참조한다. 세 번째 매개 변수는 반드시 controller일 필요 없고 모든 Object가 될 수 있다.
event handler function은 동일한 controller 파일에 저장되며 다이얼로그를 반환하는 내부 helper 함수에 액세스하여 대화 상자를 닫는다.

webapp/view/HelloDialog.fragment.xml

<core:FragmentDefinition
   xmlns="sap.m"
   xmlns:core="sap.ui.core" >
   <Dialog
      id="helloDialog"
      title ="Hello {/recipient/name}">
      <beginButton>
         <Button
            text="{i18n>dialogCloseButtonText}"
            press=".onCloseDialog"/>
      </beginButton>
   </Dialog>
</core:FragmentDefinition>

fragment 정의에서 우리는 대화 상자의 beginButton aggregation에 버튼을 추가한다.
press event handler는 onCloseDialog라는 이벤트 처리기를 참조하며 HelloPanel controller에 대한 참조를 전달 했으므로 버튼을 누를때 메서드가 호출된다.
다이얼로그에는 beginButton과 endButton이라는 aggregation이 있다.
이러한 aggregation에 버튼을 배치하면 beginButton이 UI의 endButton 앞에 배치된다.
그러나 before 의 의미는 현재 언어의 텍스트 방향에 따라 달라진다.
따라서 begin과 end라는 용어를 "left"와 "right"의 동의어로 사용한다.
왼쪽에서 오른쪽 방향 인 언어에서는 beginButton이 왼쪽으로 렌더링되고 endButton은 오른쪽으로 특정 언어right-to-left Mode로 전환하면 명령이 전환된다.

webapp/i18n/i18n.properties

# App Descriptor
appTitle=Hello World
appDescription=A simple walkthrough app that explains the most important concepts of OpenUI5

# Hello Panel
showHelloButtonText=Say Hello
helloMsg=Hello {0}
homePageTitle=Walkthrough
helloPanelTitle=Hello World
openDialogButtonText=Say Hello With Dialog
dialogCloseButtonText=Ok

Reusing UI Parts: Fragments

Instantiation of Fragments