zoukankan      html  css  js  c++  java

  • 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格式的数据与之绑定，最后在页面展示。

    代码很简单，界面很漂亮，很好很强大。
  • 相关阅读:
    软件测试 (三) 界面测试
    软件测试 (二) 六年软件测试感悟
    软件测试 (一) 软件测试方法大汇总
    第二阶段站立会议6
    第二阶段站立会议5
    构建之法阅读笔记04
    第二阶段站立会议4
    第二阶段站立会议3
    第二阶段站立会议2
    第二阶段站立会议1
  • 原文地址：https://www.cnblogs.com/niejunchan/p/6358945.html
Copyright © 2011-2022 走看看