sapui5 walkthrough 21-25

時間  2019-11-18
標籤 sapui5 sapui walkthrough 简体版
原文   原文鏈接

Step 21: Data Types

設置文字列的格式。javascript

修改InvoiceList.view.xmljava

<mvc:View
   controllerName="sap.ui.demo.walkthrough.controller.InvoiceList"
   xmlns="sap.m"
   xmlns:mvc="sap.ui.core.mvc">
   <List
      headerText="{i18n>invoiceListTitle}"
      class="sapUiResponsiveMargin"
      width="auto"
      items="{invoice>/Invoices}">
      <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}"/>
    </items>
   </List>
</mvc:View>

向ObjectListItem中添加number和numberUnit屬性，而後經過指定number的type，將貨幣數據類型應用於該數字。json

咱們對number屬性，使用了一種特殊的綁定語法，這種綁定語法被稱爲"Calculated Fields"，容許來自多個模型的多個屬性，綁定到控件的單個屬性。mvc

來自不一樣模型的屬性被稱爲"parts"，在這個例子中，控件的屬性是number，從兩個不一樣模型中檢索，綁定到parts是invoice>ExtendedPrice和view>/currency。app

咱們但願用歐元來顯示價格，一般貨幣單位是數據模型的一部分。可是在咱們的例子中，則不是這樣的，因此咱們須要定義貨幣單位。爲該view新建一個controller，並設置貨幣單位做爲parts的第二部分。ide

Currency type 會根據貨幣類型來幫助咱們處理價格的格式。這裏價格顯示爲2位小數。函數

以後將showMeasure設置爲false，他會隱藏number中的貨幣單位，而使用numberUnit這個屬性。ui

新建InvoiceList.controller.jsthis

sap.ui.define([ "sap/ui/core/mvc/Controller", "sap/ui/model/json/JSONModel" ], function (Controller, JSONModel) { "use strict"; return Controller.extend("sap.ui.demo.walkthrough.controller.InvoiceList", { onInit : function () { var oViewModel = new JSONModel({ currency: "EUR" }); this.getView().setModel(oViewModel, "view"); } }); });

設置貨幣的單位爲EUR。spa

 

 

若是將貨幣單位設置爲：JPY，那麼將不會顯示兩位小數，由於日元沒有小數，若是將showMeasure設置爲true，而且刪除numberUnit屬性，那麼金額的顯示，會變的不一樣。

 

 

Step 22: Expression Binding

能夠經過表達式來格式化數據。

修改InvoiceList.view.xml

<mvc:View
controllerName="sap.ui.demo.walkthrough.controller.InvoiceList"
xmlns="sap.m"
   xmlns:mvc="sap.ui.core.mvc">
   <List
      headerText="{i18n>invoiceListTitle}"
      class="sapUiResponsiveMargin"
      width="auto"
      items="{invoice>/Invoices}" >
      <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' }"/>
      </items>
   </List>
</mvc:View>

這裏用表達式來格式化數據的顯示，須要用括號內的=來開頭，這裏做了一個判斷，大於50，顯示紅色，不然爲藍色。

 

 

只在一些不重要的計算中，使用表達式。

Step 23: Custom Formatters

自定義格式化。

新建formatter.js

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; } } }; });

建立一個新的文件夾model，新的formatter文件放在model文件夾中，formatter將處理數據屬性，並將其格式化以便在ui上進行顯示。

此次咱們不擴展任何對象，只返回一個javascript對象，並在sap.ui.define被調用的時候，使用formatter函數。

statusText函數從i18n中讀取信息，並返回給頁面。

修改InvoiceList.controller.js

sap.ui.define([
    "sap/ui/core/mvc/Controller",
    "sap/ui/model/json/JSONModel", "../model/formatter"
], function (Controller, JSONModel, formatter) {
    "use strict";
    return Controller.extend("sap.ui.demo.walkthrough.controller.InvoiceList", {
        formatter: formatter,
        onInit : function () {
            var oViewModel = new JSONModel({
                currency: "EUR"
            });
            this.getView().setModel(oViewModel, "view");
        }
    });
});

向controller中添加，依賴formatter model。並將formatter存儲在本地的屬性formatter中，以即可以利用他。

修改InvoiceList.view.xml

<mvc:View
    controllerName="sap.ui.demo.walkthrough.controller.InvoiceList"
    xmlns="sap.m"
    xmlns:mvc="sap.ui.core.mvc">
    <List
            headerText="{i18n>invoiceListTitle}"
        class="sapUiResponsiveMargin"
        width="auto"
        items="{invoice>/Invoices}">
        <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' }">
                <firstStatus>
                    <ObjectStatus text="{ path: 'invoice>Status', formatter: '.formatter.statusText' }"/>
                </firstStatus>
            </ObjectListItem>
        </items>
    </List>
</mvc:View>

添加一個firstStatus的aggregation 用來顯示狀態，自定義的formatter函數經過保留屬性formatter來進行綁定，"."開頭表示在當前的controller中尋找該函數，由於咱們以前定義了formatter屬性來存放formatter函數，因此這裏用.formatter.statusText來進行查找。

修改i18.properties

 

# App Descriptor
appTitle=Hello World
appDescription=A simple walkthrough app that explains the most important concepts of SAPUI5

# Hello Panel
showHelloButtonText=Say Hello
helloMsg=Hello {0}
homePageTitle=Walkthrough
helloPanelTitle=Hello World
openDialogButtonText=Say Hello With Dialog
dialogCloseButtonText=Ok

# Invoice List invoiceListTitle=Invoices invoiceStatusA=New invoiceStatusB=In Progress invoiceStatusC=Done

 

目錄結構

 

 

Step 24: Filtering

添加搜索過濾

修改InvoiceList.view.xml

<mvc:View
   controllerName="sap.ui.demo.walkthrough.controller.InvoiceList"
   xmlns="sap.m"
   xmlns:mvc="sap.ui.core.mvc">
   <List
      id="invoiceList"
      class="sapUiResponsiveMargin"
      width="auto"
      items="{invoice>/Invoices}" >
      <headerToolbar>
         <Toolbar>
            <Title text="{i18n>invoiceListTitle}"/>
            <ToolbarSpacer/>
            <SearchField width="50%" search=".onFilterInvoices"/>
         </Toolbar>
      </headerToolbar>
      <items>
         <ObjectListItem>
        …
         </ObjectListItem/>
      </items>
   </List>
</mvc:View>

對當前的list進行擴展，添加一個用於檢索的控件，爲list設置id，以便添加的檢索控件中的onFilterInvoices函數能夠識別該列表。

使用headerToolbar aggregation替換以前的title控件，使list更加的靈活。

修改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", {
        formatter: formatter, 
        onInit : function () {
            var oViewModel = new JSONModel({
                currency: "EUR"
            });
            this.getView().setModel(oViewModel, "view");
        }, onFilterInvoices : function (oEvent) { // build filter array
            var aFilter = []; var sQuery = oEvent.getParameter("query"); if (sQuery) { aFilter.push(new Filter("ProductName", FilterOperator.Contains, sQuery)); } // filter binding
            var oList = this.byId("invoiceList"); var oBinding = oList.getBinding("items"); oBinding.filter(aFilter); }
    });
});

咱們須要添加兩個新的依賴，Filter對象保持filter操做的配置，FilterOperator爲了指定filter使用的helper type。

在onFilterInvoices中，建立一個過濾器對象，經過oEvent.getParameter("query");來獲取頁面search field中輸入的字符串。

這裏只搜索ProductName，並指定FilterOperator。

經過當前byId獲取到當前的控件，以後咱們訪問aggregation items，使用filter對他進行過濾。

 

Step 25: Sorting and Grouping

排序與分組

修改InvoiceList.view.xml

<mvc:View
   controllerName="sap.ui.demo.walkthrough.controller.InvoiceList"
   xmlns="sap.m"
   xmlns:mvc="sap.ui.core.mvc">
   <List
      id="invoiceList"
      class="sapUiResponsiveMargin"
      width="auto" items="{ path : 'invoice>/Invoices', sorter : { path : 'ProductName' } }" >
      <headerToolbar>
         ...
      </headerToolbar>
      <items>
         ...
      </items>
   </List>
</mvc:View>

添加排序，讓items以ProductName進行排序。

修改InvoiceList.view.xml

<mvc:View
controllerName="sap.ui.demo.walkthrough.controller.InvoiceList"
xmlns="sap.m"
xmlns:mvc="sap.ui.core.mvc">
<List
        id="invoiceList"
        class="sapUiResponsiveMargin"
        width="auto"
        items="{ path : 'invoice>/Invoices', sorter : { path : 'ShipperName', group : true }
        }">
    <headerToolbar>
        <Toolbar>
            <Title text="{i18n>invoiceListTitle}"/>
            <ToolbarSpacer/>
            <SearchField width="50%" search=".onFilterInvoices"/>
        </Toolbar>
    </headerToolbar>
    <items>
        …
    </items>
</List>
</mvc:View>

使用ShipperName進行排序，而且進行分組。

 

 

Additionally, we set the formatting option 

showMeasure

 to 

false

. This hides the currency code in the property 

number

, because it is passed on to the 

ObjectListItem

 control as a separate property 

numberUnit

.

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程