이 튜토리얼에서는 홈 페이지에 두 번째 버튼을 만들어 직원 목록으로 이동할 수 있게 한다. 이 예제는 하드 코딩 된 pattern이 있는 경로를 탐색한다.
Preview
Coding
Routing and Navigation - Step 6.
webapp/view/Home.view.xml
<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 id="displayNotFoundBtn" text="{i18n>DisplayNotFound}" press=".onDisplayNotFound" class="sapUiTinyMarginEnd"/>
<Button id="employeeListBtn" text="{i18n>ShowEmployeeList}" press=".onNavToEmployees" class="sapUiTinyMarginEnd"/>
</content>
</Page>
</mvc:View>home view에서 employeeListBtn 버튼을 추가하고 onNavToEmployees 이벤트 핸들러를 등록한다.
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", {
onDisplayNotFound : function () {
// display the "notFound" target without changing the hash
this.getRouter().getTargets().display("notFound", {
fromTarget : "home"
});
},
onNavToEmployees : function () {
this.getRouter().navTo("employeeList");
}
});
});onNavToEmployees 함수는 라우터 인스턴스에서 navTo로 employeeList를 호출할 것이다.
webapp/manifest.json
{
...,
"sap.ui5": {
...,
"routing": {
"config": {
"routerClass": "sap.m.routing.Router",
"viewType": "XML",
"viewPath": "sap.ui.demo.nav.view",
"controlId": "app",
"controlAggregation": "pages",
"transition": "slide",
"bypassed": {
"target": "notFound"
},
"async": true
},
"routes": [{
"pattern": "",
"name": "appHome",
"target": "home"
},
{
"pattern": "employees",
"name": "employeeList",
"target": "employees"
}],
"targets": {
"home": {
"viewId": "home",
"viewName": "Home",
"viewLevel" : 1
},
"notFound": {
"viewId": "notFound",
"viewName": "NotFound",
"transition": "show"
},
"employees": {
"viewId": "employeeList",
"viewPath": "sap.ui.demo.nav.view.employee",
"viewName": "EmployeeList",
"viewLevel" : 2
}
}
}
}
}descriptor 파일에서 App의 라우팅 구성을 확장한다. employeeList라는 새로운 패턴을 추가한다.
라우트의 패턴은 employees로 hash 뒤에 붙을 이름이다. url이 일치하면 employees 화면이 나타날 것이다.
target 섹션의 employees 항목은 sap.ui.demo.nav.view.employee.EmployeeList view를 참조한다.
viewPath속성에 따라 view에 대한 새 네임스페이스 employees를 추가한다.
employees view를 webapp/view/employee 폴더 안에 배치한다.
note:
viewPath 솓성을 생략하여 config section에 정의된 기본 viewPath를 사용할 수 있지만 이럴 경우에는 viewName을 employee.EmployeeList로 변경해야 한다.
viewLevel속성을 2로 설정하면 클릭시 slide 전환 애니메이션이 왼쪽으로 된다.
webapp/view/employee/EmployeeList.view.xml (New)
<mvc:View
controllerName="sap.ui.demo.nav.controller.employee.EmployeeList"
xmlns="sap.m"
xmlns:mvc="sap.ui.core.mvc">
<Page
id="employeeListPage"
title="{i18n>EmployeeList}"
showNavButton="true"
navButtonPress=".onNavBack"
class="sapUiResponsiveContentPadding">
<content>
<List id="employeeList" headerText="{i18n>ListOfAllEmployees}" items="{/Employees}">
<items>
<StandardListItem
title="{FirstName} {LastName}"
iconDensityAware="false"
iconInset="false"/>
</items>
</List>
</content>
</Page>
</mvc:View>webapp/view/employee 경로에 해당 뷰 파일을 생성한다.
sap.m의 List 컨트롤을 사용하여 시뮬레이션 된 OData 데이터에 항목을 바인딩한다. Overview로 돌아가려면 base 컨트롤러에 있는 onNavBack 핸들러를 등록한다.
해당 view는 sap.ui.demo.nav.view.employee.EmployeeList에서 참조 할 수 있다.
webapp/controller/employee/EmployeeList.controller.js (New)
sap.ui.define([
"sap/ui/demo/nav/controller/BaseController"
], function (BaseController) {
"use strict";
return BaseController.extend("sap.ui.demo.nav.controller.employee.EmployeeList", {
});
});webapp/controller/employee 디렉토리에 EmployeeList.view.xml에 대한 새로운 컨트롤러를 추가한다.
해당 컨트롤러 또한 BaseController를 상속 받아 뒤로가기 버튼 클릭시 overview 페이지로 돌아가게 한다.
webapp/i18n/i18n.properties
...
ShowEmployeeList=Show Employee List
EmployeeList=Employee List
ListOfAllEmployees=List of all employees이제 터미널을 열고 ui5Lecture/ui5_navigation_routing/06 경로에서 npm run serve 명령어를 입력하여 테스트를 해보자
Related Information
