您的位置：首页 > Web前端 > HTML5

HTML5开发移动web应用——SAP UI5篇(2)

2016-02-06 08:40 706 查看

我们通过网上的一个小demo，学习一下SAP UI5基本代码的编写流程。这里在前面讲过的基本文件引入等这里就不重复介绍了。

我们最后要做的是一个SAP UI5风格的表格，并添加了一些交互性很好的功能。

首先在HTML中，编写如下简单内容即可：

<body class='sapUiBody'>

<div id='content'></div>

</body>

这只是为了给UI5组件一个容器，让它们找到自己的位置。

js代码实现主要功能。

var oTable = new sap.ui.table.Table({

editable : true

});

我们定义了一个table表格组件，并且设定它为可编辑的。这里定义好的表格已经有一些自带的功能了。UI5中通过sap.ui调用各种组件。下面我们可以定义table中需要的组件，也就是table中的每一列，同样的方法：

var oControl = new sap.ui.commons.TextView({

text : "{lastName}"

});

这里定义了一列，这一列显示的是每个对象的lastName属性，大家应该对这种大括号标识引用数据变量的方式不陌生。定义好一列后，我们把这一列添加到table中，通过调用addColumn方法：

oTable.addColumn(new sap.ui.table.Column({

label : new sap.ui.commons.Label({

text : "Last Name"

}),

template : oControl,

sortProperty : "lastName",

filterProperty : "lastName",

width : "100px"

}));

我们发现，之前写的列其实只是这个列的模板，真正要创建出这个列需要使用sap.ui.table.Column。label属性定义了列名，template定义了使用的模板（和Sencha Touch中很类似）。sortProperty和filterProperty定义了排序、过滤依照的属性。此外还可以通过width等设定样式。这样我们就完成了一列的添加。

对于其他的列，我们也可以使用类似的方法创建组件。比如：

oControl = new sap.ui.commons.RatingIndicator({

value : "{rating}"

});

oTable.addColumn(new sap.ui.table.Column({

label : new sap.ui.commons.Label({

text : "Rating"

}),

template : oControl,

sortProperty : "rating",

filterProperty : "rating"

}));

这就创建了一个评分组件，很多网站上都很常用。

我们实现了前端的界面部分后，数据怎么进行绑定呢？

我们先创建一系列的数据data

var aData = [ {

lastName : "Dente",

name : "Al",

checked : true,

rating : 4

}, {

lastName : "Friese",

name : "Andy",

checked : true,

rating : 2

}, {

lastName : "Mann",

name : "Anita",

checked : false,

rating : 3

} ];

之后，我们将这些数据封装：

var oModel = new sap.ui.model.json.JSONModel();

oModel.setData({

modelData : aData

});

这样，oModel就是一个JSON数据的包，包含我们之前创建的数据。我们将这个数据包应用于我们创建的table中，方法如下:

oTable.setModel(oModel);

这样就可以试下数据的绑定了。

最后将table组件放在页面中相应的位置，利用上次讲过的placeAt方法：

oTable.placeAt("content");

这样就可以了。大家可以先到UI5的api中自己查找各种各样的组件，为table添加更多更能丰富的列。

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航