이제 overview 및 detail 정보 페이지를 이동할 수 있지만 Overview에서 선택한 실제 item의 실제 내용이 detail page에 아직 표시되지 않는다.
이 작업을 수행하려면 선택한 item에 대한 정보를 detail 페이지로 전달하고 해당 항목에 대한 세부 정보를 표시한다.
Preview
Coding
webapp/manifest.json
{
"_version": "1.12.0",
…
"sap.ui5": {
…
"routing": {
"config": {
"routerClass": "sap.m.routing.Router",
"viewType": "XML",
"viewPath": "sap.ui.demo.walkthrough.view",
"controlId": "app",
"controlAggregation": "pages",
"async": true
},
"routes": [
{
"pattern": "",
"name": "overview",
"target": "overview"
},
{
"pattern": "detail/{invoicePath}",
"name": "detail",
"target": "detail"
}
],
"targets": {
"overview": {
"viewID": "overview"
"viewName": "Overview"
},
"detail": {
"viewId": "detail"
"viewName": "Detail"
}
}
}
}
}선택한 item에 대한 정보를 detail page로 넘길 수 있도록 navigation parameter인 invoicePath를 detail route에 추가한다.
필수 navigation parameter는 중괄호로 정의된다.
webapp/view/Detail.view.xml
<mvc:View
controllerName="sap.ui.demo.walkthrough.controller.Detail"
xmlns="sap.m"
xmlns:mvc="sap.ui.core.mvc">
<Page
title="{i18n>detailPageTitle}">
<ObjectHeader
intro="{invoice>ShipperName}"
title="{invoice>ProductName}"/>
</Page>
</mvc:View>view에 item의 context를 설정하고 ObjectHeader의 일부 속성을 invoice model의 필드에 binding하는 controller를 추가한다.
webapp/controller/InvoiceList.controller.js
sap.ui.define([
"sap/ui/core/mvc/Controller",
"sap/ui/model/json/JSONModel",
"../model/formatter",
"sap/ui/model/Filter",
"sap/ui/model/FilterOperator"
], function (Controller, JSONModel, formatter, Filter, FilterOperator) {
"use strict";
return Controller.extend("sap.ui.demo.walkthrough.controller.InvoiceList", {
…
onPress: function (oEvent) {
var oItem = oEvent.getSource();
var oRouter = sap.ui.core.UIComponent.getRouterFor(this);
oRouter.navTo("detail", {
invoicePath: oItem.getBindingContext("invoice").getPath().substr(1)
});
}
});
});control instance는 모든 SAPUI5 이벤트에 사용할 수 있는 getSource method를 통해 액세스 한다.
클릭된 ObjectListItem을 반환한다.
클릭한 item의 정보를 detail 페이지로 전달하여 동일한 항목을 표시 한다.
navTo 메소드에서 configuration 객체를 추가하여 navigation parameter invoicePath를 item의 현재 정보로 채운다.
URL이 업데이트면 detail view로 동시에 이동한다.
detail 페이지에, 이 context 정보에 다시 액세스하여 해당 항목을 표시 할 수 있다.
항목에 대한 path는 SAPUI5의 helper object 인 binding context의 일부로 컨트롤에 대한 바인딩 정보를 관리한다.
binding context는 binding된 모든 SAPUI5 control의 getBindingContext 메소드를 호출(파라메터로 model이름을 넘겨)하여 액세스 할 수 있다.
문자열의 .substr(1)을 호출하여 바인딩 경로의 첫 번째를 제거 한다(URL에는 특수 문자 1개가 들어있음) 이 정보는 detail 페이지에 다시 추가된다.
webapp/controller/Detail.controller.js (New)
sap.ui.define([
"sap/ui/core/mvc/Controller",
"sap/ui/core/UIComponent"
], function (Controller, UIComponent) {
"use strict";
return Controller.extend("sap.ui.demo.walkthrough.controller.Detail", {
onInit: function () {
var oRouter = sap.ui.core.UIComponent.getRouterFor(this);
oRouter.getRoute("detail").attachPatternMatched(this._onObjectMatched, this);
},
_onObjectMatched: function (oEvent) {
this.getView().bindElement({
path: "/" + oEvent.getParameter("arguments").invoicePath,
model: "invoice"
});
}
});
});view에서 URL 매개 변수 invoicePath를 사용하여 전달한 컨텍스트를 설정하고 송장 목록에서 선택된 item이 실제로 표시한다.
parameter가 비어있으면 view도 비어있게된다.
controller의 init 메소드에서 App Router의 instance를 가져온다.
그리고 router의 detail항목에 method attachPatternMatched를 호출하여 추가정보를 연결한다.
우리는 item을 클릭하거나 URL을 가지고 detail page에 대한 App을 호출하는경우(hit된경우) 실행될 내부 callback function _onObjectMatched를 등록한다.
Router에 의해 실행되는 _onObjectMatched 메소드에서 URL 및 navigation parameter에 액세스하는 데 사용할 수 있는 event oEvent를 수신한다.
arguments 매개 변수는 route의 pattern에서 navigation parameter에 해당하는 객체를 반환한다.
Invoice List Controller에서 설정 한 invoicePath에 액세스하고 view에서 bindElement 함수를 호출하여 context를 설정한다.
URL 매개 변수에는 path(앞 1자리가 제거 된) 가 있는 데 ”/“를 다시 추가한다.
bindElement 함수는 SAPUI5 컨트롤에 대한 바인딩 컨텍스트를 만들고 구성 개체의 항목에 대한 경로와 모델 이름을 받는다.
이렇게하면 인보이스 모델의 필드와 연결된 UI 컨트롤이 업데이트된다.
인보이스 목록에서 항목을 클릭하면 별도의 페이지에서 인보이스 세부 사항을 볼 수 있다.
Conventions
- App Descriptor에서 라우팅 구성을 정의하는것을 권장한다.
Related Information
