到目前为止，我们已经把所有的应用程序内容放在一个页面上。随着我们添加越来越多的特性，我们希望将内容拆分并将其放在不同的页面上。
在这一步中，我们将使用SAPUI5导航特性加载并显示一个单独的详细信息页面，稍后我们可以使用该页面显示发票的详细信息。在前面的步骤中，我们直接在app视图中定义了页面，以便在加载app时显示页面。现在我们将使用SAPUI5 router类来加载页面并自动更新URL。我们为应用程序指定路由配置，并为应用程序的每个页面创建单独的视图，然后通过触发导航事件连接视图。
Preview
A second page is added to display the invoice
Coding
You can view and download all files at Walkthrough - Step 31.
webapp/manifest.json
{
"_version": "1.12.0",
…
"sap.ui5": {
…
"models": {
…
},
"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",
"name":"detail",
"target":"detail"
}
],
"targets":{
"overview":{
"viewID":"overview",
"viewName":"Overview"
},
"detail":{
"viewId":"detail",
"viewName":"Detail"
}
}
}
}
}
config我们向描述符的sap.ui5部分添加了一个新的“routing”部分。定义app的路由和导航结构有三个小节:
本节包含适用于所有路由和目标的全局路由器配置和默认值。我们定义我们想要使用的router类，以及视图位于app中的位置。为了自动加载和显示视图，我们还指定了用于显示页面的控件以及在显示新页面时应该填充哪些聚合。
routes
每个路由定义一个名称、一个模式和一个或多个目标，以便在路由被命中时导航到这些目标。模式基本上是与路由匹配的URL部分，我们为app定义了两条路由。第一个是默认路由，它将显示概述页面和前面步骤中的内容，第二个是详细路由，它具有URL模式详细信息，将显示一个新页面。
targets
目标定义了一个显示的视图，它与一个或多个路由相关联，也可以从应用程序内部手动显示。每当显示一个目标时，相应的视图就被加载并显示在应用程序中。在我们的应用程序中，我们简单地定义了两个具有与目标名称相对应的视图名称的目标。
webapp/Component.js
sap.ui.define([ "sap/ui/core/UIComponent", "sap/ui/model/json/JSONModel", "sap/ui/demo/walkthrough/controller/HelloDialog" ], function (UIComponent, JSONModel, HelloDialog) { "use strict"; return UIComponent.extend("sap.ui.demo.walkthrough.Component", { metadata: { manifest: "json" }, init: function () { … // set dialog this._helloDialog = new HelloDialog(this.getRootControl()); // create the views based on the url/hash this.getRouter().initialize(); }, }); exit : function() { this._helloDialog.destroy(); delete this._helloDialog; }, openHelloDialog : function () { this._helloDialog.open(); } }); });
在组件初始化方法中，我们现在添加一个调用来初始化路由器。我们不需要手动实例化路由器，它是基于我们的AppDescriptor配置自动实例化并分配给组件的。
初始化路由器将计算当前URL并自动加载相应的视图。这是在AppDescriptor中配置的路由和目标的帮助下完成的。如果某个路由被命中，则加载并显示其对应目标的视图。
webapp/view/Overview.view.xml (New)
<mvc:View controllerName="sap.ui.demo.walkthrough.controller.App" xmlns="sap.m" xmlns:mvc="sap.ui.core.mvc"> <Pagetitle="{i18n>homePageTitle}"> <headerContent> <Button icon="sap-icon://hello-world" press="onOpenDialog"/> </headerContent> <content> <mvc:XMLViewviewName="sap.ui.demo.walkthrough.view.HelloPanel"/> <mvc:XMLViewviewName="sap.ui.demo.walkthrough.view.InvoiceList"/> </content> </Page> </mvc:View>
我们将前面步骤的内容从App视图移动到一个新的Overview视图。为简单起见，我们不更改控制器，因为它只包含打开对话框的helper方法，这意味着我们将controller sa .ui.demo.walk .controller. app用于两个不同的视图(用于新的概览和app视图)。但是，该控制器的两个实例在运行时实例化。通常，为引用控制器的每个视图实例化控制器的一个实例。
webapp/view/App.view.xml
<mvc:View controllerName="sap.ui.demo.walkthrough.controller.App" xmlns="sap.m" xmlns:mvc="sap.ui.core.mvc" displayBlock="true"> <Appclass="myAppDemoWT"id="app"/> </mvc:View>
我们的App视图现在只包含空的App标签。路由器会自动将与当前URL相对应的视图添加到app控件中。路由器用与AppDescriptor中的属性controlId相对应的ID标识应用程序控件:“app”。
webapp/view/Detail.view.xml (New)
<mvc:View xmlns="sap.m" xmlns:mvc="sap.ui.core.mvc"> <Page title="{i18n>detailPageTitle}"> <ObjectHeader title="Invoice"/> </Page> </mvc:View>
webapp/i18n/i18n.properties现在我们为detail视图添加第二个视图。它只包含一个页面和一个ObjectHeader控件，该控件目前显示静态文本发票。
…
# Invoice List
invoiceListTitle=Invoices
invoiceStatusA=New
invoiceStatusB=In Progress
invoiceStatusC=Done
# Detail Page
detailPageTitle=Walkthrough - Details
我们为详细页标题向资源包添加一个新字符串。
webapp/view/InvoiceList.view.xml
<mvc:View controllerName="sap.ui.demo.walkthrough.controller.InvoiceList" xmlns="sap.m" xmlns:mvc="sap.ui.core.mvc"> <List …> … <items> <ObjectListItem title="{invoice>Quantity} x {invoice>ProductName}" number="{ parts: [{path: 'invoice>ExtendedPrice'}, {path: 'view>/currency'}], type: 'sap.ui.model.type.Currency', formatOptions: { showMeasure: false } }" numberUnit="{view>/currency}" numberState="{= ${invoice>ExtendedPrice} > 50 ? 'Error' : 'Success' }" type="Navigation" press="onPress"> <firstStatus> <ObjectStatus text="{ path: 'invoice>Status', formatter: '.formatter.statusText' }"/> </firstStatus> </ObjectListItem> </items> </List> </mvc:View>
在invoice list视图中，我们向列表项添加了一个press事件，并将项目类型设置为导航，以便可以实际单击该项目。
webapp/controller/InvoiceList.controller.js
sap.ui.define([
"sap/ui/core/mvc/Controller",
"sap/ui/model/json/JSONModel",
"sap/ui/demo/walkthrough/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 oRouter = sap.ui.core.UIComponent.getRouterFor(this);
oRouter.navTo("detail");
}
});
});
我们将事件处理程序函数添加到发票列表的控制器中。现在可以通过单击发票列表中的项目导航到详细信息页面。我们通过调用helper方法sap.ui.core.UIComponent.getRouterFor(this)来访问应用程序的router实例。在路由器上，我们调用navTo方法来导航到路由配置中指定的详细路由。
当您单击发票列表中的项目时，现在应该会看到详细信息页面。
Conventions
在描述符中定义路由配置
Parent topic: Walkthrough
Previous: Step 30: Debugging Tools
Next: Step 32: Routing with Parameters
Related Information
Tutorial: Navigation and Routing