SAP 사용자들의 오픈 커뮤니티

• 목록

Week 4 - Unit 1. Navigation and Routing Concepts

목차

1. 경로 추가 구현하기
2. 뷰 추가 구현하기
3. 컨트롤러 추가 구현하기

1.경로 추가 구현하기

이 단계에서는 "add" 버튼, 즉 해당 컨트롤러와 경로 및 대상이 포함된 새로운 "add" 뷰를 구현하여 navigation에 포함시킵니다.

webapp/view/Worklist.view.xml

…

<ToolbarSpacer />

<SearchField

id="searchField"

tooltip="{i18n>worklistSearchTooltip}"

search="onSearch"

width="auto">

</SearchField>

**<Button id="addButton" icon="sap-icon://add" press="onAdd" />**

</Toolbar>

</headerToolbar>

…

이를 위해 검색 필드 옆에 있는 HeaderToolbar 내의 Worklist.view.xml 내에 버튼을 구현합니다. 아이콘으로는 SAP UI5 아이콘 글꼴 표준인 "+" 아이콘을 사용합니다.

webapp/controller/Worklist.controller.js

…
			/* =========================================================== */
			/* event handlers                                              */
			/* =========================================================== */

			/**
			 * Event handler when the add button gets pressed
			 * @public
			 */
			onAdd: function() {
				this.getRouter().navTo("add");
			},
…

Worklist.view.xml에서 참조하는 onAdd 함수는 Worklist.controller.js에 정의되어 있어야 합니다.

이 기능이 호출되면 "add" 경로로 이동하기만 하면 됩니다.

webapp/manifest.json

…
"routing": {
			"config": {
				"routerClass": "sap.m.routing.Router",
				"viewType": "XML",
				"viewPath": "opensap.manageproducts.view",
				"controlId": "app",
				"controlAggregation": "pages",
				"bypassed": {
					"target": "notFound"
				},
				"async": true
			},
			"routes": [
				{
					"pattern": "",
					"name": "worklist",
					"target": "worklist"
				},
				{
					"pattern": "ProductSet/{objectId}",
					"name": "object",
					"target": "object"
				},
				{
					"pattern" : "AddProduct",
					"name" : "add",
					"target" : "add"
				}
			],
			"targets": {
				"worklist": {
					"viewName": "Worklist",
					"viewId": "worklist",
					"viewLevel": 1
				},
				"object": {
					"viewName": "Object",
					"viewId": "object",
					"viewLevel": 2
				},
				"add": {
					"viewName": "Add",
					"viewId": "add",
					"viewLevel": 3
				},
				"objectNotFound": {
					"viewName": "ObjectNotFound",
					"viewId": "objectNotFound"
				},
				"notFound": {
					"viewName": "NotFound",
					"viewId": "notFound"
				}
			}
		}
…

이제 manifest.json 내에서 경로와 대상을 정의해야 합니다.

경로 패턴은 "AddProduct"이며, Worklist.controller.js에서 이전에 참조했던 것처럼 "add"라는 이름으로 지정합니다.

2.뷰 추가 구현하기

webapp/view/Add.view.xml (NEW)

<mvc:View
	controllerName="opensap.manageproducts.controller.Add"
	xmlns:mvc="sap.ui.core.mvc"
	xmlns:semantic="sap.m.semantic"
	xmlns="sap.m">
	<semantic:FullscreenPage
		id="page"
		title="{i18n>addPageTitle}"
		showNavButton="true"
		navButtonPress="onNavBack">
	</semantic:FullscreenPage>
</mvc:View>

Add.view.xml은 view 폴더 내에 위치하며 제목과 "Back" 버튼이 있는 SemanticPage로 구성됩니다.

webapp/i18n/i18n.properties

…
#YMSG: Send E-Mail message
shareSendEmailObjectMessage=<Email body PLEASE REPLACE ACCORDING TO YOUR USE CASE> {0} (id: {1})\r\n{2}

#~~~ Add View ~~~~~~~~~~~~~~~~~~~~~~~~~~

#XTIT: Add view title
addPageTitle=New Product

#~~~ Not Found View ~~~~~~~~~~~~~~~~~~~~~~~
…

i18n.properties 파일 내에 Add.view.xml의 페이지 타이틀에 대한 타이틀을 추가합니다.

3.컨트롤러 추가 구현하기

webapp/controller/Add.controller.js (NEW)

sap.ui.define([
	"opensap/manageproducts/controller/BaseController",
	"sap/ui/core/routing/History"
], function(BaseController, History) {
	"use strict";

	return BaseController.extend("opensap.manageproducts.controller.Add", {

		/* =========================================================== */
		/* lifecycle methods                                           */
		/* =========================================================== */

		/**
		 * Called when the add controller is instantiated.
		 * @public
		 */
		onInit: function() {

			// Register to the add route matched
			this.getRouter().getRoute("add").attachPatternMatched(this._onRouteMatched, this);
		},

		/* =========================================================== */
		/* event handlers                                              */
		/* =========================================================== */

		_onRouteMatched: function() {

			//here goes your logic which will be executed when the "add" route is hit
			//will be done within the next unit
		
		},

		/**
		 * Event handler for navigating back.
		 * It checks if there is a history entry. If yes, history.go(-1) will happen.
		 * If not, it will replace the current entry of the browser history with the worklist route.
		 * @public
		 */
		onNavBack : function() {

			var oHistory = History.getInstance(),
				sPreviousHash = oHistory.getPreviousHash();

			if (sPreviousHash !== undefined) {
				// The history contains a previous entry
				history.go(-1);
			} else {
				// Otherwise we go backwards with a forward history
				var bReplace = true;
				this.getRouter().navTo("worklist", {}, bReplace);
			}
		}

	});
});

Add.controller.js 내에서 컨트롤러의 onInit 메서드에 있는 add 경로의 patternMatched 이벤트에 등록합니다. 여기에서는 _onRouteMatched 메서드가 사용되고 다음 유닛에서 추가로 구현됩니다.

또한 히스토리로 돌아가거나 앱의 초기 페이지로 이동하는 OnNavBack 기능도 구현합니다.

이제 앱에 내비게이션을 통해 표시하고 도달할 수 있는 새로운 뷰가 추가되었습니다.