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

Preview

04_preview.png

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

모든 컨트롤러의 종석성을 sap/ui/demo/nav/controller/BaseController로 바꿔 확장한다.

note:
브라우저 상단에 있는 뒤로가기 버튼은 브라우저 기록을 사용하지만 App에서 추가한 back 버튼은 브라우저의 history를 사용하거나 자체 탐색 로직을 구현할 수 있다.

Conventions

  • App에서 back 탐색을 위한, 전역 onNavBack 처리기 구현

  • 현재 앱에 대한 기록이없는 경우 기록을 조회하고 홈페이지로 이동한다.