存档: 标签: ‘JQuery’

用HTML+Javascript开发AIR桌面程序

11 条评论 2009年11月7日

    早就听说Adobe Air可以用HTML+Javascript的方式来开发,但是直到前不就才开始研究学习。做了几个air的小程序,其中遇到了很多困难。Air的资料网上比较少。所以遇到问题有时候真不知道怎么办。

    其中一个问题是弹出提示窗口(屏幕右下角或者右上角那种提示性的临时窗口),不知道怎么调整大小和位置。找了好多资料,后来终于明白了。弹出窗口的代码如下:

var options = new air.NativeWindowInitOptions();
options.systemChrome = "none"; //取消系统窗口外框
options.type = "lightweight"; //轻量级窗口
options.transparent = true; //允许透明
var bounds = new air.Rectangle(100,200,100,100); 

var newHTMLLoader = air.HTMLLoader.createRootWindow(true, options, true, bounds);
newHTMLLoader.load(new air.URLRequest("notify.html"));
newHTMLLoader.stage.nativeWindow.alwaysInFront = true; //窗口始终置顶

上面这段代码会在屏幕的左上方(x:100,y:200)创建一个宽高都是100px的HTML窗口,内容是notify.html。
    其中,newHTMLLoader.window 可以访问到新建的窗口。可以预先定义一些函数,供窗口加载完后调用。比如:

newHTMLLoader.window.on_load = function()
{
     alert('loaded!');
}

然后在notify.html页面里面写上 window.onload = on_load; 就可以了。

    而控制窗口宽高、位置的对象是newHTMLLoader.stage.nativeWindow 。可以通过设置这个对象的 x,y,width,height(而不是我们通常认为的left,top,width,height)属性来改变窗口的长宽和位置。 在nofity.html里对应的对象是window.nativeWindow。

    nativeWindow貌似是ActionScript里面的比较常用的东西。不过对我们这种没有研究过AS的人来说,不容易想到控制位置是用x和y,而不是left和top。。。。。。

    下面说下开发AIR程序比开发WEB程序爽的地方:

  • 在应用程序沙箱中的代码可以任意跨域访问!而且更爽的是AIR会自动保存和处理Cookie,也就是说我可以用AJAX来模拟登录,之后可以直接用AJAX取登录后才能取得的内容而不用担心Cookie!真是太神奇了!
  • AIR采用Webkit引擎,不用担心跨操作系统的兼容性。最多是字体显示稍微不同而已。而且可以使用大部分的JS框架,比如JQuery!
  • AIR支持部分CSS3! 其中比较爽的是可以很容易的实现圆角效果,颜色可以使用RGBA(第四个参数是透明度)。好处是我们可以很容易的制作一个背景半透明,但是内容不透明的圆角提示窗口~~(例如:-webkit-border-radius:5px; background-color:rgba(20%,20%,20%,0.8); )
  • 支持JS进行文件读取等本地操作,支持本地SQL等。。
视觉系火星播报河蟹娱乐朝花夕拾牛人很牛灰太狼软白沙八月洗澡火影那些事儿热豆腐