试试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

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

6.运行结果：

小结：

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

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

SAPUI5实例一：来创建Web应用UI的更多相关文章

  1. Web Service 实例基于Socket创建Web服务

    ServerSocket服务器端代码如下: public static void main(String[] args) throws IOException { // 1:建立服务器端的tcp so ...

  2. maven 学习---使用Maven创建Web应用程序项目

    在本教程中,我们将演示如何使用 Maven 创建一个 Java Web 项目(Spring MVC). 用到的技术/工具: Maven 3.3.3 Eclipse 4.3 JDK 8 Spring 4 ...

  3. 2015年最全的移动WEB前端UI框架

    目前,众多互联网公司APP都嵌入了大量的HTML5,移动端的开发越来越重视,HTML5的运用场景也越来越多了.在移动WEB开发的过程中,使用合适的移动WEB UI框架可以大大提升我们的开发效率.下面P ...

  4. 在Salesforce中创建Web Service供外部系统调用

    在Salesforce中可以创建Web Service供外部系统调用,并且可以以SOAP或者REST方式向外提供调用接口,接下来的内容将详细讲述一下用SOAP的方式创建Web Service并且用As ...

  5. 【ASP.NET Web API教程】2.4 创建Web API的帮助页面

    原文:[ASP.NET Web API教程]2.4 创建Web API的帮助页面 注:本文是[ASP.NET Web API系列教程]的一部分,如果您是第一次看本博客文章,请先看前面的内容. 2.4 ...

  6. Myeclipse 创建 Web Maven项目

    1.创建Web项目 添加Maven支持 2.pom.xml 报如下错误: 解决办法: pom.xml里面添加依赖: <dependency> <groupId>com.thou ...

  7. web前端UI框架

    分类:WEB前端 时间:2016年1月13日 目前,众多互联网公司APP都嵌入了大量的HTML5,移动端的开发越来越重视,HTML5的运用场景也越来越多了.在移动WEB开发的过程中,使用合适的移动WE ...

  8. 使用 ASP.NET Core MVC 创建 Web API（五）

    使用 ASP.NET Core MVC 创建 Web API 使用 ASP.NET Core MVC 创建 Web API(一) 使用 ASP.NET Core MVC 创建 Web API(二) 使 ...

  9. asyncio创建协程解析——分析廖雪峰的Python教程之创建WEB服务（转）

    第一步,搭建开发环境 所需第三方库: aiohttp,异步 Web 开发框架:jinja2,前端模板引擎:aiomysql,异步 mysql 数据库驱动 所需内置库: logging,系统日志:asy ...

随机推荐

  1. 在线前端 样式和js

    bootstrap+ jquery <link rel="stylesheet" href="http://apps.bdimg.com/libs/bootstra ...

  2. 关于Visual Studio 2010自动添加头部注释信息

    作为一个万年潜水党,不关这一篇文章技术含量如何,也算是一个好的开始吧.   在日常的开发中我们经常需要为类库添加注释和版权等信息,这样我们就需要每次去拷贝粘贴同样的文字,为了减少这种重复性的工作,我们 ...

  3. word2vector 使用方法 计算语义相似度

    参考:http://techblog.youdao.com/?p=915#LinkTarget_699word2vector是一个把词转换成词向量的一个程序,能够把词映射到K维向量空间,甚至词与词之间 ...

  4. MySQL表类型MyISAM/InnoDB的区别（解决事务不回滚的问题）

    MyISAM:这个是默认类型,它是基于传统的ISAM类型,ISAM是Indexed Sequential Access Method (有索引的顺序访问方法) 的缩写,它是存储记录和文件的标准方法.与 ...

  5. Registering an Application to a URI Scheme

    https://msdn.microsoft.com/en-us/library/aa767914(VS.85).aspx Registering an Application to a URI Sc ...

  6. phalcon: dispatcher->forward地址转发/重定向

    比如,我indexController里面的indexAction,因为用户没有穿参数,我要重定向到 errorAction里面 $this->dispatcher->forward(ar ...

  7. torch Tensor学习：切片操作

    torch Tensor学习:切片操作 torch Tensor Slice 一直使用的是matlab处理矩阵,想从matlab转到lua+torch上,然而在matrix处理上遇到了好多类型不匹配问 ...

  8. 玲珑oj 1028 贪心

    http://www.ifrog.cc/acm/problem/1028 很有趣的一道题,求从n个数里挑出不同的两个,使得他俩'|','&','^'后的值尽量大,求这个最大的结果. 求最大的异 ...

  9. HDU 4704 Sum (隔板原理 + 费马小定理)

    Sum Time Limit : 2000/1000ms (Java/Other)   Memory Limit : 131072/131072K (Java/Other) Total Submiss ...

  10. Markdown_00_资源帖

    一.官方资料 1.原始官方文档 daringfireball.net 2.官方文档中文版 Markdown 语法说明 (简体中文版) Markdown: Basics (快速入门) 3.Typora官 ...