[UI5] Routing (+뒤로가기버튼)

지금까지 모든 앱 콘텐츠를 한 페이지에 넣었다. 점점 더 많은 기능을 추가함에 따라 컨텐츠를 분할하여 별도의 페이지에 배치해보자.

이 단계에서는 SAPUI5 탐색 기능을 사용하여 나중에 송장에 대한 세부 사항을 표시하는 데 사용할 수있는 별도의 세부 사항 페이지를 로드하고 표시한다. SAPUI5 라우터 클래스를 사용하여 페이지를 로드하고 URL을 자동으로 업데이트한다.

인보이스 항목중 하나를 클릭하면 다른페이지로 detail page가 나온다.

Detail Page

라우팅 설정 (manifest.json)

manifest에서는 라우팅을 설정한다. 앱의 라우팅 및 탐색 구조를 정의하는 3개의 하위 섹션인 Config, Routes, Targets 이 있다.

Config
사용하려는 라우터 클래스와 앱에서 뷰가 있는 위치를 정의한다. 뷰를 자동으로 로드하고 표시하기 위해 페이지를 표시하는데 사용되는 컨트롤과 새 페이지가 표시 될 때 채워야 할 집계도 지정한다.
Routes
각 경로는 경로에 도달했을 때 탐색 할 이름, 패턴 및 하나 이상의 대상을 정의한다. 패턴은 기본적으로 경로와 일치하는 URL 부분이며, 앱에 대해 두 개의 경로를 정의한다. 첫 번째는 이전 단계의 내용이 포함 된 개요 페이지를 표시하는 기본 경로이고, 두 번째는 새 페이지를 표시 할 URL 패턴 세부 사항이 포함된 세부 경로이다.
Targets
대상은 표시되는 보기를 정의하고 하나 이상의 경로와 연결되며 앱 내에서 수동으로 표시 할 수도 있다. 대상이 표시 될 때마다 해당보기가 로드되어 앱에 표시된다.

     "routing" : {
         "config" : {
             "routerClass" : "sap.m.routing.Router",
             "viewType" : "XML",
             "viewPath" : "sap.ui.demo.walkthrough.view",
             "controlId" : "app",
             "controlAggregation" : "pages",
             "async" : true
         },

veiwPath말고는 우리가 건들일 일이 거의 없다.

controlId는 뒤에 App 뷰에서 App모듈에 부여한 아이디와 매칭된다.

App 뷰에서 pages를 지우고 다른 뷰로 옮길 수 있었던 이유는 controlAggregation을 pages로 설정해줬기 때문이다.

         "routes" : [
         {
             "pattern" : "",
             "name" : "overview",
             "target" : "overview"
         },
         {
             "pattern" : "detail",
             "name" : "detail",
             "target" : "detail"
         }
         ],

pattern은 페이지의 url을 설정한다. 처음에는 default 주소를 사용하기 위해 빈문자열로 둔다.

name은 라우터의 navigation 이름을 지정한다. invoiceList의 컨트롤러에서 oRouter.navTo("detail")에서 사용하는 detail이 name에서 설정한 이름과 매칭된다.

         "targets" : {
             "overview" : {
             "viewId" : "overview",
             "viewName" : "Overview"
             },
         "detail" : {
             "viewId" : "detail",
             "viewName" : "Detail"
             }
         }
     }

targets는 타겟을 찾아간다.

여기서 detail은 위의 routes에서 설정한 target 프로포티에서 설정한 detail과 매칭되기 때문에 동일한 이름이 들어가야 한다.

viewName은 뷰 파일의 이름을 의미한다. Overview.view.xml, Detail.view.xml을 뜻하는데 간단하게 구문을 구현하기 위해 ui5에서 경로는 생략한다.

---

라우터 초기화 (Component.js)

init함수 안에 아래 구문을 입력한다.

this.getRouter().initialize();

라우터 객체를 초기화한다.

---

뷰 생성 (Overview.view.xml)

새로 view 파일을 생성한다. 기존 App view로직을 옮기고 원래 있던 App.view의 App모듈에 id를 추가한다.

<mvc:View
    controllerName="sap.ui.demo.walkthrough.controller.App" xmlns="sap.m"
    xmlns:mvc="sap.ui.core.mvc">
    <Page title="{i18n>homePageTitle}">
        <content>
            <mvc:XMLView viewName="sap.ui.demo.walkthrough.view.HelloPanel" />
            <mvc:XMLView viewName="sap.ui.demo.walkthrough.view.InvoiceList" />
        </content>
    </Page>
</mvc:View>

---

뷰 생성 (Detail.view.xml)

새로 view 파일을 생성한다.

<mvc:View
    xmlns="sap.m"
    xmlns:mvc="sap.ui.core.mvc">
    <Page title="Detail Page">
        <ObjectHeader title="Invoice" />
    </Page>
</mvc:View>

---

InvoiceList.view.xml

<ObjectListItem type="Navigation" press=".onPress" > 

type과 press는 한몸처럼 같이 사용된다. type은 화면에 표시를 하고 press는 실질적인 동작을 의미한다.

---

InvoiceList.controller.js

        onPress :  function (oEvent) {
            var oRouter = sap.ui.core.UIComponent.getRouterFor(this);
            oRouter.navTo("detail");

        }

페이지 이동은 여기서만 사용하기 때문에 따로 경로와 매개변수를 추가해주지않고 함수 안에서 페이지 이동을 구현한다.
navTo프로포티는 어디로 이동할지 설정한다. 이름은 manifest.json에서 name프로포티에 입력한 이름과 동일하게 써준다.

---

Back 버튼 추가

뒤로가기 버튼을 누르면 처음 화면으로 돌아가게 한다.

Detail.view.xml

controllerName="sap.ui.demo.walkthrough.controller.Detail"

Detail 컨트롤러의 경로를 추가해주고

<Page 
    showNavButton="true"
    navButtonPress=".onNavBack">

Page 모듈에 버튼을 추가해준다.

Detail.controller.js

컨트롤러 폴더에 Detail 파일을 하나 생성한다.

sap.ui.define([
    "sap/ui/core/mvc/Controller",
    "sap/ui/core/UIComponent",
    "sap/ui/core/routing/History"
], function (Controller, UIComponent, History) {
    "use strict";
    return Controller.extend("sap.ui.demo.walkthrough.controller.Detail", {
        onInit : function (){
        },

        onNavBack : function () {
            var oHistory = History.getInstance();
            var sPrevious = oHistory.getPreviousHash();

            if( sPrevious !== undefined ) {    
                window.history.go(-1);    
            } else {
                UIComponent.getRouterFor(this).navTo("overview");
            }
        }
    });
});

if문 없이 else 뒤에 있는 구문만 사용해도 되지만 혹시나 undefined 경우가 생길 수 있기 때문에 그런경우에 History를 사용해 전 화면으로 돌아가게 한다. go(-1) 대신 back(1)을 사용해도 동일하다.