试试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. Spring Boot企业微信点餐系统

    第1章 课程介绍 包括项演示.课程概述.课程安排.学习前提等的介绍, 让同学们了解这课程 1-1 课程介绍 第2章 项目设计 包括需求分析,项?目设计,项?目架构,数据库设计等等. 2-1 项目设计 ...

  2. Elasticsearch之分词器的作用

    前提 什么是倒排索引? Analyzer(分词器)的作用是把一段文本中的词按一定规则进行切分.对应的是Analyzer类,这是一个抽象类,切分词的具体规则是由子类实现的,所以对于不同的语言,要用不同的 ...

  3. saga+.net core 分布式事务处理

    Apache ServiceComb Saga 是一个微服务应用的数据最终一致性解决方案 中文官方地址:https://github.com/apache/servicecomb-saga/blob/ ...

  4. java将配置信息写在数据库(利用反射)

    Demo出处: 1. package com.fpx.pcs.prealert.process.xml.service.impl; public class CainiaoPushMessageSer ...

  5. 关于Vue的component制作dialog组件

    其实原理很简单,兴个粟子, 点击按钮出现 dialog 弹出杠, 将dialog做成一个组件,components/dialog.vue 就是在components里面新建一个vue.将这个vue做为 ...

  6. JSP 异常处理

    JSP 异常处理 当编写JSP程序的时候,程序员可能会遗漏一些BUG,这些BUG可能会出现在程序的任何地方.JSP代码中通常有以下几类异常: 检查型异常:检查型异常就是一个典型的用户错误或者一个程序员 ...

  7. String C++完整实现。

    String C++实现 改进: /* 版权信息:狼 文件名称:String.h 文件标识: 摘 要:对于上版本简易的String进行优化跟进. 改进 1.(将小块内存问题与大块分别对待)小内存块每个 ...

  8. Vlmcsd（KMS）激活服务器程序

    1.下载vlmcsd程序 2-1.虚拟机版本: 新建Linux虚拟机,硬件仅保留内存(最小14MB,推荐16MB).处理器(1个1核心).软盘(指向floppy144.flp).网络适配器(桥接模式) ...

  9. 轮播图插件 SuperSlide2.1滑动门jQuery插件

    http://down.admin5.com/demo/code_pop/18/562/ SuperSlide2.1滑动门jQuery插件

  10. jquery基础 笔记三

    一. 操作"DOM属性" 在jQuery中没有包装操作"DOM属性"的函数, 因为使用javascript获取和设置"DOM属性"都很简单. ...