SAPUI5实例一：来创建Web应用UI
试试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
- <!DOCTYPE html>
- <html>
- <head>
- <meta http-equiv='X-UA-Compatible' content='IE=edge' />
- <title>Hello World</title>
- <script id='sap-ui-bootstrap'
- src='http://localhost:8888/sapui5/resources/sap-ui-core.js'
- data-sap-ui-theme='sap_goldreflection'
- data-sap-ui-libs='sap.ui.commons, sap.ui.table'></script>
- <script>
- // create the DataTable control
- var oTable = new sap.ui.table.Table({
- editable : true
- });
- // define the Table columns
- var oControl = new sap.ui.commons.TextView({
- text : "{lastName}"
- }); // short binding notation
- oTable.addColumn(new sap.ui.table.Column({
- label : new sap.ui.commons.Label({
- text : "Last Name"
- }),
- template : oControl,
- sortProperty : "lastName",
- filterProperty : "lastName",
- width : "100px"
- }));
- oControl = new sap.ui.commons.TextField().bindProperty("value", "name"); // more verbose binding notationt
- oTable.addColumn(new sap.ui.table.Column({
- label : new sap.ui.commons.Label({
- text : "First Name"
- }),
- template : oControl,
- sortProperty : "name",
- filterProperty : "name",
- width : "80px"
- }));
- oControl = new sap.ui.commons.CheckBox({
- checked : "{checked}"
- });
- oTable.addColumn(new sap.ui.table.Column({
- label : new sap.ui.commons.Label({
- text : "Checked"
- }),
- template : oControl,
- sortProperty : "checked",
- filterProperty : "checked",
- width : "75px",
- hAlign : "Center"
- }));
- oControl = new sap.ui.commons.Link({
- text : "{linkText}",
- href : "{href}"
- });
- oTable.addColumn(new sap.ui.table.Column({
- label : new sap.ui.commons.Label({
- text : "Web Site"
- }),
- template : oControl,
- sortProperty : "linkText",
- filterProperty : "linkText"
- }));
- oControl = new sap.ui.commons.RatingIndicator({
- value : "{rating}"
- });
- oTable.addColumn(new sap.ui.table.Column({
- label : new sap.ui.commons.Label({
- text : "Rating"
- }),
- template : oControl,
- sortProperty : "rating",
- filterProperty : "rating"
- }));
- // create some local data
- var aData = [ {
- lastName : "Dente",
- name : "Al",
- checked : true,
- linkText : "www.sap.com",
- href : "http://www.sap.com",
- rating : 4
- }, {
- lastName : "Friese",
- name : "Andy",
- checked : true,
- linkText : "https://experience.sap.com/fiori",
- href : "https://experience.sap.com/fiori",
- rating : 2
- }, {
- lastName : "Mann",
- name : "Anita",
- checked : false,
- linkText : "http://www.saphana.com/",
- href : "http://www.saphana.com/",
- rating : 3
- } ];
- // create a JSONModel, fill in the data and bind the Table to this model
- var oModel = new sap.ui.model.json.JSONModel();
- oModel.setData({
- modelData : aData
- });
- oTable.setModel(oModel);
- oTable.bindRows("/modelData");
- // finally place the Table into the UI
- oTable.placeAt("content");
- </script>
- </head>
- <body class='sapUiBody'>
- <div id='content'></div>
- </body>
- </html>
6.运行结果：
小结：
这个很简单的例子展示了SAPUI5的Table控件，创建了一个table，然后将json格式的数据与之绑定，最后在页面展示。
代码很简单，界面很漂亮，很好很强大。
SAPUI5实例一：来创建Web应用UI的更多相关文章
- Web Service 实例基于Socket创建Web服务
ServerSocket服务器端代码如下: public static void main(String[] args) throws IOException { // 1:建立服务器端的tcp so ...
- maven 学习---使用Maven创建Web应用程序项目
在本教程中,我们将演示如何使用 Maven 创建一个 Java Web 项目(Spring MVC). 用到的技术/工具: Maven 3.3.3 Eclipse 4.3 JDK 8 Spring 4 ...
- 2015年最全的移动WEB前端UI框架
目前,众多互联网公司APP都嵌入了大量的HTML5,移动端的开发越来越重视,HTML5的运用场景也越来越多了.在移动WEB开发的过程中,使用合适的移动WEB UI框架可以大大提升我们的开发效率.下面P ...
- 在Salesforce中创建Web Service供外部系统调用
在Salesforce中可以创建Web Service供外部系统调用,并且可以以SOAP或者REST方式向外提供调用接口,接下来的内容将详细讲述一下用SOAP的方式创建Web Service并且用As ...
- 【ASP.NET Web API教程】2.4 创建Web API的帮助页面
原文:[ASP.NET Web API教程]2.4 创建Web API的帮助页面 注:本文是[ASP.NET Web API系列教程]的一部分,如果您是第一次看本博客文章,请先看前面的内容. 2.4 ...
- Myeclipse 创建 Web Maven项目
1.创建Web项目 添加Maven支持 2.pom.xml 报如下错误: 解决办法: pom.xml里面添加依赖: <dependency> <groupId>com.thou ...
- web前端UI框架
分类:WEB前端 时间:2016年1月13日 目前,众多互联网公司APP都嵌入了大量的HTML5,移动端的开发越来越重视,HTML5的运用场景也越来越多了.在移动WEB开发的过程中,使用合适的移动WE ...
- 使用 ASP.NET Core MVC 创建 Web API（五）
使用 ASP.NET Core MVC 创建 Web API 使用 ASP.NET Core MVC 创建 Web API(一) 使用 ASP.NET Core MVC 创建 Web API(二) 使 ...
- asyncio创建协程解析——分析廖雪峰的Python教程之创建WEB服务（转）
第一步,搭建开发环境 所需第三方库: aiohttp,异步 Web 开发框架:jinja2,前端模板引擎:aiomysql,异步 mysql 数据库驱动 所需内置库: logging,系统日志:asy ...
随机推荐
- C#开发自己的Web服务器
介绍 我们将学习如何写一个简单的web服务器,用于响应知名的HTTP请求(GET和POST),用C#发送响应.然后,我们从网络访问这台服务器,这次我们会说“Hello world!” 背景 HTTP协 ...
- swift设计模式学习 - 装饰模式
移动端访问不佳,请访问我的个人博客 设计模式学习的demo地址,欢迎大家学习交流 装饰模式 在不必改变原类文件和使用继承的情况下,动态地扩展一个对象的功能.它是通过创建一个包装对象,也就是装饰来包裹真 ...
- IPTABLES拒绝某个IP某项服务，并记录到日志（rhel7实例）
#iptables -I INPUT -p icmp -s 192.168.0.1 -j DROP \\在INPUT链中插入:如果检测到从192.168.0.1发过来的 ...
- easyui combobox 拼音检索快捷选择输入
easyui combobox 拼音检索快捷选择输入 效果如图 $.ajax({ url: UserActionUrl + '?action=listuserworktype', dataType ...
- jquery 报错 $.cookie is not a function()
jquery 报错 $.cookie is not a function() ——我是之前可以运行的项目,突然报这个错误,很奇怪. 这是jquery的cookie插件报错. 插件名: jquery.c ...
- LIS学习笔记（两种算法）O(n^2) 和 O(nlogn)
2017-09-02 10:34:21 writer:pprp 最长上升子序列,具体分析看代码:O(n^2)的做法,dp的思想 分析:每次读一个进行扫描,如果当前读入的这个要比之前的大, 说明有可能加 ...
- [小问题笔记（四）] Enum枚举类型转换为DataTable（ C# ）
枚举: public enum ProductType { 小产品=, 大产品, 超大产品 } 转换方法: /// <summary> /// 枚举类型转化为DataTable /// & ...
- 用gitolite搭建git server
在Ubuntu上测试安装一下git server,为后面项目的代码管理做准备.记录流水账如下, 中间关于git 命令的使用说明不做过多解释,需要了解的请google或者直接git help: 我用到了 ...
- thinkphp getField("xxxxx", true); 得到一个字段所有值组成的的数组
很多时候我们只需要一张表里某个字段的值,组成的数组 $Channel = D('channel');$channelList = $Channel->order('user_name')-> ...
- [Vue]使用 vue-i18n 切换中英文
1.引入 vue-i18n import Vue from 'vue' import VueI18n from 'vue-i18n' import merge from 'lodash/merge' ...