devbox
AllinToyou
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

SAPUI5 (13) - 数据绑定之聚合绑定(aggregation binding)_sap ui5 aggregation binding using templates

作者：AllinToyou | 2024-02-15 12:43:16

赞

踩

sap ui5 aggregation binding using templates

上次我们介绍了属性绑定。属性绑定用于绑定单条数据。如果需要绑定多条数据，则需要使用聚合绑定(aggregation binding)，比如我们常见的ListBox, Combox或者表格，都是含有多条数据的。概念比较容易理解，关键是绑定的语法。如果所有行都用同样的方法显示数据，用template方法。什么是template方法呢？就是各行的数据显示方式应该是固定的，像套用模板一样。比如显示供应商信息，每一行的第一列是供应商ID，第二列是供应商名称，都是固定的。熟悉ABAP的语言的读者，可以比照ABAP内表的line type来理解。

我们在前面用sap.ui.table.Table显示供应商数据的时候，已经有相应的例子，请参考：SAPUI5 (08) - MVC的Model和数据绑定。 Template方式绑定有以下几种方式：

  1. 使用settings设置
  2. 使用sap.ui.base.ManagedObject的bindAggregation()方法
  3. 使用控件的类型化绑定方法

这三种方法本篇都会介绍。如果想各行绑定的数据有变化，或者说是动态的。比如在一个表格中，有一列显示读者对某文章的点击次数，当点击次数超过100时，除了点击次数，还显示热门标记，则可以使用factory function的方式来绑定。后面也会给出示例。

本次使用sap.m.Table控件显示数据，所以先介绍下sap.m.Table的一些语法要点。

sap.m.Table

sap.m.Table
control provides a set of sophisticated and convenience functions for responsive table design. To render the sap.m.Table properly, the order of the columns aggregation should match with the order of the items cells aggregation. Also sap.m.Table requires at least one visible sap.m.Column in columns aggregation. For mobile devices, the recommended limit of table rows is 100 (based on 4 columns) to assure proper performance. To improve initial rendering on large tables, use the growing feature.
查看

sap.m.Table从sap.m.ListBase类继承，用于显示包含行和列的表格式数据。表格的列可以通过columns聚合属性来设置，也可以使用addColumn()方法来添加。每一列都是sap.m.Column对象。至少包含一个可见列。在一定设备上不要加载太多行，以免影响性能。

sap.m.Table的重要属性：

  • columns: 定义Table包含哪些列，类型是sap.m.Column数组。

另外，sap.m.Table从sap.m.ListBase继承，所以可以直接使用sap.m.ListBase的属性：

  • growing: 设置Table显示的数据可以依据向model的请求增加行
  • noDataText: 当Table没有数据的时候显示的文本，类型是string
  • items: sap.m.ListItemBase数组，sap.m.ListItemBase类定义了列表项(list item)的基本特征。

sap.m.ColumnListItem

使用template方法显示数据，每一行的template常用sap.m.ColumnListItem，所以接下来介绍sap.m.ColumnListItem的知识点：

sap.m.ColumnListItem can be used with the cells aggregation to create rows for the sap.m.Table control. The columns aggregation of the sap.m.Table should match with the cells aggregation.
查看

sap.m.ColumnListItem用于创建sap.m.Table的行，行中包含的cells需要与sap.m.Table的Columns匹配，顺序一致。

本次将用到以下属性：

  • vAlign， 行的垂直对齐：

    • sap.ui.core.VerticalAlign.Bottom，底部对齐
    • sap.ui.core.VerticalAlign.Inherit，从父控件继承
    • [sap.ui.core.VerticalAlign.Middle, 居中对齐
    • sap.ui.core.VerticalAlign.Top，顶部对齐

  • cells: 行包含的cells，每一个cell都是sap.ui.core.Control对象，从而开发人员可以根据需要选择合适的控件，灵活度很高。

聚合绑定示例

和之前一样，通过例子来加强理解。今天要实现的业务场景是在页面中显示一个文章列表，这些文章的阅读次数，我们的要显示的界面如下：

为了便于理解，先给出application area的完整代码：

/**
 * Aggregation binding
 * Demo written by Stone Wang
 */

// application data
var oAppData = [
	{ articleName: "SAP成本计算流程", type: "Locked", hits: 1048 },
	{ articleName: "SAP物料价格修改", type: "Draft", hits: 58 },
	{ articleName: "2017年SAP技术趋势", type: "Unsaved", hits: 320},
	{ articleName: "《人类简史》读后感", type: "Flagged", hits: 90 },
	{ articleName: "《Core Java》第十版出版", type: "Favorite" , hits: 66}
];

var oModel = new sap.ui.model.json.JSONModel();
oModel.setData({ modelData: oAppData });

sap.ui.getCore().setModel(oModel);

// 定义一个包含包含3列的数组
var aColumns = [
	new sap.m.Column({
		header : new sap.m.Label({text : "文章"})
	}),		
	new sap.m.Column({
		header : new sap.m.Label({text : "标记"})
	}),
	new sap.m.Column({
		header : new sap.m.Label({text : "标记"})
	})
]

// 定义template, 每行包含3个cell
var oColumnListItem = new sap.m.ColumnListItem({
	vAlign: "Middle",
	cells: [
	    new sap.m.Text({text: "{articleName}"}),
	    new sap.m.ObjectMarker({type: "{type}"}),
	    new sap.m.ObjectMarker({
	    	type: "{type}",
	    	active: true,
	    	press: function(oEvent){
	    		sap.m.MessageToast.show(oEvent.getParameter("type") + " pressed");
	    	}
	    })   
	]
});


// Table control
var oTable = new sap.m.Table({
	columns : aColumns,
	items: {path: "/modelData", template: oColumnListItem}
});

var oTablePanel = new sap.m.Panel({
	headerText: "文章列表",
	content: oTable
});

var oStandalonePanel = new sap.m.Panel("standalone-panel", {
	headerText: "图例：",
	content: [
		new sap.m.ObjectMarker({type: sap.m.ObjectMarkerType.Locked}),		
		new sap.m.ObjectMarker({type: sap.m.ObjectMarkerType.Flagged}),
		new sap.m.ObjectMarker({type: sap.m.ObjectMarkerType.Favorite}),			
		new sap.m.ObjectMarker({type: sap.m.ObjectMarkerType.Draft}),		
		new sap.m.ObjectMarker({type: sap.m.ObjectMarkerType.Unsaved})
	]
});

var oApp = new sap.m.App({  initialPage: "page" });
var oPage = new sap.m.Page("page", {
	title:"Aggregation binding demo",
	content: [oTablePanel, oStandalonePanel]
});
oApp.addPage(oPage).placeAt("content");

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 46
  • 47
  • 48
  • 49
  • 50
  • 51
  • 52
  • 53
  • 54
  • 55
  • 56
  • 57
  • 58
  • 59
  • 60
  • 61
  • 62
  • 63
  • 64
  • 65
  • 66
  • 67
  • 68
  • 69
  • 70
  • 71
  • 72
  • 73
  • 74
  • 75
  • 76
  • 77

我们说明最主要的部分。因为Table包含三列，所以我们先定义一个包含3列的数组，每一列都是sap.m.Column对象。

// 定义一个包含包含3列的数组
var aColumns = [
	new sap.m.Column({
		header : new sap.m.Label({text : "文章"})
	}),		
	new sap.m.Column({
		header : new sap.m.Label({text : "标记"})
	}),
	new sap.m.Column({
		header : new sap.m.Label({text : "标记"})
	})
]

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12

刚才说过，对于每一行来说，都是一个template，我们使用ColumnListItem来代表template，每一行包含三个单元格，使用cells属性表示。每一个cell都是Control对象，我们使用sap.m.Text显示第一个单元格，绑定到articleName，使用sap.m.ObjectMarker显示第二个单元格和第三个单元格，第三个单元格与event handler绑定:

// 定义template, 每行包含3个cell
var oColumnListItem = new sap.m.ColumnListItem({
	vAlign: "Middle",
	cells: [
	    new sap.m.Text({text: "{articleName}"}),
	    new sap.m.ObjectMarker({type: "{type}"}),
	    new sap.m.ObjectMarker({
	    	type: "{type}",
	    	active: true,
	    	press: function(oEvent){
	    		sap.m.MessageToast.show(oEvent.getParameter("type") + " pressed");
	    	}
	    })   
	]
});

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15

最后定义sap.m.Table对象，使用columns聚合属性和items聚合属性，items属性实现的就是聚合绑定，当然，需要ColumnListItem的支持。

// Table control
var oTable = new sap.m.Table({
	columns : aColumns,
	items: {path: "/modelData", template: oColumnListItem}
});

  • 1
  • 2
  • 3
  • 4
  • 5

对Table的绑定，我们也可以使用bingItems方法来实现：

var oTable = new sap.m.Table({
	columns: aColumns
});
oTable.bindItems("/modelData", oColumnListItem);

  • 1
  • 2
  • 3
  • 4

或者：

var oTable = new sap.m.Table({
	columns: aColumns
});
oTable.bindAggregation("items", "/modelData", oColumnListItem);

  • 1
  • 2
  • 3
  • 4

使用工厂函数实现聚合绑定

对上面的例子进行重构，假设我们想显示这些文章的阅读次数，并且当阅读次数超过100时，就在阅读次数下面加一个”热门”字眼来标识。也就是不同的单元格在显示的时候是动态的。对这种动态的数据显示，就需要用factory function。如何做呢？我们使用sap.m.Table的bindAggregation()方法，参数3使用匿名函数，这个函数就是factory function:

// 使用Factory function实现动态的数据显示
oTable.bindAggregation("items", "/modelData", function(sId, oContext){
	var oColumnListItem = new sap.m.ColumnListItem(sId, {vAlign: "Middle"});
	oColumnListItem.addCell(new sap.m.Text({text: "{articleName}"}));
	oColumnListItem.addCell(new sap.m.ObjectMarker({type: "{type}"}));
	
	var oHits = oContext.getProperty("hits");	
	if (oHits >= 100) {
		oColumnListItem.addCell(
			new sap.ui.layout.VerticalLayout({
				content: [
				   new sap.m.Text({text: "{hits}"}),
				   new sap.m.ObjectStatus({text:"热门", state:"Success"})
				]
			})
		)
	} else {
		oColumnListItem.addCell(
			new sap.m.Text({text: "{hits}"})
		)		
	}
	
	return oColumnListItem;
});

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24

注意Facotry 函数的参数必须是sId和oContext。如果点击次数大于或等于100，则cell中包括一个sap.m.Text和一个sap.m.ObjectStatus对象，垂直布局。如果点击次数小于100，则只有一个sap.m.Text来显示。函数最后需要使用return语句返回sap.m.ColumnListItem对象。

贴上完整代码：

/**
 * Aggregation binding using factory function
 * Demo written by Stone Wang
 */

// application data
var oAppData = [
	{ articleName: "SAP成本计算流程", type: "Locked", hits: 1048 },
	{ articleName: "SAP物料价格修改", type: "Draft", hits: 58 },
	{ articleName: "2017年SAP技术方向", type: "Unsaved", hits: 320},
	{ articleName: "《人类简史》读后感", type: "Flagged", hits: 90 },
	{ articleName: "《Core Java》第十版出版", type: "Favorite" , hits: 66}
];

var oModel = new sap.ui.model.json.JSONModel();
oModel.setData({ modelData: oAppData });

sap.ui.getCore().setModel(oModel);

// 定义Column数组，包含3列
var aColumns = [
	new sap.m.Column({
		header : new sap.m.Label({text : "文章"})
	}),		
	new sap.m.Column({
		header : new sap.m.Label({text : "标记"})
	}),
	new sap.m.Column({
		header : new sap.m.Label({text: "阅读次数"})
	})
	]


// Table control
var oTable = new sap.m.Table({
	columns : aColumns	
});


// 使用Factory function实现动态的数据显示
oTable.bindAggregation("items", "/modelData", function(sId, oContext){
	var oColumnListItem = new sap.m.ColumnListItem(sId, {vAlign: "Middle"});
	oColumnListItem.addCell(new sap.m.Text({text: "{articleName}"}));
	oColumnListItem.addCell(new sap.m.ObjectMarker({type: "{type}"}));
	
	var oHits = oContext.getProperty("hits");	
	if (oHits >= 100) {
		oColumnListItem.addCell(
			new sap.ui.layout.VerticalLayout({
				content: [
				   new sap.m.Text({text: "{hits}"}),
				   new sap.m.ObjectStatus({text:"热门", state:"Success"})
				]
			})
		)
	} else {
		oColumnListItem.addCell(
			new sap.m.Text({text: "{hits}"})
		)		
	}
	
	return oColumnListItem;
});


var oTablePanel = new sap.m.Panel({
	headerText: "文章列表",
	content: oTable
});

var oStandalonePanel = new sap.m.Panel("standalone-panel", {
	headerText: "图例：",
	content: [
		new sap.m.ObjectMarker({type: sap.m.ObjectMarkerType.Locked}),		
		new sap.m.ObjectMarker({type: sap.m.ObjectMarkerType.Flagged}),
		new sap.m.ObjectMarker({type: sap.m.ObjectMarkerType.Favorite}),			
		new sap.m.ObjectMarker({type: sap.m.ObjectMarkerType.Draft}),		
		new sap.m.ObjectMarker({type: sap.m.ObjectMarkerType.Unsaved})
	]
});

var oApp = new sap.m.App({  initialPage: "page" });
var oPage = new sap.m.Page("page", {
	title:"Aggregation binding demo",
	content: [oTablePanel, oStandalonePanel]
});
oApp.addPage(oPage).placeAt("content");

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 46
  • 47
  • 48
  • 49
  • 50
  • 51
  • 52
  • 53
  • 54
  • 55
  • 56
  • 57
  • 58
  • 59
  • 60
  • 61
  • 62
  • 63
  • 64
  • 65
  • 66
  • 67
  • 68
  • 69
  • 70
  • 71
  • 72
  • 73
  • 74
  • 75
  • 76
  • 77
  • 78
  • 79
  • 80
  • 81
  • 82
  • 83
  • 84
  • 85
  • 86
  • 87

页面显示效果如下：

用xmlview实现factory方法的聚合绑定

xmlview是声明式的，factory方式的聚合绑定却是为了实现动态的显示。那么，如何在xmlview中实现动态呢？要点如下：
1）xmlview中对需要动态显示的部分不作声明
2）在controller中定义factory function，实现控件的绑定和动态加载。

仍然用刚才的例子进行重构，项目文件和路径如下：：

将数据放在json文件articles.json中，内容如下：

[
	{ "articleName": "SAP成本计算流程", "type": "Locked", "hits": 1048 },
	{ "articleName": "SAP物料价格修改", "type": "Draft", "hits": 58 },
	{ "articleName": "2017年SAP技术方向", "type": "Unsaved", "hits": 320},
	{ "articleName": "《人类简史》读后感", "type": "Flagged", "hits": 90 },
	{ "articleName": "《Core Java》第十版出版", "type": "Favorite" , "hits": 66}
]

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7

index.html只有oApp和oView，oApp`放在DIV中。

<!DOCTYPE HTML>
<html>
	<head>
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta http-equiv='Content-Type' content='text/html;charset=UTF-8'/>

		<script src="resources/sap-ui-core.js"
				id="sap-ui-bootstrap"
				data-sap-ui-libs="sap.m, sap.ui.layout"
				data-sap-ui-resourceroots='{"bindingtest": "./binding_test"}'
				data-sap-ui-theme="sap_bluecrystal">
		</script>

		<script>			
			var oApp = new sap.m.App({initialPage: "mainpage"});
			var oView = sap.ui.xmlview({
				id: "mainpage",
				viewName: "bindingtest.view.aggregation_binding"
			});
	
			oApp.addPage(oView);
			oApp.placeAt("content");
		</script>

	</head>
	<body class="sapUiBody" role="application">
		<div id="content"></div>
	</body>
</html>

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29

aggregation_binding.view.xml:

<core:View xmlns:core="sap.ui.core" 
		   xmlns:mvc="sap.ui.core.mvc" 
		   xmlns="sap.m"
		   controllerName="bindingtest.controller.aggregation_binding" 
		   xmlns:html="http://www.w3.org/1999/xhtml">

	<Panel class="sapUiSmallMargin" headerText="文章列表">
		<content>
			<Table id="table" width="auto" class="sapUiSmallMargin"
				noDataText="no data">
				<columns>
					<Column><header><Label text="文章" /></header></Column>
					<Column><header><Label text="标记" /></header></Column>
					<Column hAlign="Right"><header><Label text="阅读次数" /></header></Column>					
				</columns>
			</Table>
		</content>
	</Panel>
	
	<Panel class="sapUiSmallMargin" headerText="图例">
		<content>
			<ObjectMarker class="sapUiSmallMargin" type="Locked" />
			<ObjectMarker class="sapUiSmallMargin" type="Flagged" />
			<ObjectMarker class="sapUiSmallMargin" type="Favorite" />
			<ObjectMarker class="sapUiSmallMargin" type="Draft" />
			<ObjectMarker class="sapUiSmallMargin" type="Unsaved" />
		</content>
	</Panel>
</core:View>

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29

注意sap.m.Table只声明了columns，没有声明items。items在代码中实现。

aggregation_binding.controller.js：

sap.ui.define(["sap/ui/core/mvc/Controller"], 
    function(Controller){
        "use strict";
        
        // controller name
        return Controller.extend("bindingtest.controller.aggregation_binding", {
        	
        	//-------------------------------
        	// initialization
        	//-------------------------------
            onInit: function() {
            	// binding view with model
                var oModel = sap.ui.model.json.JSONModel();
                oModel.loadData('binding_test/model/articles.json');
                this.getView().setModel(oModel);
                
                // Table object add items
                var oTable = this.getView().byId("table");
        		oTable.bindItems({path: '/', factory: this.createCellsFactory});
            },
            
            //------------------------------------------------
            // Factory function to add cells for table
            //------------------------------------------------
            createCellsFactory: function(sId, oContext) {		
    		
	    		var oColumnListItem = new sap.m.ColumnListItem(sId, {vAlign: "Middle"});
	    		
	    		// first two cells are not dynamic
	    	    oColumnListItem.addCell(new sap.m.Text({text: "{articleName}"}));
	    	    oColumnListItem.addCell(new sap.m.ObjectMarker({type: "{type}"}));	    
	    	    
	    	    // third cell is dynamic
	    	    var oHits = oContext.getProperty("hits");   
	    	    if (oHits >= 100) {
	    	        oColumnListItem.addCell(
	    	            new sap.ui.layout.VerticalLayout({
	    	                content: [
	    	                   new sap.m.Text({text: "{hits}"}),
	    	                   new sap.m.ObjectStatus({text:"热门", state:"Success"})
	    	                ]
	    	            })
	    	        )
	    	    } else {
	    	        oColumnListItem.addCell(
	    	            new sap.m.Text({text: "{hits}"})
	    	        )       
	    	    }
	    
	    	    return oColumnListItem;
	    	} // end of createCellsFactory()            
            
        });
    }
);


  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 46
  • 47
  • 48
  • 49
  • 50
  • 51
  • 52
  • 53
  • 54
  • 55
  • 56

在onInit()中调用oTable的bindItems方法，bindItems方法包含factory方法： oTable.bindItems({path: '/', factory: this.createCellsFactory});

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/AllinToyou/article/detail/84578
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号