UI5_Walkthrough_3

Aggregation Binding

创建Invoices.json文件

{
  "Invoices": [
    {
      "ProductName": "Pineapple",
      "Quantity": 21,
      "ExtendedPrice": 87.2000,
      "ShipperName": "Fun Inc.",
      "ShippedDate": "2015-04-01T00:00:00",
      "Status": "A"
    },
    ......
  ]
}

将invoice添加到manifest.json的models中

      "invoice": {
        "type": "sap.ui.model.json.JSONModel",
        "uri": "Invoices.json"
      }

新建InvoiceList.view.xml，并在app view中通过绑定，添加List，items为invoice Model下/Invoices，items的title为Quantity x ProductName

Data Types

指定invoicelist的controller，在controller的onInit事件中，添加JSONModel{currency: "EUR"}，并绑定到Model this.getView().setModel(oViewModel, "view");。在ObjectListItem中添加number与numberUnit属性，number使用Calculated Fields语法，type为sap.ui.model.type.Currency金额类型，需要两个parts，分别为金额和单位，在number属性中我们不显示单位，因此设置formatOptions: {showMeasure: false}

Expression Binding

在ObjectListItem中添加numberState属性，将其定义为三元表达式numberState="{= ${invoice>ExtendedPrice} > 50 ? 'Error' : 'Success' }"/>，表达式可以用{=expression}来表示，式中${invoice>ExtendedPrice}取出ExtendedPrice的值。

Custom Formatters

定义formatter.js模块，返回status text

sap.ui.define([], function () {
    "use strict";
    return {
        statusText: function (sStatus) {
            var resourceBundle = this.getView().getModel("i18n").getResourceBundle();
            switch (sStatus) {
                case "A":
                    return resourceBundle.getText("invoiceStatusA");
                case "B":
                    return resourceBundle.getText("invoiceStatusB");
                case "C":
                    return resourceBundle.getText("invoiceStatusC");
                default:
                    return sStatus;
            }
        }
    };
});

在InvoiceList controller中，引入formatter.js模块依赖，定义formatter事件formatter: formatter,在ObjectListItem中添加标签，在ObjectStatus中定义formatter为'.formatter.statusText'，表示当前controller下的formatter，并调用statusText

Filtering

给list一个idid="invoiceList"，添加headertoolbar，加入搜索框，添加onFilterInvoices事件。