Step 5: Display a Target Without Changing the Hash

opensapkr·2019년 7월 2일

Navigation and Routing ui5

ui5-Navigation and Routing

목록 보기

6/17

hash 이후 잘못된 url에 들어가지 않고도 이전 단계의 Not Found 대상을 표시합해보

Target은 view에 대한 navigation-related configuration이며 라우트에서 target을 참조하지 않고 수동으로 target을 표시 할 수 있다.

Coding

Routing and Navigation - Step 5.

webapp/view/Home.view.xml

<mvc:View
	controllerName="sap.ui.demo.nav.controller.Home"
	xmlns="sap.m"
	xmlns:mvc="sap.ui.core.mvc">
	<Page title="{i18n>homePageTitle}" class="sapUiResponsiveContentPadding">
		<content>
			<Button id="displayNotFoundBtn" text="{i18n>DisplayNotFound}" press=".onDisplayNotFound" class="sapUiTinyMarginEnd"/>
		</content>
	</Page>
</mvc:View>

먼저 Button 컨트롤을 home view에서 변경한다. 버튼클릭시 onDisplayNotFound 핸들러를 호출하도록 한다.

webapp/controller/Home.controller.js

sap.ui.define([
	"sap/ui/demo/nav/controller/BaseController"
], function (BaseController) {
	"use strict";
	return BaseController.extend("sap.ui.demo.nav.controller.Home", {
	 onDisplayNotFound : function (oEvent) {
			//display the "notFound" target without changing the hash
			this.getRouter().getTargets().display("notFound");
		}
	});
});

home.xml에 정의한 onDisplayNotFound 핸들러는 라우터의 Targets 헬퍼 객체에 대한 참조를 얻어 notFoound를 호출한다.

note:
위의 코드는 base controller의 thzis.getRouter()를 호출한 결과에 getTargets()을 호출을 한다. sap.m.routing.Targets 객체에 대한 참조를 가져온다.
하지만 this.getOwnerComponent

이제 App을 호출하고 Display Not Found 버튼을 클릭하면 URL 변경없이 notFount Target이 표시된다.
하지만 여기서 우리는 단지 target만 표시하고 라우트를 거치지 않기 때문에 해시가 비어있어 홈 컨트롤러를 수정해야 한다.

webapp/controller/Home.controller.js (Changed Again)

sap.ui.define([
	"sap/ui/demo/nav/controller/BaseController"
], function (BaseController) {
	"use strict";
	return BaseController.extend("sap.ui.demo.nav.controller.Home", {
	 onDisplayNotFound : function (oEvent) {
			//display the "notFound" target without changing the hash
			this.getRouter().getTargets().display("notFound", {
				fromTarget : "home"
			});
		}
	});
});

target의 display 메서드에 두번째 매개 변수로 fromTarget 객체를 전달한다.

webapp/controller/NotFound.controller.js

sap.ui.define([
	"sap/ui/demo/nav/controller/BaseController"
], function (BaseController) {
	"use strict";
	return BaseController.extend("sap.ui.demo.nav.controller.NotFound", {
	 onInit: function () {
			var oRouter, oTarget;
			oRouter = this.getRouter();
			oTarget = oRouter.getTarget("notFound");
			oTarget.attachDisplay(function (oEvent) {
				this._oData = oEvent.getParameter("data"); //store the data
			}, this);
		},
		// override the parent's onNavBack (inherited from BaseController)
	 onNavBack : function (oEvent){
			// in some cases we could display a certain target when the back button is pressed
			if (this._oData && this._oData.fromTarget) {
				this.getRouter().getTargets().display(this._oData.fromTarget);
				delete this._oData.fromTarget;
				return;
			}
			// call the parent's onNavBack
			BaseController.prototype.onNavBack.apply(this, arguments);
		}
	});
});

notFound target의 display 이벤트에 이벤트 리스너를 등록해야한다. NotFound 컨트롤러 init 함수안에 target을 수동으로 표시할대 사용자 정의 데이터에 엑세스하여 저장할 수 있다.

라우터 참조에서 notFound target에 대한 레퍼런스를 가져올 수 있다. 각 target configuration은 라우트를 통해 액세스 할 수있는 런타임 객체를 생성한다.

SAPUI5 컨트롤과 마찬가지로 target은 첨부 할 수 있는 API 메소드 및 이벤트를 정의한다. display 이벤트 핸들러를 첨부하고 매개 변수 데이터로 받은 데이터를
_oData에 저장한다. 이 데이터는 호출자가 전달한 경우 fromTarget 속성이 전달 된 경우 back 기능에 대한 기능이 수동으로 표시가 된다.