Step 30: Routing and Navigation

Step 30: Routing and Navigation

https://openui5.hana.ondemand.com/topic/e5200ee755f344c8aef8efcbab3308fb

到目前为止，app里只有一个页面，这里加一个详细的页面，需要使用到router和Navigation

现在是在manifest.json里指定了rootview，并且在rootview里直接调用其他的view。
这次的目的是要根据用户输入的URL的不同，去访问不同的view。

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"
	  },
	  "routes": [
		{
		  "pattern": "",
		  "name": "overview",
		  "target": "overview"
		},
		{
		  "pattern": "detail",
		  "name": "detail",
		  "target": "detail"
		}
	  ],
	  "targets": {
		"overview": {
		  "viewId": "overview",
		  "viewName": "Overview"
		},
		"detail": {
		  "viewId": "detail",
		  "viewName": "Detail"
		}
	  }
	}
  }
}

• config ：指明用哪个class做router，指明view的种类，指明router对应的view里的控件的id
  routerClass：指明用哪个class做router
  viewType：指明view的种类
  controlId：router对应的view里的控件的id
  controlAggregation：？

• routes：每条router都定义了一个名称、一个模式和一个或多个目标view，以便在router被命中时导航到这些目标view。所谓模式基本上是去匹配的URL，输入的URL里有定义的router的name就是命中。我们为应用程序定义了两个router。第一个router的模式是""，也就是说当别的router都没匹配上的时候，就匹配到它了，命中后它将显示一览页面，第二个router是的模式是detail，当输入的URL里有detail的时候，它就被命中了。
  pattern:模式
  name: 名称
  target: 目标的命中，命中后，有此名字去target section里去找对应的view。

• targets ： 目标定义显示的view，它与一条或多条router关联，而且也可以从应用程序中手动加载view。无论何时显示目标，相应的view都会加载并显示在应用程序中。
  viewId：具体哪个view

webapp/Component.js

sap.ui.define([
   "sap/ui/core/UIComponent",
   "sap/ui/model/json/JSONModel"
], function (UIComponent, JSONModel) {
   "use strict";

   return UIComponent.extend("sap.ui.demo.walkthrough.Component", {

   	metadata: {
   		interfaces: ["sap.ui.core.IAsyncContentCreation"],
   		manifest: "json"
   	},

   	init: function () {
   		// call the init function of the parent
   		UIComponent.prototype.init.apply(this, arguments);

   		// set data model
   		var oData = {
   			recipient: {
   				name: "World"
   			}
   		};
   		var oModel = new JSONModel(oData);
   		this.setModel(oModel);

   		// create the views based on the url/hash
   		this.getRouter().initialize();
   	}

   });

});

this.getRouter().initialize()：调用初始化router的方法，它会根据manifest.json的router定义去初始化。初始化的同时，它也会看当前的URL，根据URL的去命中相应的router，再有router找到target，最后找到要加载的目标view。

webapp/view/Overview.view.xml (New)

<mvc:View
		controllerName="sap.ui.demo.walkthrough.controller.App"
		xmlns="sap.m"
		xmlns:mvc="sap.ui.core.mvc">
	<Page title="{i18n>homePageTitle}">
		<headerContent>
			<Button
					icon="sap-icon://hello-world"
					press=".onOpenDialog"/>
		</headerContent>
		<content>
			<mvc:XMLView viewName="sap.ui.demo.walkthrough.view.HelloPanel"/>
			<mvc:XMLView viewName="sap.ui.demo.walkthrough.view.InvoiceList"/>
		</content>
	</Page>
</mvc:View>

把App view的代码拷贝到Overview.view.xml里。为了简单起见，不改变此view对应的controller，还是使用App view的controller。目的是为了reuse打开对话框相关的代码。

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">
<Shell>
	<App class="myAppDemoWT" id="app"/>
</Shell>
</mvc:View>

现在App view只包含一个空的app tag。router会根据URL自动替换掉这里的空的app tag。在manifest.json里定义router的地方，controlId: “app”里的app对应的就是这里空app tag里的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>

这是详细页面，只显示静态的Invoice文字。

webapp/i18n/i18n.properties

…
# 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>

type="Navigation":让明细变成可以点击的状态。
press="onPress"：加了一个点击事件。

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 oRouter = this.getOwnerComponent().getRouter();
			oRouter.navTo("detail");
		}
	});

});

先得到router，然后调用navTo方法，迁移页面。detail是router里的pattern，对应的是target是detail，对应的view是Detail，也就是Detail.view.xml

约定：在manifest.json里定义router

vx:xiaoshitou5854