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