Step 4: Add a Back Button to Not Found Page

opensapkr·2019년 7월 2일

Navigation and Routing ui5

ui5-Navigation and Routing

목록 보기

5/17

Not Found 페이지에서 back 버튼을 추가하여 이전 페이지로 리디렉션을 해보자

Preview

Coding

Routing and Navigation - Step 4.

webapp/view/NotFound.view.xml

<mvc:View
	controllerName="sap.ui.demo.nav.controller.NotFound"
	xmlns="sap.m"
	xmlns:mvc="sap.ui.core.mvc">
	<MessagePage
		title="{i18n>NotFound}"
		text="{i18n>NotFound.text}"
		description="{i18n>NotFound.description}"
		showNavButton="true"
		navButtonPress="onNavBack"/>
</mvc:View>

MessagePage 컨트롤의 showNavButton 속성을 true로 설정하면 Back 버튼이 자동으로 표시된다.
navButtonPress 이벤트에 onNavBack 이벤트 핸들러 함수를 추가한다. 해당 핸들러 함수는 모든 컨트롤러가 상속할 BaseController에 정의를 한다.

webapp/controller/BaseController.js (New)

sap.ui.define([
	"sap/ui/core/mvc/Controller",
	"sap/ui/core/routing/History"
], function (Controller, History) {
	"use strict";
	return Controller.extend("sap.ui.demo.nav.controller.BaseController", {
		getRouter : function () {
			return sap.ui.core.UIComponent.getRouterFor(this);
		},
	 onNavBack: function (oEvent) {
			var oHistory, sPreviousHash;
			oHistory = History.getInstance();
			sPreviousHash = oHistory.getPreviousHash();
			if (sPreviousHash !== undefined) {
				window.history.go(-1);
			} else {
				this.getRouter().navTo("appHome", {}, true /*no history*/);
			}
		}
	});
});

BaseController는 각 페이지에 대해 컨트롤를 복제하지 않으면서 이벤트 핸들러를 만들 수있는 재사용 가능한 함수 세트를 구현하는 컨트롤러이다.
함수 onNavBack에서 App의 History는 이전 hash 값이 있는지 확인하고 History API를 통해 이전 hash 값으로 리디렉션된다.
만약 이전 hash값이 없다면 라우터를 사용하여 appHome 경로로 가게 된다.
navTo("appHome", {}, true); 에서 3번째 매개 변수값이 true이고 hash가 바뀌는지 확인한다.
getRouter 함수에서 sap.ui.core.UIComponent.getRouterFor(this);를 통해 App전체에서 컴포넌트의 라우터를 액세스 할 수 있다.

note:
SAPUI5에서는 코드를 재사용하기 위한 여러 옵션들이 있다. 컨트롤러에서 사용할때는 helper method로 사용하는것을 권장한다.
helper method를 활용하면 컨트롤러에 코드추가 없이 xml view에서 onNavBack 핸들러를 직접 사용할 수 ㄹ있다.
BaseController는 추상 컨트롤러로 *.controller.js 규칙 적용 없이 파일을 호출 할 수있다.

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 () {
		}
	});
});

BaseController를 재사용하기 위해 기존 sap/ui/core/mvc/Controller 종속성에서 sap/ui/demo/nav/controller/BaseController로 변경하여 확장한다.

webapp/controller/App.controller.js

sap.ui.define([
	"sap/ui/demo/nav/controller/BaseController"

], function (BaseController) {
	"use strict";
	return BaseController.extend("sap.ui.demo.nav.controller.App", {
	 onInit: function () {
		}
	});
});

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", {
	});
});