Fiori 数据绑定与数据源

本文将介绍SAP UI5 Demo WalkThrough中涉及到的数据绑定操作与数据源的设置与使用。

数据绑定

SAP UI5通过模型来绑定数据：

  1. 默认模型
  2. 命名模型

默认模型

在WalkThrough 7的Controller的初始化方法中：

1
2
3
4
5
6
7
8
9
10
onInit() {
   // set data model on view
   const oData = {
      recipient : {
         name : "World"
      }
   };
   const oModel = new JSONModel(oData);
   this.getView().setModel(oModel);
}

代码通过this.getView().setModel(oModel)设置了视图的默认数据模型。当setModel方法的入参只有一个Model对象时，程序设置的模型即为视图的默认模型，在view.xml和JavaScript文件中可以通过如下方式来获取默认数据模型的内容：

  • view.xml
    • {/该模型的一级属性/该模型的二级属性/...}
  • JavaScript
    • this.getView().getModel().getProperty("{/该模型的一级属性/该模型的二级属性/...}");

命名模型

除默认数据模型外的其他的数据模型，在set和get的时候则需要指定它对应的模型名称。例如在WalkThrough 20 InvoiceList.controller.js中的代码：

1
2
3
4
5
6
7
onInit() {
	const oViewModel = new JSONModel({
		currency: "EUR"
	});
           // 为防止歧义，我将view改为currency
	this.getView().setModel(oViewModel, "currency");
}

获取数据模型内容的时候同理需要加上对应模型的名称：

  • view.xml
    • {currency>/该模型的一级属性/该模型的二级属性/...}
  • JavaScript
    • this.getView().getModel("currency").getProperty("{/该模型的一级属性/该模型的二级属性/...}");

view.xml中获取模型的>/和>

上述在view.xml获取模型内容使用了>/，而>也能用来获取模型内容。两者的区别如下：

  • >/：绝对路径，确保从模型的根开始访问数据。
  • >：相对路径，通常在绑定集合项或嵌套结构时使用。

>的使用，需要有对应的上下文进行支持，例如在WalkThrough 21的InvoiceList.view.xml中：

1
2
3
4
5
6
7
8
9
10
11
12
13
<List
	headerText="{i18n>invoiceListTitle}"
	class="sapUiResponsiveMargin"
	width="auto"
	items="{invoice>/Invoices}"
>
	<items>
		<ObjectListItem
			title="{invoice>Quantity} x {invoice>ProductName}"
                 ......
		/>
	</items>
</List>

items="{invoice>/Invoices}"通过绝对路径获取到了invoice的模型内容，使得<items>中的>有了上下文进行支持，因此在<items>中可以通过title="{invoice>Quantity} x {invoice>ProductName}"来直接获取Invoices下的Quantity和ProductName。

为什么会有两种用法？

  1. 相对路径的灵活性：相对路径使得在绑定复杂结构时更为灵活。特别是在重复绑定的情况下（如列表中的项），相对路径使得每个绑定都相对于当前项。
  2. 绝对路径的明确性：绝对路径确保绑定的数据来自模型的根，可以避免由于上下文变化而导致的绑定问题。

通过JSON文件定义数据模型

WalkThrough 19中新建了一个Invoices.json文件，并在manifest.json加了如下配置：

1
2
3
4
5
6
7
8
9
10
11
"sap.ui5": {
    ...
    "models": {
      ...
      "invoice": {
        "type": "sap.ui.model.json.JSONModel",
        "uri": "Invoices.json"
      }
      ...
    }
  }

其作用是在UI5程序初始化期间程序会根据manifest.json中配置的model自动创建一个内容及结构指向Invoices.json、叫invoice的一个JSONModel类型的数据模型。

等同于在OnInit方法中通过代码进行数据模型的创建：

1
2
3
4
5
6
onInit() {
	const oModel = new JSONModel({
		...
	});
	this.getView().setModel(oModel, "invoice`");
}

数据源

前端Fiori项目通过访问后端数据源来获取数据。

Remote OData Service

OData是一种常用的Fiori项目获取后端数据的方式，在Fiori中通过OData访问后端数据源需要使用到代理中间件。

在WalkThrough 25中提供了一个叫ui5-middleware-simpleproxy的代理中间件和公共OData服务（Northwind OData service：https://services.odata.org/V2/Northwind/Northwind.svc/）供我们练习使用。

  1. 通过在Terminal中执行如下指令来安装该中间件的包：

    1
    npm i -D ui5-middleware-simpleproxy

  2. 在ui5.yaml中配置后端OData的服务器：

    1
    2
    3
    4
    5
    6
    7
    server:
      customMiddleware:
      - name: ui5-middleware-simpleproxy
        afterMiddleware: compression
        mountPath: /V2
        configuration:
          baseUri: "https://services.odata.org"

  3. 在manifest.json中配置数据源：

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    "sap.app": {
    	...,
    	"dataSources": {
    		"invoiceRemote": {
    			"uri": "V2/Northwind/Northwind.svc/",
    			"type": "OData",
    			"settings": {
    				"odataVersion": "2.0"
    			}
    		}
    	}
    },
    ...

  4. 在manifest.json中给数据模型注入数据：

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    "sap.ui5": {
    	...
    	"models": {
    		...
    		"invoice": {
    			"dataSource": "invoiceRemote"
    		}
    	}
       },
    	...

在WalkThrough 19中，项目通过Invoices.json来给manifest.json中创建的数据对象invoice填充数据，而到了WalkThrough 25项目可以通过代理去访问后端服务器的数据源来给invoice填充数据。

模拟服务器

Mock Server模拟服务器可以为前端Fiori项目提供一个模拟的后端服务器使用，可以帮助前端开发人员进行独立开发和测试。

image-20240727134827970

  1. test\mockServer.html取代了index.html，通过启动test\mockServer.html来开启test mode测试模式。

  2. test\mockServer.html指定test\initMockServer.js为启动脚本。

  3. test\initMockServer.js相当于给项目的启动脚本做了一层中转：保证了项目的数据请求可以被拦截并转到Mock Server中，同时也加载原启动脚本使项目照常运行显示。

    1. mockserver.init();启动模拟服务器、运行localService\mockserver.js脚本代码；

    2. sap.ui.require(["sap/ui/core/ComponentSupport"]);加载项目的原启动脚本；

      image-20240727140745534

  4. localService\mockserver.js初始化模拟服务器：

    1. rootUri: sap.ui.require.toUrl("ui5/walkthrough") + "/V2/Northwind/Northwind.svc/"配置需要被拦截的请求；
    2. const sPath = sap.ui.require.toUrl("ui5/walkthrough/localService");和oMockServer.simulate(sPath + "/metadata.xml", sPath + "/mockdata");加载了模拟返回的数据模型结构localService\metadata.xml与数据内容localService\mockdata\Invoices.json；
SAP > Fiori > UI5Demo
#Fiori
Fiori 数据绑定与数据源
https://claudechan1228.github.io/2024/07/26/009-Fiori 数据绑定与数据源/
作者
Claude Chan
发布于
2024年7月26日
许可协议