IT干货网

UI5-文档-4.21-Data Types

itxm 2022年03月09日 SAP 197 0

发票清单已经很好看了,但是没有指定价格的发票是什么?通常价格以技术格式存储,并带有'。数据模型中的分隔符。例如,我们的菠萝发票上的计算价格是87.2,没有货币。我们将使用SAPUI5数据类型正确地格式化价格,使用一个与区域有关的十进制分隔符和分隔符后的两个数字。

Preview

 

The list of invoices with prices and number units

Coding

You can view and download all files at Walkthrough - Step 21.

 

webapp/view/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}"/> 
 
        </items> 
 
   </List> 
 
</mvc:View>

通过将number和numberUnit属性添加到ObjectListItem控件,我们将价格添加到视图中的发票列表中,然后通过将绑定语法的type属性设置为sap.ui.model.type.Currency,将货币数据类型应用到number上。

正如您在上面看到的,我们正在为ObjectListItem的number属性使用一种特殊的绑定语法。这种绑定语法使用了所谓的“Calculated Fields”,它允许将来自不同模型的多个属性绑定到控件的单个属性。来自不同模型的属性称为“parts”。 在上面的例子中,控件的属性是number,从两个不同模型检索到的绑定属性(“parts”)是invoice>ExtendedPrice和view>/currency。

我们希望以欧元显示价格,通常在后端,货币是我们数据模型的一部分。在我们的例子中并非如此,所以我们需要在app中直接定义它。因此,我们为发票列表添加了一个控制器,并使用currency属性作为绑定语法的第二部分。货币类型将根据货币代码为我们处理价格的格式。在我们的例子中,价格显示为两个小数。

此外,我们将格式化选项showMeasure设置为false。这隐藏了属性号中的货币代码,因为它作为一个单独的属性number单元传递给ObjectListItem控件。

webapp/controller/InvoiceList.controller.js (New)

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

为了能够访问不属于数据模型的货币代码,我们在发票列表的控制器中定义了一个视图模型。它是一个简单的JSON模型,只有一个关键货币和值EUR。这可以绑定到number字段的格式化程序。视图模型可以保存分配给控件的任何配置选项,以绑定诸如可见性之类的属性。

Conventions

  尽可能使用数据类型而不是自定义格式器。


Parent topic: Walkthrough

Previous: Step 20: Aggregation Binding

Next: Step 22: Expression Binding

Related Information

Composite Binding

Formatting, Parsing, and Validating Data

API Reference: sap.ui.model.type

API Reference: sap.ui.model.type.Currency

Samples: sap.ui.model.type.Currency


评论关闭
IT干货网

微信公众号号:IT虾米 (左侧二维码扫一扫)欢迎添加!