Routing and Navigation

在manifest.json中配置routing，config中配置全局信息，routes中配置url匹配，targets中配置target對(duì)應(yīng)的view

    "routing": {
      "config": {
        "routerClass": "sap.m.routing.Router",
        "viewType": "XML",
        "viewPath": "sap.ui.demo.wt.view",
        "controlId": "app",
        "controlAggregation": "pages"
      },
      "routes": [
        {
          "pattern": "",
          "name": "overview",
          "target": "overview"
        },
        {
          "pattern": "detail",
          "name": "detail",
          "target": "detail"
        }
      ],
      "targets": {
        "overview": {
          "viewName": "Overview"
        },
        "detail": {
          "viewName": "Detail"
        }
      }
    }

Component.js中，在init事件中this.getRouter().initialize();進(jìn)行初始化。
創(chuàng)建Overview.view.xml，將原來(lái)app view中的page內(nèi)容搬過(guò)來(lái)，controller可以還是指定原來(lái)的app controller，由于兩個(gè)view引用了這個(gè)controller，會(huì)創(chuàng)建兩個(gè)實(shí)例。
App.view.xml中，指定<App class="myAppDemoWT" id="app"/> id為 manifest.json中controlId。
創(chuàng)建Detail View。
InvoiceList.view.xml中ObjectListItem增加屬性type="Navigation" press="onPress"。
InvoiceList.controller.js中增加onPress事件的實(shí)現(xiàn)，sap.ui.core.UIComponent.getRouterFor(this)獲取manifest.json中配置routing，navTo方法指向配置的route。

onPress: function (oEvent) {
    var oRouter = sap.ui.core.UIComponent.getRouterFor(this);
    oRouter.navTo("detail");
}

Routing with Parameters

將detail的pattern改為"pattern": "detail/{invoicePath}"傳入invoicePath。Detail view中用title="{invoice>ProductName}"訪問(wèn)invoice Model中的內(nèi)容。
InvoiceList.controller.js的onPress事件中，oEvent.getSource();獲取觸發(fā)事件的對(duì)象，getBindingContext("invoice")獲取invoice Model的BindingContext，getPath().substr(1)獲取path并去掉前面的斜杠。path的形式為/Invoices(ProductName='Bread',Quantity=1,ShipperName='Fun%20Inc.')

Routing Back and History

在Detail view上顯示NavButton并注冊(cè)onNavBack事件，在controller中，引入History依賴，獲取History的實(shí)例，getPreviousHash返回Hash或者undefined，window.history.go(-1)返回上一頁(yè)，navTo("overview", {}, true);導(dǎo)航到overview，參數(shù)為空，替換hash。

onNavBack: function () {
    var oHistory = History.getInstance();
    var sPreviousHash = oHistory.getPreviousHash();
    if (sPreviousHash !== undefined) {
        window.history.go(-1);
    } else {
        var oRouter = sap.ui.core.UIComponent.getRouterFor(this);
        oRouter.navTo("overview", {}, true);
    }
}

Custom Controls

定義一個(gè)ProductRating Control，創(chuàng)建/control/ProductRating.js文件，control的定義結(jié)構(gòu)如下，metadata定義control的API結(jié)構(gòu)，renderer定義渲染HTML結(jié)構(gòu)。

sap.ui.define([
    "sap/ui/core/Control"
], function (Control) {
    "use strict";
    return Control.extend("sap.ui.demo.wt.control.ProductRating", {
        metadata : {
        },
        init : function () {
        },
        renderer : function (oRM, oControl) {
        }
    });
});

metadata中，定義properties，添加value參數(shù)；定義aggregations，添加RatingIndicator/Label/Button 3個(gè)控件；events添加change事件。
init中，設(shè)置這3個(gè)aggregation控件，并定義他們的liveChange，press事件，press事件中可以通過(guò)fireEvent方法觸發(fā)change事件。重寫(xiě)setValue方法。
renderer 中oRM.write渲染html，addClass可以添加css class，添加后用writeClasses()渲染，writeControlData渲染id，renderControl渲染內(nèi)部控件。
在Detail view中通過(guò)xmlns:wt="sap.ui.demo.wt.control"引入，在頁(yè)面中<wt:ProductRating class="sapUiSmallMarginBeginEnd" change="onRatingChange"/>添加控件。

Responsiveness

將List改成Table，設(shè)置minScreenWidth="Small" demandPopin="true"可以在小屏幕時(shí)small方式顯示到行內(nèi)，設(shè)置minScreenWidth="Tablet" demandPopin="false"可以在小屏幕時(shí)不顯示。

Device Adaptation

在Panel上加屬性expandable="{device>/system/phone}" expanded="{= !${device>/system/phone} }">可以在手機(jī)上時(shí)折疊，button上添加class sapUiVisibleOnlyOnDesktop只在桌面顯示