Step 2: Enable Routing

opensapkr·2019년 7월 2일

ui5-Navigation and Routing

목록 보기

3/17

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

Preview

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>

기존 컨트롤안에 있던 컨텐츠들을 삭제한다. 해당 페이지는 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", {

	});

});