試試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格式的數據與之綁定，最后在頁面展示。
代碼很簡單，界面很漂亮，很好很強大。