SAP学习笔记 - 开发22 - 前端Fiori开发数据绑定（Jason），Data Types（数据类型）

{
    "Invoices": [
        {
            "ProductName": "Pineapple",
            "Quantity": 21,
            "ExtendedPrice": 87.2,
            "ShipperName": "Fun Inc.",
            "ShippedDate": "2015-04-01T00:00:00",
            "Status": "A"
        },
        {
            "ProductName": "Milk",
            "Quantity": 4,
            "ExtendedPrice": 10,
            "ShipperName": "ACME",
            "ShippedDate": "2015-02-18T00:00:00",
            "Status": "B"
        },
        {
            "ProductName": "Canned Beans",
            "Quantity": 3,
            "ExtendedPrice": 6.85,
            "ShipperName": "ACME",
            "ShippedDate": "2015-03-02T00:00:00",
            "Status": "B"
        },
        {
            "ProductName": "Salad",
            "Quantity": 2,
            "ExtendedPrice": 8.8,
            "ShipperName": "ACME",
            "ShippedDate": "2015-04-12T00:00:00",
            "Status": "C"
        },
        {
            "ProductName": "Bread",
            "Quantity": 1,
            "ExtendedPrice": 2.71,
            "ShipperName": "Fun Inc.",
            "ShippedDate": "2015-01-27T00:00:00",
            "Status": "A"
        }
    ]
}

Invoices：这是json文件里数据名，可以简单理解为DB的表名，那下面就是数据行和字段

2），manifest.json

复制代码

{
  "_version": "1.65.0",
  "sap.app": {
	"id": "ui5.walkthrough",
	"i18n": "i18n/i18n.properties",
	"title": "{{appTitle}}",
	"description": "{{appDescription}}",
	"type": "application",
	"applicationVersion": {
	  "version": "1.0.0"
	}
  },
  "sap.ui": {
	"technology": "UI5",
	"deviceTypes": {
		"desktop": true,
		"tablet": true,
		"phone": true
	}
  },
  "sap.ui5": {
	"dependencies": {
	  "minUI5Version": "1.108.0",
	  "libs": {
		"sap.ui.core": {},
		"sap.m": {}
	  }
	},
	"models": {
	  "i18n": {
		"type": "sap.ui.model.resource.ResourceModel",
		"settings": {
		  "bundleName": "ui5.walkthrough.i18n.i18n",
		  "supportedLocales": [""],
		  "fallbackLocale": ""
		}
	  },
      "invoice": {
        "type": "sap.ui.model.json.JSONModel",
        "uri": "Invoices.json"
      }
	},
	"rootView": {
		"viewName": "ui5.walkthrough.view.App",
		"type": "XML",
		"id": "app"
	},
	"resources": {
	  "css": [
		{
		  "uri": "css/style.css"
		}
	  ]
	}
  }
}

"invoice": { =》这是view里面使用的model 名称
"type": "sap.ui.model.json.JSONModel", =》这个说的是数据源的类型
"uri": "Invoices.json" =》这个和Type配套，指向的jason文件的路径（当前文件同路径）和名称

"invoice": {

"type": "sap.ui.model.json.JSONModel",

"uri": "Invoices.json"

}

将来等连接DB的时候，这里会改成SAP提供的API(Odata）

3），InvoiceList.view.xml

复制代码

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

这个视图说的是把Invoices.json里的内容给通过List展示出来

items="{invoice>/Invoices}" >

invoice 如前述，是manifest.json 里面说的是model 名

> 可以理解为下级访问符

/Invoices =》/ 是绝对路径，Invoices 是 Invoices.json文件里面的名叫 Invoices(表名)的数据

title="{invoice>Quantity} x {invoice>ProductName}"/>

这个是个简写，完整写法是 invoice>/Invoices>Quantity，为了简略化，把>/Invoices 给省去了

<List

headerText="{i18n>invoiceListTitle}"

class="sapUiResponsiveMargin"

width="auto"

items="{invoice>/Invoices}" >

<items>

<ObjectListItem

title="{invoice>Quantity} x {invoice>ProductName}"/>

</items>

</List>

4），App.view.xml

复制代码

<mvc:View
	controllerName="ui5.walkthrough.controller.App"
	xmlns="sap.m"
	xmlns:mvc="sap.ui.core.mvc"
	displayBlock="true">
	<Shell>
		<App class="myAppDemoWT">
			<pages>
				<Page title="{i18n>homePageTitle}">
					<content>
						<mvc:XMLView viewName="ui5.walkthrough.view.HelloPanel"/>
						<mvc:XMLView viewName="ui5.walkthrough.view.InvoiceList"/>
					</content>
				</Page>
			</pages>
		</App>
	</Shell>
</mvc:View>

<mvc:XMLView viewName="ui5.walkthrough.view.InvoiceList"/>

这个是嵌套视图，这样就把 InvoiceList.view.xml 视图给加进来了，还是很方便的哈

SAP学习笔记 - 开发20 - 前端Fiori开发 Nest View（嵌套视图），Fragment（片段）-CSDN博客

5），i18n.properties

复制代码

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

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

# Invoice List
invoiceListTitle=Invoices

暂时还没有Controller，就是个数据暂时，跑一下看看

6），运行看效果

2，Data Types （数据类型）

数据类型，比较典型的是金额的话，需要对应的Currency，不然也不知道是多少钱是吧。

下面来看具体的例子。

1），InvoiceList.view.xml

复制代码

<mvc:View
    controllerName="ui5.walkthrough.controller.InvoiceList"
    xmlns="sap.m"
    xmlns:core="sap.ui.core"
    xmlns:mvc="sap.ui.core.mvc">
    <List
        headerText="{i18n>invoiceListTitle}"
        class="sapUiResponsiveMargin"
        width="auto"
        items="{invoice>/Invoices}">
        <items>
            <ObjectListItem
                core:require="{
                    Currency: 'sap/ui/model/type/Currency'
                }"
                title="{invoice>Quantity} x {invoice>ProductName}"
                number="{
                    parts: [
                        'invoice>ExtendedPrice',
                        'view>/currency'
                    ],
                    type: 'Currency',
                    formatOptions: {
                        showMeasure: false
                    }
                }"
                numberUnit="{view>/currency}"/>
        </items>
    </List>
</mvc:View>

controllerName="ui5.walkthrough.controller.InvoiceList"

加了个Controller

ObjectListItem: 列表中的每一项使用ObjectListItem控件显示
core:require: 动态加载Currency类型用于数据格式化
title: 显示数量和产品名称的组合
number: 复杂绑定，包含：
parts: 绑定多个数据源(价格和货币类型)
type: 使用Currency类型格式化，这里的主要意义就是把小数点都保留成 2位的
formatOptions: 格式化选项(不显示货币符号)
numberUnit: 显示货币单位。这个其实和 number里的Currency是一个东西，只不过这个显示的小

<ObjectListItem

core:require="{

Currency: 'sap/ui/model/type/Currency'

title="{invoice>Quantity} x {invoice>ProductName}"

number="{

parts: [

'invoice>ExtendedPrice',

'view>/currency'

type: 'Currency',

formatOptions: {

showMeasure: false

}

numberUnit="{view>/currency}"/>

2），InvoiceList.controller.js

复制代码

sap.ui.define([
	"sap/ui/core/mvc/Controller",
	"sap/ui/model/json/JSONModel"
], (Controller, JSONModel) => {
	"use strict";

	return Controller.extend("ui5.walkthrough.controller.InvoiceList", {
		onInit() {
			const oViewModel = new JSONModel({
				currency: "EUR"
			});
			this.getView().setModel(oViewModel, "view");
		}
	});
});