Web编程学习三: 使用SAPUI5来创建Web应用UI
第三个练习，试试SAPUI5。这是SAP比较重要的一个UI库。完全通过HTML5实现，可以作为Web和移动应用的UI开发。
现在已经开源了。在这里可以下载：
http://sap.github.io/openui5/
SAPUI5功能很强大，开发也很简单，包含很多组件和主题，并且是通过MVC来开发，下面简单看一下。
这里使用的是Apache Web服务器2.2.26，SAPUI5的版本为 1.18。
1.安装Apache服务器，运行。
2.将下载的sapui5包解压缩到apache服务器应用目录下，我这里是/Application/MAMP/htdocs
3.测试。
打开http://localhost:8888/sapui5/
4.创建一个static web project hellosapui5
5.创建index.html
<!DOCTYPE html>
<html>
<head>
<meta http-equiv='X-UA-Compatible' content='IE=edge' />
<title>Hello World</title>
<script id='sap-ui-bootstrap'
src='http://localhost:8888/sapui5/resources/sap-ui-core.js'
data-sap-ui-theme='sap_goldreflection'
data-sap-ui-libs='sap.ui.commons, sap.ui.table'></script>
<script>
// create the DataTable control
var oTable = new sap.ui.table.Table({
editable : true
});
// define the Table columns
var oControl = new sap.ui.commons.TextView({
text : "{lastName}"
}); // short binding notation
oTable.addColumn(new sap.ui.table.Column({
label : new sap.ui.commons.Label({
text : "Last Name"
}),
template : oControl,
sortProperty : "lastName",
filterProperty : "lastName",
width : "100px"
}));
oControl = new sap.ui.commons.TextField().bindProperty("value", "name"); // more verbose binding notationt
oTable.addColumn(new sap.ui.table.Column({
label : new sap.ui.commons.Label({
text : "First Name"
}),
template : oControl,
sortProperty : "name",
filterProperty : "name",
width : "80px"
}));
oControl = new sap.ui.commons.CheckBox({
checked : "{checked}"
});
oTable.addColumn(new sap.ui.table.Column({
label : new sap.ui.commons.Label({
text : "Checked"
}),
template : oControl,
sortProperty : "checked",
filterProperty : "checked",
width : "75px",
hAlign : "Center"
}));
oControl = new sap.ui.commons.Link({
text : "{linkText}",
href : "{href}"
});
oTable.addColumn(new sap.ui.table.Column({
label : new sap.ui.commons.Label({
text : "Web Site"
}),
template : oControl,
sortProperty : "linkText",
filterProperty : "linkText"
}));
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"
}));
// create some local data
var aData = [ {
lastName : "Dente",
name : "Al",
checked : true,
linkText : "www.sap.com",
href : "http://www.sap.com",
rating : 4
}, {
lastName : "Friese",
name : "Andy",
checked : true,
linkText : "https://experience.sap.com/fiori",
href : "https://experience.sap.com/fiori",
rating : 2
}, {
lastName : "Mann",
name : "Anita",
checked : false,
linkText : "http://www.saphana.com/",
href : "http://www.saphana.com/",
rating : 3
} ];
// create a JSONModel, fill in the data and bind the Table to this model
var oModel = new sap.ui.model.json.JSONModel();
oModel.setData({
modelData : aData
});
oTable.setModel(oModel);
oTable.bindRows("/modelData");
// finally place the Table into the UI
oTable.placeAt("content");
</script>
</head>
<body class='sapUiBody'>
<div id='content'></div>
</body>
</html>
6.运行结果：
小结：
这个很简单的例子展示了SAPUI5的Table控件，创建了一个table，然后将json格式的数据与之绑定，最后在页面展示。
代码很简单，界面很漂亮，很好很强大。