麻球开发者平台,麻球开发者大赛

只看楼主 楼主

艾睿会员有特权,登陆后广告自动屏障。
现在就花5秒钟免费注册!更有好礼相送!

Adobe AIR迷你教程 -- 使用自定义窗口以及对窗口的移动,缩放,关闭操作

这个教程主要针对对flex有一定基础,准备开始AIR开发的朋友。由于AIR是针对桌面应用程序,所以相对于flex的web应用,自然就多出了 对应用程序窗口的控制。而 AIR的一大特点就是允许开发者使用自定义的窗口代替系统窗口从而使开发者对程序UI的设计更加随心所欲,设计出独具个性风格的跨平台的桌面应用程序。

罗嗦的话到次为止,下面正式开始主题,教程主要实现了以下功能。

1. 屏蔽系统窗口、 flash窗口、窗口底部状态栏。使用自定义窗口。
2. 对自定义窗口的缩放、移动、关闭。

在实现以上操作的过程中,我加入了一些额外的操作来丰富我们的demo,都是很简单,很实用的东西。

3. 移动窗口时实现半透明效果,移动结束时还原。
4. 关闭窗口动画。
5. 窗口背景填充。


1. 屏蔽系统窗口, flash窗口,窗口底部状态栏。使用自定义窗口。

当一个AIR项目创建成功后,你会发现相对与 web项目,你的工程目录下多了一个名为 XXX-app.xml的文件,这是我们项目的配制文件,实现自定义窗口就是靠它。打开它,修改如下代码:

<!-- The type of system chrome to use (either "standard" or "none"). Optional. Default standard. -->
<!--<systemChrome></systemChrome>


去掉对systemChrome的注释,改为

<!-- The type of system chrome to use (either "standard" or "none"). Optional. Default standard. -->
<systemChrome>none</systemChrome>


这样我们就去掉了系统窗口,转而使用了flash的自带窗口,下面我们把flash窗口也去掉。在你的主mxml文件中设置WindowedApplication 的这些属性

<mx:WindowedApplicationshowTitleBar="false"borderThickness="0"showStatusBar="false"showGripper="false" ..... />

这样就完全去掉了所有的窗口,程序运行后只显现应用程序的内容。大家可以参考帮助手册来了解以上属性的意思。说到这里就引出了下一个问题,屏蔽了所有窗口以后如何对窗口进行基本的,放大,缩放,关闭操作呢。我们看下面。


2. 对自定义窗口的缩放,移动,关闭。

AIR比flex web应用多了一个类叫NativeWindow,我们就是靠这个类对窗口就行操作。在demo中,我用了以下几个方法来移定窗口,他们都在鼠标MouseDown event中被触发。

this.nativeWindow.startResize("L");
this.nativeWindow.startResize("R");
this.nativeWindow.startResize("T");
this.nativeWindow.startResize("B");
this.nativeWindow.startResize("TL");
this.nativeWindow.startResize("RB");


很容易可以看出,L R B T代表 Left, Right, Bottom 和 Top, 所以在调用startResize时设置适当的参数我们就可以轻易的实现对窗口各个方向的缩放。对于窗口的移定,在mouseDown event中使用

this.nativeWindow.startMove();

而对窗口的关闭,则很简单的在按钮click事件调用this.close()。

好了,以上就是对自定义窗口的操作。下面的东西我是用来完善我的demo,使它cool一点。相信大家在自己的应用程序中也会需要类似的东西,一个应用程序除了功能,细节上的处理也是很重要的。

3. 移动窗口时实现半透明效果,移动结束时还原。

要实现这个效果我们需要重新打开我们的XXX-app.xml文件,设置以下内容。

<
!--Whether the window is transparent. Only applicable when systemChrome is none. Optional. Default false.-->
<transparent>true</transparent>

这个可以允许我们让应用程序的背景透明,这个很有用,比方说QQ宠物就是一个背景透明的应用程序,利用背景透明,我们可以开发出很独特的应用程序。接下来要做的就简单了。

在上面移动窗口的mouseDown事件中加入 this.alpha = 0.x; 下面是demo中的代码。我将透明度设为0.6,this. alpha只针对应用程序的背景设置透明,如果你想让更多的东西透明,只需要对相应的控件设置alpha既可。

private function moveMe():void{
this.nativeWindow.startMove();
this.alpha = 0.6;
}


让透明还原我在mouseUp事件中设置alpha =1;

private function mouseUpHandle():void{
this.alpha = 1;
}

这样简单的设置也许就会使你的应用程序看起来不一样,怎么不试试呢:)

4. 关闭窗口动画。

我 使用了下面的Iris效果对在窗口关闭时使用。有什么效果呢,大家关闭一下就知道了。 flex中内置了很多效果给我们使用,很多时候我们只需要适当的组合,就能得到意想不到的效果,比如 Move与 WipeDown一起可以实现Mac系统,菜单向下滑出的效果。诸如此类,只要有想像力,我们可以用很简单的代码,实现很有用的功能。 在demo 中,如下设置得到关闭动画

<mx:WindowedApplicationcloseEffect="irisIn"..... />

<mx:Iris id="irisIn" duration="500" showTarget="false"/>

5. 窗口背景填充。

这 个功能其实在开发程序的时候用的不多,我是不想让demo看起来太单调所以加了背景,我们知道flex是不能像Html那样轻易的让背景重复显示的,所以 我们的用一些特殊方法处理以下,demo中的 setBackground方法用于设置整个背景。这里面涉及到的 Bitmap, BitmapData, Graphics类的具体作用,大家感兴趣的话可以看帮助手册,我的观点是当里用到的时候查帮助也不迟,只要知道有这么些个类可以为你干什么活就好。

private function setBackground():void{

var backgroundImage :Bitmap;
var backgroundBitmapData :BitmapData;

backgroundImage = new bg();
backgroundBitmapData = new BitmapData( backgroundImage.width, backgroundImage.height );
backgroundBitmapData.draw( backgroundImage );

workarea.graphics.beginBitmapFill( backgroundBitmapData, null,true );
workarea.graphics.drawRect(0,0, 2000, 2000);
workarea.graphics.endFill();
}




以上就是demo的全部内容 因为AIR是跨平台的应用程序,所以不管在Mac或者Window上开发过程都是一样的。Demo是在 Leopard下开发。


原文:http://www.flextheworld.com/?p=58
[本帖最后由 kevin.luo.sl 于 2009-01-02 20:55:24 编辑]

(您是游客)您没有权限查看附件

kevin.luo.sl的签名

评分

举报 使用道具 TOP

只看该用户 沙发!

Re:Adobe AIR迷你教程 -- 使用自定义窗口以及对窗口的移动,缩放,关闭操作

顶!!!!自然还包括Linux系统
常青的签名
常青的专栏:http://blog.csdn.net/lixinye0123

评分

举报 使用道具 TOP

只看该用户 板凳

唯一一点小缺陷:如果在鼠标停留在边缘和角上的时候能像普通窗口一样,显示拖放的指针(双箭头)同时实现拖放,那这个窗口基本上就和一个普通的窗口没区别,也更自然了。

评分

举报 使用道具 TOP

只看该用户 地板

评分

举报 使用道具 TOP

只看该用户 #4

顶,谢谢啊,很有帮助,敢些楼主了

评分

举报 使用道具 TOP

只看该用户 #5

真的谢谢管理员了,你们辛苦了

评分

举报 使用道具 TOP

只看该用户 #6

看来版主花了不少时间去搜寻资料,真系辛苦了.

评分

举报 使用道具 TOP

只看该用户 #7

谢谢LZ   学习中

评分

举报 使用道具 TOP

只看该用户 #8

谢谢LZ   学习中

评分

举报 使用道具 TOP

只看该用户 #9

恩,多多学习。谢谢

评分

举报 使用道具 TOP

只看该用户 #10

我想问一下,我下你的源码,回去导入后,运行不了,不知道什么原因(声明:我是一个菜鸟!)有望楼主多提点!

评分

举报 使用道具 TOP

只看该用户 #11

很不错
ivsme的签名

评分

举报 使用道具 TOP

只看该用户 #12

谢谢LZ   学习中

评分

举报 使用道具 TOP

只看该用户 #13

很不错,我太喜欢了,只是不会用
[本帖最后由 ivsme 于 2009-03-16 23:16:53 编辑]
ivsme的签名

评分

举报 使用道具 TOP

只看该用户 #14

学到不少东西啊

评分

举报 使用道具 TOP

只看该用户 #15

谢谢楼主

评分

举报 使用道具 TOP

只看该用户 #16

得到,学到......饱饱的

评分

举报 使用道具 TOP

只看该用户 #17

谢谢楼主

评分

举报 使用道具 TOP

只看该用户 #18

多多学习啊

评分

举报 使用道具 TOP

只看该用户 #19

我看帖,我回帖,我美德!

太好了,谢谢楼主

评分

举报 使用道具 TOP

只看该用户 #20

好好学习
天梯梦的签名
Gideon

评分

举报 使用道具 TOP

只看该用户 #21

终于找到有DEMO下载了,谢谢

评分

举报 使用道具 TOP

只看该用户 #22

恩,多多学习。谢谢

评分

举报 使用道具 TOP

只看该用户 #23

多多学习!
haoqinghu的签名
大家互相学习!!!

评分

举报 使用道具 TOP

只看该用户 #24

谢谢了哦

评分

举报 使用道具 TOP

只看该用户 #25

唯一一点小缺陷:如果在鼠标停留在边缘和角上的时候能像普通窗口一样,显示拖放的指针(双箭头)同时实现拖放,那这个窗口基本上就和一个普通的窗口没区别,也更自然了。
-- by 会员 alexma (2008-11-26 10:41:59)


要解决鼠标停留在窗体边缘禁止拖放,可以在app.xml里做如下修改:
<resizable>false</resizable>

评分

举报 使用道具 TOP
艾睿会员有特权,登陆后广告自动屏障。现在就花5秒钟免费注册!更有好礼相送!