试试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. hadoop2对应的eclipse插件使用

    1. eclipse插件安装步骤: a).把插件复制到eclipse安装目录plugins文件夹下 b).打开eclipse的Window---Preference---Hadoop M/R---指向 ...

  2. DispatcherServlet讲解

    1.1.1.DispatcherServlet作用DispatcherServlet是前端控制器设计模式的实现,提供Spring Web MVC的集中访问点,而且负责职责的分派,而且与Spring I ...

  3. jsp中获取list长度

    <%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%> <%@ tag ...

  4. Harbor 定制页面 和 二次开发指南

    harbor的官方地址:https://github.com/goharbor/harbor 想对Harbor进行二次开发,首先要指定一个harbor的版本,这里我们以Harbor:1.6.2为例: ...

  5. 淘海外分发Job 多线程demo

    using System;using System.Collections.Generic;using System.Configuration;using System.Diagnostics;us ...

  6. css tips —— 在css中完成国际化

    前提 在日常处理国际化的时候,通常是将key通过类似intl.xx(key)转换为对应环境的文案,可是如果需要在css中加入对应逻辑应该怎么做呢(比如在after的伪元素中显示不同的文案),毕竟在cs ...

  7. SQL生成两个时间之间的所有日期

    select dateadd(dd,number,'2012-1-1') AS date from master..spt_values where type='p' and dateadd(dd,n ...

  8. 为什么U盘在拔出之前需要“安全弹出”？

    前言 我们不知道从什么时候开始有一个观念:U盘一定要点击“安全弹出”才能拔.那么是不是在任何情况下都必须要这样呢? 介绍 U盘的传输策略有两种: 写入缓存:这种策略在windows中称为“更好的性能” ...

  9. 真正在线编辑的在线web编辑器

    最近正在研究开发一款在线web编辑器架构,这是一款真正傻瓜式的web编辑器,可以在正常浏览页面的情况进行编辑,经过测试,对于一般网页页面来说非常好用方便,操作更简单. 一般的在线web编辑器虽说提供了 ...

  10. iOS-如何写好一个UITableView

    如何写好一个UITableView 字数5787 阅读3745 评论25 喜欢69 本文是直播分享的简单文字整理,直播共分为上.下两部分.第一部分:优酷 Or YouTube,第二部分:优酷 Demo ...