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

[html] view plain copy
 
 在CODE上查看代码片派生到我的代码片
  1. <!DOCTYPE html>  
  2. <html>  
  3. <head>  
  4. <meta http-equiv='X-UA-Compatible' content='IE=edge' />  
  5. <title>Hello World</title>  
  6.   
  7. <script id='sap-ui-bootstrap'  
  8.     src='http://localhost:8888/sapui5/resources/sap-ui-core.js'  
  9.     data-sap-ui-theme='sap_goldreflection'  
  10.     data-sap-ui-libs='sap.ui.commons, sap.ui.table'></script>  
  11.   
  12. <script>  
  13.     // create the DataTable control  
  14.     var oTable = new sap.ui.table.Table({  
  15.         editable : true  
  16.     });  
  17.   
  18.     // define the Table columns  
  19.     var oControl = new sap.ui.commons.TextView({  
  20.         text : "{lastName}"  
  21.     }); // short binding notation  
  22.     oTable.addColumn(new sap.ui.table.Column({  
  23.         label : new sap.ui.commons.Label({  
  24.             text : "Last Name"  
  25.         }),  
  26.         template : oControl,  
  27.         sortProperty : "lastName",  
  28.         filterProperty : "lastName",  
  29.         width : "100px"  
  30.     }));  
  31.     oControl = new sap.ui.commons.TextField().bindProperty("value", "name"); // more verbose binding notationt  
  32.     oTable.addColumn(new sap.ui.table.Column({  
  33.         label : new sap.ui.commons.Label({  
  34.             text : "First Name"  
  35.         }),  
  36.         template : oControl,  
  37.         sortProperty : "name",  
  38.         filterProperty : "name",  
  39.         width : "80px"  
  40.     }));  
  41.     oControl = new sap.ui.commons.CheckBox({  
  42.         checked : "{checked}"  
  43.     });  
  44.     oTable.addColumn(new sap.ui.table.Column({  
  45.         label : new sap.ui.commons.Label({  
  46.             text : "Checked"  
  47.         }),  
  48.         template : oControl,  
  49.         sortProperty : "checked",  
  50.         filterProperty : "checked",  
  51.         width : "75px",  
  52.         hAlign : "Center"  
  53.     }));  
  54.     oControl = new sap.ui.commons.Link({  
  55.         text : "{linkText}",  
  56.         href : "{href}"  
  57.     });  
  58.     oTable.addColumn(new sap.ui.table.Column({  
  59.         label : new sap.ui.commons.Label({  
  60.             text : "Web Site"  
  61.         }),  
  62.         template : oControl,  
  63.         sortProperty : "linkText",  
  64.         filterProperty : "linkText"  
  65.     }));  
  66.     oControl = new sap.ui.commons.RatingIndicator({  
  67.         value : "{rating}"  
  68.     });  
  69.     oTable.addColumn(new sap.ui.table.Column({  
  70.         label : new sap.ui.commons.Label({  
  71.             text : "Rating"  
  72.         }),  
  73.         template : oControl,  
  74.         sortProperty : "rating",  
  75.         filterProperty : "rating"  
  76.     }));  
  77.   
  78.     // create some local data  
  79.     var aData = [ {  
  80.         lastName : "Dente",  
  81.         name : "Al",  
  82.         checked : true,  
  83.         linkText : "www.sap.com",  
  84.         href : "http://www.sap.com",  
  85.         rating : 4  
  86.     }, {  
  87.         lastName : "Friese",  
  88.         name : "Andy",  
  89.         checked : true,  
  90.         linkText : "https://experience.sap.com/fiori",  
  91.         href : "https://experience.sap.com/fiori",  
  92.         rating : 2  
  93.     }, {  
  94.         lastName : "Mann",  
  95.         name : "Anita",  
  96.         checked : false,  
  97.         linkText : "http://www.saphana.com/",  
  98.         href : "http://www.saphana.com/",  
  99.         rating : 3  
  100.     } ];  
  101.   
  102.     // create a JSONModel, fill in the data and bind the Table to this model  
  103.     var oModel = new sap.ui.model.json.JSONModel();  
  104.     oModel.setData({  
  105.         modelData : aData  
  106.     });  
  107.     oTable.setModel(oModel);  
  108.     oTable.bindRows("/modelData");  
  109.   
  110.     // finally place the Table into the UI  
  111.     oTable.placeAt("content");  
  112. </script>  
  113.   
  114. </head>  
  115. <body class='sapUiBody'>  
  116.     <div id='content'></div>  
  117. </body>  
  118. </html>  

6.运行结果:

小结:

这个很简单的例子展示了SAPUI5的Table控件,创建了一个table,然后将json格式的数据与之绑定,最后在页面展示。

代码很简单,界面很漂亮,很好很强大。

原文地址:https://www.cnblogs.com/niejunchan/p/6358945.html