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# 生成图片缩略图
最近项目有部分需求,是关于图片操作部分的, 大致的功能就是图片的保存和展示.但是直接操作原图,程序运行效率太慢.而且如果传输数据量过大的话,可能直接导致调用WCF服务失败的问题. 为了解决这个问题,决 ...
- ZeroMq实现跨线程通信
ZeroMq实现跨线程通信 之前在技术崇拜的技术经理指导下阅读了ZeroMq的基础代码,现在就将阅读的心得与成果记录一下,并重新模仿实现了一下经理的异步队列. 1.对外接口 //主要接口(1)void ...
- 缓存技术内部交流_03_Cache Aside
参考资料: http://www.ehcache.org/documentation/3.2/caching-patterns.html http://www.ehcache.org/document ...
- nyoj——弃九法
A*B Problem 时间限制:1000 ms | 内存限制:65535 KB 难度:2 描述 设计一个程序求出A*B,然后将其结果每一位相加得到C,如果C的位数大于等于2,继续将C的各位数 ...
- cocos对象池的使用
enemy.js cc.Class({ extends: cc.Component, properties: { enemySpeed: 0, //设置加速度 }, //初始化当前节点的y坐标 ini ...
- hdu 4679 Terrorist’s destroy 树的直径+dp
题意:给你一棵树,每条边都有值W,然后问你去掉一条边,令val = w*max(两颗新树的直径),求val最小值~ 做法,先求树的直径,然后算出直径上每个点的最长枝条长度.这样对于每一条边,假如是枝条 ...
- Highcharts 树状图(Treemap)
Highcharts 树状图(Treemap) 树状图 series 配置 设置 series 的 type 属性为 treemap ,series.type 描述了数据列类型.默认值为 " ...
- Ansible 小手册系列 九（Playbook）
playbook是由一个或多个"play"组成的列表.play的主要功能在于将事先归并为一组的主机装扮成事先通过ansible中的task定义好的角色.从根本上来讲所谓task无非 ...
- FortiDDoS是使用历史流量基线进行检测的
Understanding FortiDDoS Detection ModeIn Detection Mode, FortiDDoS logs events and builds traffic st ...
- vue的slot的使用问题
slot的使用问题 根据官方文档来说,有三种使用方式 https://cn.vuejs.org/v2/guide/components.html#%E4%BD%BF%E7%94%A8%E6%8F%92 ...