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 ...
随机推荐
- MySQL_解决ERROR 2006 (HY000) at line XX MySQL server has gone away问题
参考:http://www.111cn.net/database/mysql/106911.htm 1.修改mysqld的配置文件my.cnf 调整max_allowed_packet的值,修改为5M ...
- Docker pull网络错误
[root@Oracle ~]# docker search centos Error response from daemon: Get https://index.docker.io/v1/sea ...
- BZOJ4765: 普通计算姬
BZOJ4765: 普通计算姬 题目描述 传送门 题目分析 求的和非常奇怪,不具有连续性,所有上树的数据结构全死了. 考虑分块,思考对于一段连续的询问区间可以直接询问整块,零散块可以在树上dfs序暴力 ...
- 如何优雅的进入IT世界
原始地址:http://www.cocoachina.com/gamedev/misc/2014/0613/8808.html 以下三段是废话,请跳过. (废话段1)有文科生想了解IT世界.这并不 ...
- 【链接】Eclipse的Debug调试技巧
Eclipse的Debug调试技巧大全 https://mp.weixin.qq.com/s/bORg9YxJiby2WenYRrXY-w 使用Eclipse调试Java程序的10个技巧 https: ...
- hdu 4857 逃生 拓扑排序+逆向建图
逃生 Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others) Problem Descr ...
- ECMAScript6教程目录
ECMAScript 6 简介 let 和 const 命令 数组的解构赋值 字符串的扩展 正则的扩展 数值的扩展 函数的扩展 数组的扩展 对象的扩展 Symbol Set 和 Map 数据结构 Pr ...
- python调用虹软2.0第二版
第一版踩了无数的坑,终于第二版把坑全添了,这次更新可以正常获取人脸数,角度,代码可读性更高,继续更新中 第三版已发出 https://www.cnblogs.com/wxt51/p/10125460. ...
- Sql Server中的DBCC命令详细介绍
一:DBCC 1:什么是DBCC 我不是教学老师,我也说不到没有任何无懈可击的定义,全名:Database Console Commands.顾名思义“数据库控制台命令”,说到“控制台“,我第一反应就 ...
- R-模式(mode)和类(class)
数据模式:mode函数显示任何对象的模式.常见的单个的对象模式是逻辑型(Logical).数值型(Numeric).字符型(Character). 常用到的数据模式是列表(list). 逻辑型:TRU ...