文档章节

Webtop Html5 桌面App开发系列(一)

ForEleven
 ForEleven
发布于 2012/11/01 23:43
字数 1450
阅读 3422
收藏 12

         Webtop——html5桌面app开发引擎。基于webtop,你可以使用html5和css3等新技术构建桌面app,即开发直接运行于windows上的软件,使用透明渲染模式能将网页直接渲染在桌面上,轻松实现透明阴影等特效。

        在我上一篇博客中,简单的介绍了Webtop。Webtop是一个开源的项目,目前只有作者Gdy一人在开发维护。它是用c++编写,而我不会c++,我只是一个使用者。所以下面我将一个使用Webtop的开发者来介绍Webtop的api的使用。帮助作者为Webtop做一点推广吧。如果时间允许我也希望学习一下c++,能帮助作者一起来完善api。Webtop还有很大的发展前景,我认为甚至可以印象将来桌面App的模式。毕竟Web开发者要比桌面开发人员要多得多。

        目前,我正在使用Webtop开发一个小应用,目前正在仿着Zune做图片管理和音乐播放器功能,音乐播放器中还加入了随便听听功能,歌曲是拿的QQ音乐的。以后还打算加入Outlook的邮件,任务,待办事项,笔记本等功能。如果可能的话可以做成私密分享应用。

        开发第一个Webtop应用

        首先,我们需要先安装Webtop,在Webtop的官网 http://webtop.alloyteam.com 上面可以直接下载到。也可以通过Git 下载源码,自己用VS2010编译。安装的时候,win7需要已管理员身份运行,有安装杀毒软件的朋友,需要注意会被拦截。安装完以后,可以运行 air brower.exe,作者提供了几个小demo。

        为了方便开发,作者提供了Chrome的调试工具和简单的打包工具。也可以通过其他工具来打包。

        然后,我们创建一个Web工程,这里你可以使用DW,Aptana或者直接在一个文件中编写文本。我这里是使用的Aptana。

        

        这里我们需要创建一个 .app 的文件,这个文件是我们工程的配置文件。用记事本编写,然后保存为 .app 即可。

[BASE]
url=index.html    //网页地址
width=0           //初始化窗口宽度
height=0          //初始化窗口高度
enableResize=1    //允许改变窗口大小
enableDrag=0      //是否允许全窗口拖拽,仅对透明窗口有效
name=MyApp        //程序名字

 相关配置参数的说明在Webtop的官网上面有说明,http://webtop.alloyteam.com/?p=1#more-1 。

        然后,我们创建一个Html5的页面,这个页面就是我们软件打开的主页面了。下面是我的页面的部分代码。

<!DOCTYPE HTML>
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
		<title>无标题文档</title>
		<link href="css/css.css" rel="stylesheet" type="text/css">
		<link href="css/themes/gray/easyui.css" rel="stylesheet" type="text/css">
	</head>

	<body>
		<div id="app_bg" class="bg"></div>
		<div id="app_win" class="win">
			<div id="app_title" class="title">
				<div id="app_icon"></div>
				<div id="app_name">Rest</div>
				<div id="app_btn">
					<div id="app_close_btn"></div>
					<div id="app_max_btn" class="app_unmax_btn"></div>
					<div id="app_min_btn"></div>
				</div>
			</div>
			<div id="app_main" class="app_main">
				<div class="navigation-bar">
				</div>
				<div id="app_content">
					
				</div>
				<!-- end app_content -->
			</div>
		</div>
		<iframe src="http://qzone-music.qq.com/fcg-bin/fcg_set_musiccookie.fcg?fromtag=31"></iframe>
	</body>
	<script type="text/javascript" src="js/core.js"></script>
</html>

         我们还需要一个js文件,来让Webtop渲染我们的这个页面。Webtop提供了一个js对象webtop,让我们在js中调用webtop提供的一些本地App的api。 我需要在这个js文件添加一个监听来让Webtop渲染我们的页面。

addEventListener("webtopReady", Rest.init.readyHandler);

这句代码最好写在js文件的最下面,保证js对象都加载完成后。Webtop中自定义了一些事件来对应桌面App的一些事件行为。比如:

■webtopReady事件,webtop对象创建完成之后触发,有关webtop的初始化调用请放在此事件触发之后。 监听代码:addEventListener(“webtopReady”,readyHandler);//其中webtopReady为事件名,readyHandler为事件的回调函数。以下事件的监听方法与此相同。注:对webtopReady事件的监听请放在onload之前。
 ■webtopWindowResize:webtop窗口改变大小之后触发,e.detail的结构如下{width:243,heigh:234}。width和height为窗口的宽度和高度
 ■webtopWindowMove:webtop窗口移动后触发,e.detail结构如下{x:34,y:43},x和y为窗口的坐标,相对于屏幕
 ■webtopDragDrop:当拖拽文件到窗口时触发,仅在透明渲染模式下有效(因为在此模式下html5的拖拽功能会失效)。e.detail的结构如下{list:["E:/webtop/1.png","E:/webtop/2.png"]}。list为文件列表,存储各个文件的路径
 ■webtopWindowActive:窗口激活时触发
 ■webtopWindowFocus:窗口获得焦点时触发

这里值例举了一部分,更多的可访问Webtop官网。我这里为 webtopReady事件绑定了一个js方法,在这个方法中,我对我的App界面做了一些初始化工作。

readyHandler : function() {
			var screenSize = webtop.getScreenSize();  //获取屏幕大小
			Rest.cfg.width = screenSize.width;
			Rest.cfg.height = screenSize.height;
			webtop.move(0, 0);  // 移动app
			webtop.max();  // app最大化
			Rest.win.max();
			console.log('ready');
			relayoutWin();

			Rest.win.init();   //初始化App界面
			Rest.menubar.init();  //初始化菜单栏
			Rest.girl.init();  // 初始化Girl图片欣赏界面
		}

对App界面的编写,一些功能完全使用Html、css、js去做就好了。我们在页面上面引用这个js。然后我们就可以运行我们编写的App了。这里建议开发的时候直接双击.app来运行,Webtop是支持多实例同时运行的。如果.app不能打开,我们可以手动选择一下打开方式,关联到 air brower.exe。

下面是编写软件的主界面:

 

如果有感兴趣的朋友,我可以共享出我的App,让大家看一下运用Webtop编写桌面App是多么的方便

© 著作权归作者所有

ForEleven
粉丝 207
博文 32
码字总数 28047
作品 1
架构师
私信 提问
加载中

评论(12)

f
fame_yao
共享的东西在哪可以看到?
三国vip
三国vip
为什么做出来的APP在拖拽的时候都有延迟花屏呢?请问能解决吗?
ForEleven
ForEleven 博主

引用来自“lycvip”的评论

使用的是 chromiumembedded

恩 是的 用的 cef
kiwisoft
kiwisoft
使用的是 chromiumembedded
ForEleven
ForEleven 博主

引用来自“缪斯的情人”的评论

引用来自“FengJ”的评论

引用来自“缪斯的情人”的评论

窗口的拖拽效果会出现桌面滞留现象

我这边很是流畅啊,不知道你是怎么写的,你在那个交流群里的话,我可以把的写法给你看下

我试的是下的那个demo,在xp系统下拖拽卡屏

哦,我是win7下面的,xp没试过,晚上用虚拟机试下
缪斯的情人
缪斯的情人

引用来自“FengJ”的评论

引用来自“缪斯的情人”的评论

窗口的拖拽效果会出现桌面滞留现象

我这边很是流畅啊,不知道你是怎么写的,你在那个交流群里的话,我可以把的写法给你看下

我试的是下的那个demo,在xp系统下拖拽卡屏
ForEleven
ForEleven 博主

引用来自“缪斯的情人”的评论

窗口的拖拽效果会出现桌面滞留现象

我这边很是流畅啊,不知道你是怎么写的,你在那个交流群里的话,我可以把的写法给你看下
铂金小猪
铂金小猪
看起来不错,一会儿弄一个看看。
缪斯的情人
缪斯的情人
窗口的拖拽效果会出现桌面滞留现象
傅小黑
傅小黑
想起了Adobe AIR。。只是他只管他的flash,不管html的事情
Html5桌面app开发引擎 -- Webtop

作为一个Web开发者,也许我们也想做一些桌面App,但是我们不会C++,不会Python,不熟悉传统桌面App的开发模式。当我们学习了开发桌面App了,会发现在后台写控件来控制界面的显示是多么痛苦的...

ForEleven
2012/10/31
3.3K
13
[读写网] 2011 HTML5的六大趋势

导读:HTML5无疑是2011年度最耀眼的技术明星,它的威力使一些论者认为Flash、Silverlight和Win32这三大曾经的主流开发平台都进入了垂死期,它也将主导Web与原生应用(Native App)的未来走向...

xianlai
2011/12/08
1K
4
HTML5定稿了,为什么原生App世界将被颠覆

2007年W3C(万维网联盟)立项HTML5,直至2014年10月底,这个长达八年的规范终于正式封稿。 过去这些年,HTML5颠覆了PC互联网的格局,优化了移动互联网的体验,接下来,HTML5将颠覆原生App世界...

程序袁_绪龙
2015/01/05
499
0
好程序员技术分享html5和JavaScript的区别

好程序员技术分享html5和JavaScript的区别,HTML5广义上讲是前端开发学科的代名词,包含HTML5、CSS3及JavaScript三个重要的部分,是运行在浏览器上应用的统称。如PC端网站、管理系统、手机网...

好程序员IT
04/26
17
0
Webtop Html5 桌面App开发 -- 整合人人网登陆

Webtop 既然是用html+css+js来开发桌面APP,那么在做一些娱乐社交应用的时候,去整合一些开放平台的时候也是十分方便的。我们直接可以使用jQuery的ajax来和开放平台交互就可以。 昨天,我在尝...

ForEleven
2012/11/07
973
10

没有更多内容

加载失败,请刷新页面

加载更多

如何在Linux中复制文档

在办公室里复印文档过去需要专门的员工与机器。如今,复制是电脑用户无需多加思考的任务。在电脑里复制数据是如此微不足道的事,以致于你还没有意识到复制就发生了,例如当拖动文档到外部硬盘...

老孟的Linux私房菜
55分钟前
25
0
SpringBoot 集成MongoDB

一、MongoDB 简介 MongoDB 如今是最流行的 NoSQL 数据库,被广泛应用于各行各业中,很多创业公司数据库选型就直接使用了 MongoDB,但对于大部分公司,使用 MongoDB 的场景是做大规模数据查询...

zw965
今天
32
0
使用 Envoy 和 AdGuard Home 阻挡烦人的广告

> 原文链接:使用 Envoy 和 AdGuard Home 阻挡烦人的广告 通常我们使用网络时,宽带运营商会为我们分配一个 DNS 服务器。这个 DNS 通常是最快的,距离最近的服务器,但会有很多问题,比如: ...

米开朗基杨
今天
36
0
springboot之全局处理异常封装

springboot之全局处理异常封装 简介 在项目中经常出现系统异常的情况,比如NullPointerException等等。如果默认未处理的情况下,springboot会响应默认的错误提示,这样对用户体验不是友好,系...

Purgeyao
今天
42
0
cookie

cookie: n. 饼干;小甜点 为什么会引入Cookie(在客户端保持http状态) 因为http协议是一种无状态协议,web服务器本身不能识别出哪些请求是同一个服务器发送的,浏览器的每一次请求都是独立...

五公里
今天
41
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部