Step 17: Fragment Callbacks

step 설명

dialog를 통합했으므로 사용자 상호작용을 추가할 차례입니다. 사용자는 반드시 어는 순간에 dialog를 닫길 원할 것 입니다. 그래서 dialog를 닫는 버튼을 추가하고 event handler에 할당합니다.

webapp/controller/HelloPanel.controller.js

sap.ui.define([
	"sap/ui/core/mvc/Controller",
	"sap/m/MessageToast"
], function (Controller, MessageToast) {
	"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();
			var oDialog = oView.byId("helloDialog");
			// create dialog lazily
			if (!oDialog) {
			    // create dialog via fragment factory
			    oDialog = sap.ui.xmlfragment(oView.getId(), "sap.ui.demo.walkthrough.view.HelloDialog", this);
			    // connect dialog to view (models, lifecycle)
			    oView.addDependent(oDialog);
			}
 
			oDialog.open();
		},
 
		onCloseDialog : function () {
			this.getView().byId("helloDialog").close();
		}

	});
 
});

이전 설명에서처럼 fragments는 순수 UI 재사용 artifacts(결과물)이고 controller를 가지지 않습니다. sap.ui.xmlfragment 함수의 세번째 파라미터는 옵션이고 (controller) 객체에 대한 참조를 전달할 수 있습니다. dialog에서 HelloPanel controller를 참조합니다. 그러나 세번째 파라미터는 반드시 controller일 필요는 없지만 어떠한 객체도 될 수 있습니다. 이 키워드를 잊지 마십시오.

event handler 함수는 동일한 controller 파일에 저장되며 dialog가 반환하는 내부 helper 함수에 접근해 dialog를 닫습니다.

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 정의에서 dialog의 beginButton  aggregation에 버튼을 추가합니다.press handler는 event handler onCloseDialog를 참조하고 HelloPanel controller에 참조를 전달했으므로 메소드는 버튼이 눌릴 때 실행됩니다. dialog는 endButton뿐만 아니라 aggregation beginButton도 가지고 있습니다. 이 aggregation 모두에 버튼을 배치하면 UI에서 endButton 앞에 beginButton이 놓이게 됩니다. "begin"이라는 의미는 현재 언어의 텍스트 방향에 따라 달라집니다. 따라서 "begin"과 "end"는 "left"와 "right"의 동의어로 사용됩니다. 왼쪽에서 오른쪽으로 진행되는 언어에서 beginButton은 왼쪽으로 그려지고 endButton은 오른쪽으로, 특정 언어에 대해 오른쪽에서 왼쪽 모드에서 순서는 바뀝니다.

webapp/i18n/i18n.properties

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

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

텍스트 bundle은 open 버튼과 dialog 닫기 버튼에 대한 이 두개의 새로운 텍스트로 확장됩니다.