이번 튜토리얼에서는 App을 수정하고 라우팅을 소개한다. App이 호출 될 때 여러 view를 연결하는 router를 구성 한다.
라우팅 구성은 사용자가 탐색 동작을 트리거하거나 응용 프로그램에 대한 링크를 직접 열 때 응용 프로그램 흐름을 제어한다.

Preview

02_preview.png

Coding

Routing and Navigation - Step 2.

webapp/manifest.json

{
    ...,
    "sap.ui5": {
        "models": {...},
        "routing": {
            "config": {
                "routerClass": "sap.m.routing.Router",
                "viewType": "XML",
                "viewPath": "sap.ui.demo.nav.view",
                "controlId": "app",
                "controlAggregation": "pages",
                "transition": "slide",
                "async": true
            },
            "routes": [{
                "pattern": "",
                "name": "appHome",
                "target": "home"
            }],
            "targets": {
                "home": {
                    "viewId": "home",
                    "viewName": "Home",
                    "viewLevel" : 1
                }
            }
        },
    }

SAPUI5 응용 프로그램은 router를 사용하여 hash기반 url을 view에 전달할 수 있다. sap.ui5 섹션에 routing 섹션을 추가하여 router를 구성해보자. 라우팅의 속성은 아래와 같다.

  • config

    해당 섹션에서는 routes 및 targets에 적용되는 configuration 및 value가 포함된다. routerClass의 기본값은 sap.m.routing.Router이다. sap.m을 기반으로 앱을 구현하기 대문에
    routerClass를 위와같이 설정했다. 자동으로 view를 로드하기 위해 control의 id 값과 controlAggregation을 설정한다. 이 튜토리얼은 xml view만 작성하므로 viewType을 xml로 설정한다.
    모든 view는 네임스페이스 sap.ui.demo.nav의 view folder에서 사용할 수 있으므로 viewPath를 네임스페이스와 똑같이 설정한다. 새로운 뷰를 불러올때 transition을 슬라이드로 지정했다.

    note :
    routerClass에 사용할 수 있는 값은 sap.ui.core.routing.Router와 sap.m.routing.Router가 있다. 코어에서 받은 라우터와 다르게 sap.m에서 받은 라우터는 모바일 App에 최적화 되어 있어
    viewLevel,transition,transitionParameters 속성을 추가적으로 설정 할 수 있다.

  • routes

    각 router에는 name, pattern 및 하나 이상의 target을 정의한다. 패턴은 기본적으로 라우트와 일치하는 URL의 해시 부분이다. (ex http//~/#/pattern) 일치하는 라우트만 라우터에서 사용되기 때문에
    라우트 순서가 중요하다. name속성은 특정 경로를 탐색하여 일치하는 핸들러를 결정한다. target 속성은 경로가 일치 할 때 표시 될 targets중 하나이다.

  • targets

    target은 표시되는 뷰를 정의한다. 하나 이상의 라우트와 연결되어 있거나 App 내 수동으로 표시할 수 있다.
    target이 표시 되면 해당 view가 로드되어 컨트롤의 컨트롤어그리게이션 옵션으로 구성된 어그리게이션에 추가된다. 이 옵션은 컨트롤id를 사용하여 구성된다.
    각 target에는 고유한 key("home")이 있다. viewName은 로드될 view를 정의한다. viewLevel은 config의 transition과 관련이 잇다.

    note:
    SAPUI5 버전 1.30 이상부터 라우트 와 타겟을 사용하여 manifest.json에 라우팅을 정의하는것을 권장한다.

webapp/Component.js

sap.ui.define([
    "sap/ui/core/UIComponent"
], function (UIComponent) {
    "use strict";

    return UIComponent.extend("sap.ui.demo.nav.Component", {

        metadata: {
            manifest: "json"
        },

        init: function () {
            // call the init function of the parent
            UIComponent.prototype.init.apply(this, arguments);

            // create the views based on the url/hash
            this.getRouter().initialize();
        }

    });

});

init 함수에서 종속성으로 추가된 UIComponent의 init을 호출하고 라우터에 대한 참조값을 얻어 initialize()을 호출한다.
라우터는 manigest.json에 의해 구성되며 컴포넌트 파일에서 자동으로 인스턴스화 된다.

참고자료:

javascript 함수의 메소드와 arguments

openui5 UIComponent api ref

webapp/view/App.view.xml

<mvc:View
    controllerName="sap.ui.demo.nav.controller.App"
    xmlns="sap.m"
    xmlns:mvc="sap.ui.core.mvc"
    displayBlock="true">
    <Shell>
        <App id="app"/>
    </Shell>
</mvc:View>

기존 <App> 컨트롤안에 있던 컨텐츠들을 삭제한다. 해당 페이지는 manifest.json에 의해 동적으로 추가된다.
rootView 속성으로 구성된 view는 처음 App을 호출 할 때 자동으로 인스턴스화 된다.

webapp/view/Home.view.xml (New)

<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 text="{i18n>iWantToNavigate}" class="sapUiTinyMarginEnd"/>
        </content>
    </Page>
</mvc:View>

해당 파일을 만들고 버튼을 표시하는 페이지 컨트롤만 만든다.

webapp/controller/Home.controller.js (New)

sap.ui.define([
    "sap/ui/core/mvc/Controller"
], function (Controller) {
    "use strict";

    return Controller.extend("sap.ui.demo.nav.controller.Home", {

    });

});

이번 단계에서는 단순히 파일만 생성하고 로직은 넣지 않는다. webapp/index.html을 호출하여 App을 실행될 때 해당 컨트롤러를 사용하여 App의 진입 점을 정의할 예정이다.

note:
라우팅은 hash-based URL을 App의 view로 보내고, view의 상퇴를 관리한다. 라우팅 구성에 따라 페이지 간 탐색을 정의하고 매개 변수를 대상 view로 전달한다.

Conventions

  • manifest.json 설명자 파일에서 라우터를 구성한다.
  • 라우터를 정확히 초기화 한다.
  • Component에서 라우터를 초기화한다.

Routing and Navigation

API Reference: sap.ui.core.routing

API Reference: sap.ui.core.routing.Route

API Reference: sap.ui.core.routing.Route: Constructor Detail

API Reference: sap.m.routing.Router