试试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. mybatis整合ehcache

    知识点:mybatis整合encache缓存框架,缓存从数据库中,查询的数据,不使用mybatis自带的二级缓存 补充:github上Mybatis Ehcache 适配器包说明地址:http://w ...

  2. i++为什么是线程不安全的

    主要是因为i++这个操作不是原子性的,它会编译成 i = i +1: 其实是做了3个步骤,一个是读取,修改,写入 .所以会出现多线程访问冲突问题. 可以结合Java内存模型来进行说明.

  3. SpringBoot 玩转读写分离

    环境概览 前言介绍 Sharding-JDBC是当当网的一个开源项目,只需引入jar即可轻松实现读写分离与分库分表.与MyCat不同的是,Sharding-JDBC致力于提供轻量级的服务框架,无需额外 ...

  4. meta标签中的http-equiv属性使用介绍

      meta是html语言head区的一个辅助性标签.也许你认为这些代码可有可无.其实如果你能够用好meta标签,会给你带来意想不到的效果,meta 标签的作用有:搜索引擎优化(SEO),定义页面使用 ...

  5. es6之Iterator

    1.任何数据结构只要部署了Iterator接口(本质是一个指针对象),也就是部署了Symbol.iterator属性,便可以完成遍历操作:数组原生就具备Iterator接口,就可以用for...of遍 ...

  6. web微信开发总结

    这两天使用Django开发了web微信,实现了显示联系人以及收发消息的功能. 总结下这过程中使用到的一些知识. 1 http请求 通过chrome浏览器自带的开发者工具查看每次请求的信息,分析请求,包 ...

  7. BZOJ 1045 [HAOI2008]糖果传递 ★(环形等分：中位数)

    题意 有n个小朋友坐成一圈,每人有ai个糖果.每人只能给左右两人传递糖果.每人每次传递一个糖果代价为1. 思路 假设平均数是x,且a1给an了k个(k<0说明是an给a1了-k个),那么总代价就 ...

  8. Python之路,Day9 - 线程、进程、协程和IO多路复用

    参考博客: 线程.进程.协程: http://www.cnblogs.com/wupeiqi/articles/5040827.html http://www.cnblogs.com/alex3714 ...

  9. 使用samba初始化开发环境

    一.系统环境 [root@host-172-20-3-66 samba]# cat /etc/redhat-release CentOS Linux release 7.2.1511 (Core) 搞 ...

  10. js鼠标键禁用功能

    页面完全禁用右键 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://ww ...