试试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. MySQL_解决ERROR 2006 (HY000) at line XX MySQL server has gone away问题

    参考:http://www.111cn.net/database/mysql/106911.htm 1.修改mysqld的配置文件my.cnf 调整max_allowed_packet的值,修改为5M ...

  2. Docker pull网络错误

    [root@Oracle ~]# docker search centos Error response from daemon: Get https://index.docker.io/v1/sea ...

  3. BZOJ4765: 普通计算姬

    BZOJ4765: 普通计算姬 题目描述 传送门 题目分析 求的和非常奇怪,不具有连续性,所有上树的数据结构全死了. 考虑分块,思考对于一段连续的询问区间可以直接询问整块,零散块可以在树上dfs序暴力 ...

  4. 如何优雅的进入IT世界

    原始地址:http://www.cocoachina.com/gamedev/misc/2014/0613/8808.html 以下三段是废话,请跳过.   (废话段1)有文科生想了解IT世界.这并不 ...

  5. 【链接】Eclipse的Debug调试技巧

    Eclipse的Debug调试技巧大全 https://mp.weixin.qq.com/s/bORg9YxJiby2WenYRrXY-w 使用Eclipse调试Java程序的10个技巧 https: ...

  6. hdu 4857 逃生 拓扑排序+逆向建图

    逃生 Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others) Problem Descr ...

  7. ECMAScript6教程目录

    ECMAScript 6 简介 let 和 const 命令 数组的解构赋值 字符串的扩展 正则的扩展 数值的扩展 函数的扩展 数组的扩展 对象的扩展 Symbol Set 和 Map 数据结构 Pr ...

  8. python调用虹软2.0第二版

    第一版踩了无数的坑,终于第二版把坑全添了,这次更新可以正常获取人脸数,角度,代码可读性更高,继续更新中 第三版已发出 https://www.cnblogs.com/wxt51/p/10125460. ...

  9. Sql Server中的DBCC命令详细介绍

    一:DBCC 1:什么是DBCC 我不是教学老师,我也说不到没有任何无懈可击的定义,全名:Database Console Commands.顾名思义“数据库控制台命令”,说到“控制台“,我第一反应就 ...

  10. R-模式（mode）和类(class)

    数据模式:mode函数显示任何对象的模式.常见的单个的对象模式是逻辑型(Logical).数值型(Numeric).字符型(Character). 常用到的数据模式是列表(list). 逻辑型:TRU ...