HTML5开发移动web应用——SAP UI5篇(2)
我们通过网上的一个小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添加更多更能丰富的列。