Set Up the Initial App

本例中導(dǎo)航架構(gòu)如下

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"/>將其設(shè)為rootView。創(chuàng)建Home View。

Catch Invalid Hashes

在manifest.json文件的routing config中，添加"bypassed": { "target": "notFound" }，在target中，添加"notFound": { "viewName": "NotFound", "transition": "show" }
創(chuàng)建NotFound view，用MessagePage 控件顯示錯誤信息。URL中的無效值，將會被導(dǎo)航到這個頁面。

Add a Back Button to Not Found Page

在NotFound view上顯示NavButton并添加事件，創(chuàng)建BaseController.js模塊，引入Controller及History依賴，實現(xiàn)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中實現(xiàn)該方法，此處可以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");

此時點擊按鈕可以導(dǎo)航到NotFound。但此處有個Bug，由于Route的機制，當檢測到Hash沒有發(fā)生變化時，系統(tǒng)自動跳過Navigation的操作。由于sPreviousHash為空，系統(tǒng)執(zhí)行this.getRouter().navTo("appHome", {}, true /*no history*/);由于Hash沒變，系統(tǒng)跳過navTo，頁面沒有發(fā)生跳轉(zhuǎn)?？梢栽赿isplay方法第二個參數(shù)傳一個data對象，里面包含了來源target

this.getRouter().getTargets().display("notFound", {
                fromTarget : "home"
            })

給notFound target的 display事件注冊一個監(jiān)聽器，最合適的是放在NotFound controller 的init function中，oTarget.attachDisplay(function (oEvent) {this._oData = oEvent.getParameter("data"); }, this);獲取前面?zhèn)魅氲膁ata對象，在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，導(dǎo)航到employeeList target，在manifest中添加employeeList的route與target，target "viewPath": "sap.ui.demo.nav.view.employee",會在這個目錄下尋找。"pattern": "employees",表示hash為/#/employees。創(chuàng)建EmployeeList View。

Navigate to Routes with Mandatory Parameters

添加Route "pattern": "employees/{employeeId}", Target"viewName": "employee.Employee",創(chuàng)建Employee view及controller，在onInit中，oRouter.getRoute("employee").attachMatched(this._onRouteMatched, this);添加url匹配的監(jiān)聽器，調(diào)用onRouteMatched方法。在URL中獲取employeeId并綁定到Element，ODataModel 將在后臺處理數(shù)據(jù)請求. 當數(shù)據(jù)加載時, 顯示busy的標記，可以在dataRequested及dataReceived事件中處理。在change事件中，判斷能否加載binding context的數(shù)據(jù)。

_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事件，帶參數(shù)employeeId導(dǎo)航到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"，設(shè)置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被選中，會調(diào)用onTabSelect，除了employeeId外還添加一個query參數(shù)。

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數(shù)組，其值為IconTabBar中items中的Key，建立oQuery對象存儲router中query對象的值，oQuery對象有值并且是一個有效的tab值，設(shè)置selectedTabKey為oQuery對象中的tab，否則query為第一個值。URL形式如下webapp/index.html#/employees/3/resume?tab=Info

Implement “Lazy Loading”

Resume.view.xml中，將IconTabFilter中，Hobbies/Notes的內(nèi)容設(shè)為空，通過Lazy Loading加載。新建ResumeHobbies及ResumeNotes view，如果tab為Hobbies及Notes this.getRouter().getTargets().display("resumeTab" + oQuery.tab);，創(chuàng)建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導(dǎo)航到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"
}

創(chuàng)建EmployeeOverview.view.xml，指定Page id為 "EmployeeOverviewParent"，即target中controlId的內(nèi)容。content將會被router用top 和 content 填充。