Set Up the Initial App
本例中导航架构如下
Enable Routing
在manifest.json中添加routing配置
"routing": {
"config": {
"routerClass": "sap.m.routing.Router",
"viewType": "XML",
"viewPath": "sap.ui.demo.nav.view",
"controlId": "app",
"controlAggregation": "pages",
"transition": "slide"
},
"routes": [{
"pattern": "",
"name": "appHome",
"target": "home"
}],
"targets": {
"home": {
"viewName": "Home",
"viewLevel" : 1
}
}
}
Component.js文件中，init方法中，this.getRouter().initialize();进行初始化，在App view中，添加<App id="app"/>将其设为rootView。创建Home View。
Catch Invalid Hashes
在manifest.json文件的routing config中，添加"bypassed": { "target": "notFound" }，在target中，添加"notFound": { "viewName": "NotFound", "transition": "show" }
创建NotFound view，用MessagePage 控件显示错误信息。URL中的无效值，将会被导航到这个页面。
Add a Back Button to Not Found Page
在NotFound view上显示NavButton并添加事件，创建BaseController.js模块，引入Controller及History依赖，实现onNavBack方法。controller定义时都继承自这个模块
sap.ui.define([
"sap/ui/demo/nav/controller/BaseController"
], function (BaseController) {
"use strict";
return BaseController.extend("sap.ui.demo.nav.controller.App", {
onInit: function () {
}
});
});
Display a Target Without Changing the Hash
给Home view的button控件添加press事件，在controller中实现该方法，此处可以this.getRouter()获取router，也可以this.getOwnerComponent().getRouter().getTargets()或者this.getOwnerComponent().getTargets().
onDisplayNotFound : function (oEvent) {
//display the "notFound" target without changing the hash
this.getRouter().getTargets().display("notFound");
此时点击按钮可以导航到NotFound。但此处有个Bug，由于Route的机制，当检测到Hash没有发生变化时，系统自动跳过Navigation的操作。由于sPreviousHash为空，系统执行this.getRouter().navTo("appHome", {}, true /*no history*/);由于Hash没变，系统跳过navTo，页面没有发生跳转。可以在display方法第二个参数传一个data对象，里面包含了来源target
this.getRouter().getTargets().display("notFound", {
fromTarget : "home"
})
给notFound target的 display事件注册一个监听器，最合适的是放在NotFound controller 的init function中，oTarget.attachDisplay(function (oEvent) {this._oData = oEvent.getParameter("data"); }, this);获取前面传入的data对象，在onNavBack中，如果这个data对象有值，则通过display的方法来显示，并删除对象里面的值。
if (this._oData && this._oData.fromTarget) {
this.getRouter().getTargets().display(this._oData.fromTarget);
delete this._oData.fromTarget;
return;
}
Navigate to Routes with Hard-Coded Patterns
在Home页面中添加Button，导航到employeeList target，在manifest中添加employeeList的route与target，target "viewPath": "sap.ui.demo.nav.view.employee",会在这个目录下寻找。"pattern": "employees",表示hash为/#/employees。创建EmployeeList View。
Navigate to Routes with Mandatory Parameters
添加Route "pattern": "employees/{employeeId}", Target"viewName": "employee.Employee",创建Employee view及controller，在onInit中，oRouter.getRoute("employee").attachMatched(this._onRouteMatched, this);添加url匹配的监听器，调用onRouteMatched方法。在URL中获取employeeId并绑定到Element，ODataModel 将在后台处理数据请求. 当数据加载时, 显示busy的标记，可以在dataRequested及dataReceived事件中处理。在change事件中，判断能否加载binding context的数据。
_onRouteMatched : function (oEvent) {
var oArgs, oView;
oArgs = oEvent.getParameter("arguments");
oView = this.getView();
oView.bindElement({
path : "/Employees(" + oArgs.employeeId + ")",
events : {
change: this._onBindingChange.bind(this),
dataRequested: function (oEvent) {
oView.setBusy(true);
},
dataReceived: function (oEvent) {
oView.setBusy(false);
}
}
});
},
_onBindingChange : function (oEvent) {
// No data for the binding
if (!this.getView().getBindingContext()) {
this.getRouter().getTargets().display("notFound");
}
}
EmployeeList中给item加上press事件，带参数employeeId导航到employee。
onListItemPressed : function(oEvent){
var oItem, oCtx;
oItem = oEvent.getSource();
oCtx = oItem.getBindingContext();
this.getRouter().navTo("employee",{
employeeId : oCtx.getProperty("EmployeeID")
});
Navigate with Flip Transition
在employee上添加<Link text="{i18n>FlipToResume}" tooltip="{i18n>FlipToResume.tooltip}" press="onShowResume" />，配置employeeResume "pattern": "employees/{employeeId}/resume"，设置employeeResume target "transition": "flip"，transition有slide (default)，flip，show，fade四种形式。
Allow Bookmarkable Tabs with Optional Query Parameters
修改employeeResume route为"pattern": "employees/{employeeId}/resume:?query:"，在Resume View的IconTabBar添加属性select="onTabSelect" selectedKey="{view>/selectedTabKey}"，当一个Tab被选中，会调用onTabSelect，除了employeeId外还添加一个query参数。
onTabSelect : function (oEvent){
var oCtx = this.getView().getBindingContext();
this.getRouter().navTo("employeeResume", {
employeeId : oCtx.getProperty("EmployeeID"),
query: {
tab : oEvent.getParameter("selectedKey")
}
}, true /*without history*/);
}
建立aValidTabKeys数组，其值为IconTabBar中items中的Key，建立oQuery对象存储router中query对象的值，oQuery对象有值并且是一个有效的tab值，设置selectedTabKey为oQuery对象中的tab，否则query为第一个值。URL形式如下webapp/index.html#/employees/3/resume?tab=Info
Implement “Lazy Loading”
Resume.view.xml中，将IconTabFilter中，Hobbies/Notes的内容设为空，通过Lazy Loading加载。新建ResumeHobbies及ResumeNotes view，如果tab为Hobbies及Notes this.getRouter().getTargets().display("resumeTab" + oQuery.tab);，创建target
"resumeTabHobbies": {
"parent": "employeeResume",
"viewPath": "sap.ui.demo.nav.view.employee",
"viewName": "ResumeHobbies",
"viewId": "thisIsMyCustomIdToBeUsedForResumeHobbies",
"controlId": "hobbiesTab",
"controlAggregation": "content"
},
"resumeTabNotes": {
"parent": "employeeResume",
"viewPath": "sap.ui.demo.nav.view.employee",
"viewName": "ResumeNotes",
"controlId": "notesTab",
"controlAggregation": "content"
}
Assign Multiple Targets
在Home上新建button导航到employeeOverview，配置route及target，注意配置在employee前面，否则将会匹配"employees/{employeeId}"。
//routes
{
"pattern": "employees/overview",
"name": "employeeOverview",
"target": ["employeeOverviewTop", "employeeOverviewContent"]
},
//Target
"employeeOverview": {
"viewPath": "sap.ui.demo.nav.view.employee.overview",
"viewName": "EmployeeOverview",
"viewLevel" : 2
},
"employeeOverviewTop": {
"parent": "employeeOverview",
"viewPath": "sap.ui.demo.nav.view.employee.overview",
"viewName": "EmployeeOverviewTop",
"controlId": "EmployeeOverviewParent",
"controlAggregation": "content"
},
"employeeOverviewContent": {
"parent": "employeeOverview",
"viewPath": "sap.ui.demo.nav.view.employee.overview",
"viewName": "EmployeeOverviewContent",
"controlId": "EmployeeOverviewParent",
"controlAggregation": "content"
}
创建EmployeeOverview.view.xml，指定Page id为 "EmployeeOverviewParent"，即target中controlId的内容。content将会被router用top 和 content 填充。
网友评论