——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的官网 上面可以直接下载到。也可以通过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的官网上面有说明， 。
然后，我们创建一个Html5的页面，这个页面就是我们软件打开的主页面了。下面是我的页面的部分代码。
无标题文档 Rest
我们还需要一个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：窗口获得焦点时触发 这里值例举了一部分，更多的可访问官网。我这里为 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是多么的方便