Adobe AIR右键菜单和系统托盘（Tray)功能以及实现方法

AIR教程

Adobe AIR右键菜单和系统托盘（Tray)功能以及实现方法

右键菜单：

var mainMenu:NativeMenu = new NativeMenu();
var minimizeMenu:NativeMenuItem = new NativeMenuItem("Minimize");
var maximizeMenu:NativeMenuItem = new NativeMenuItem("Maximize");
var sepMenu:NativeMenuItem = new NativeMenuItem("",true);
var restoreMenu:NativeMenuItem = new NativeMenuItem("Restore");
var closeMenu:NativeMenuItem = new NativeMenuItem("Close");
minimizeMenu.addEventListener(Event.Select, handleMenuClick);
maximizeMenu.addEventListener(Event.Select, handleMenuClick);
restoreMenu.addEventListener(Event.Select, handleMenuClick);
closeMenu.addEventListener(Event.Select, handleMenuClick);
mainMenu.addItem(minimizeMenu);
mainMenu.addItem(maximizeMenu);
mainMenu.addItem(sepMenu);
mainMenu.addItem(restoreMenu);
mainMenu.addItem(closeMenu);
this.contextMenu=mainMenu;
系统托盘:

var sysTray:SystemTrayIcon =
  NativeApplication.nativeApplication.icon as SystemTrayIcon;
  sysTray.tooltip = "测试tray";
  //
  sysTray.menu = this.contextMenu;
  sysTray.addEventListener(MouseEvent.CLICK,trayClick);

如何将应用程序最小化到托盘,然后给托盘图标加右键菜单以及添加相应的事件,来激活应用程序窗体.
整个流程:
1.       初始化应用时改变系统默认情况下以系统X事件的处理.
2.       定义新处理逻辑(本文是弹出对话框)
3.       生成托盘图标并置于状态栏
4.       给托盘图标加上右键菜单(本文是exit,和open两项)
5.       给菜单加上相应的事件
6.       大功告成

主要方法:

1. private var dockImage:BitmapData; 
2.               
3.         //初始化Application里调用此方法,完成上面的第一步: 
4.             public function initApplication():void{ 
5.                 var loader:Loader=new Loader(); 
6.                 loader.contentLoaderInfo.addEventListener(Event.COMPLETE,prepareForSystray);// 这里就是完成第一步的任务须,这个prepareForSystray就是对托盘的生在和菜单的控制 
7.                 loader.load(new URLRequest("assets/images/32.png"));//这里先要加载托盘图标的小图片 
8.                 this.addEventListener(Event.CLOSING,closingApplication);//设置关闭体的事件 
9.             } 
10.               
11.         //关闭窗体的事件 
12.             public function closingApplication(event:Event):void{ 
13.                 event.preventDefault();//阻止默认的事件 
14.                 Alert.yesLabel="Close"; 
15.                 Alert.noLabel="Mini"; 
16.                 Alert.show("Close or Minimize?", "Close?", 3, this, alertCloseHandler);//弹出自定义的选择框, 关于Alert的详细用法,参考官方文档或我前面的相关文章. 
17.             } 
18.         //根据用户的选择来判断做什么,这里选择是就是关闭,选择否(Mini)就是最小化到托盘. 
19.         private function alertCloseHandler(event:CloseEvent):void{ 
20.             if(event.detail==Alert.YES){ 
21.                 closeApp(event); 
22.             }else{ 
23.                 dock();//最小化到托盘 
24.             } 
25.         } 
26.           
27.     //生成托盘 
28.         public function prepareForSystray(event:Event):void{ 
29.             dockImage=event.target.content.bitmapData; 
30.             if(NativeApplication.supportsSystemTrayIcon){ 
31.                 setSystemTrayProperties();//设置托盘菜单的事件 
32.                 SystemTrayIcon(NativeApplication.nativeApplication.icon).menu=createSystrayRootMenu();//生成托盘菜单 
33.             }     
34.         } 
35.           
36.         public function createSystrayRootMenu():NativeMenu{ 
37.             var menu:NativeMenu = new NativeMenu(); 
38.             var openNativeMenuItem:NativeMenuItem = new NativeMenuItem("Open");//生成OPEN菜单项 
39.             var exitNativeMenuItem:NativeMenuItem = new NativeMenuItem("Exit");//同理 
40.             openNativeMenuItem.addEventListener(Event.SELECT, undock); 
41.             exitNativeMenuItem.addEventListener(Event.SELECT, closeApp);//添加EXIT菜单项事件 
42.             menu.addItem(openNativeMenuItem); 
43.             menu.addItem(new NativeMenuItem("",true));//separator   
44.             menu.addItem(exitNativeMenuItem);//将菜单项加入菜单 
45. 
46.             return menu; 
47. 
48.         } 
49.         //设置托盘图标的事件 
50.         private function setSystemTrayProperties():void{ 
51.             SystemTrayIcon(NativeApplication.nativeApplication .icon).tooltip = "TurboSquid squidword"; 
52.             SystemTrayIcon(NativeApplication.nativeApplication .icon).addEventListener(MouseEvent.CLICK, undock); 
53.             stage.nativeWindow.addEventListener(NativeWindowDisplayStateEvent.DISPLAY_STATE_CHANGING, nwMinimized);   
54.         } 
55.           
56. //最小化窗体 
57.         private function nwMinimized(displayStateEvent:NativeWindowDisplayStateEvent):void { 
58.             if(displayStateEvent.afterDisplayState == NativeWindowDisplayState.MINIMIZED) { 
59.                 displayStateEvent.preventDefault();//阻止系统默认的关闭窗体事件 
60.                 dock();//将程序放入托盘 
61.             } 
62.         } 
63. 
64.         //将本地应用程序放到托盘 
65.         public function dock():void { 
66.             stage.nativeWindow.visible = false; //设置本地程序窗体不可见 
67.             NativeApplication.nativeApplication.icon.bitmaps = [dockImage];//设置托盘的图标 
68.         } 
69.           
70.         //激活程序窗体 
71.         public function undock(evt:Event):void { 
72.         stage.nativeWindow.visible = true;//设置本地程序窗体可见 
73.         stage.nativeWindow.orderToFront();//设置本地程序窗体到最前端 
74.         NativeApplication.nativeApplication .icon.bitmaps = [];将托盘图标清空 
75.         } 
76.           
77.         //关闭程序窗体 
78.         private function closeApp(evt:Event):void { 
79.             stage.nativeWindow.close(); 
80.         } 
81. 



用Flex建立一个100%窗口透明的AIR程序，以及打包成.AIR文件
Flex建立一AIR程序
窗口透明的AIR程序
打包成.AIR文件
第一步：打开FLEX3  创建一个 FLEX project


接着是命名，并选中 Desktop application 在AIR中运行

自动生产XML配置文件
创建好以后FLEX3会自动生产一些文件，再Src文件夹里会有两个XML描述语言：
.MXML文件为前台描述文件
.XML里面可以更改一些系统配置
本例：去除AIR窗口，并让AIR程序边界透明。
我们打开airia_ex_login-app.xml这个文件
找到： <systemChrime></systemChrime> 和 <transparent></transparent>

修改为下图蓝色区域。
<systemChrime>none</systemChrime>  表示没有系统窗口
<transparent>true</transparent>    表示开启背景透明

注意：要去掉<!-- --> 也就是说，本身默认文件是把这两项给注释掉了，我们现在把他启用。
注意2：本教程省略了案例中“AIR界面UI设计”的过程，UI界面源文件在附件内里有。

这样我们就完成了第一步。运行一下看看结果？

我们发现FLEX有个默认的STYLE显示了出来。我们现在要想办法把他去掉
第二步：配置MXML文件中的“mx:WindowedApplication”
在 mx:WindowedApplication 内添加一下定制便可去掉FLEX默认的风格界面。
showFlexChrome="false"     
alwaysInFront="true"
layout="absolute"
这里我们再把界面大小设定好。
width="314"
height="460"
如图：

再次运行看看：

GOOD！一个完美100%透明的AIR RUN起来了。

也许你还会碰到一下问题
窗口没办法在桌面拖动？
没办法关闭和最小化？
请关注AIRIA.cn原创教程的下一集


最后把此例的源文件、工程文件、安装.AIR文件全部提供给大家下载参考，忘各位网友支持AIRIA的发展。


附件：


扩展参考：flex制作一个用户登录框(含验证码)
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute"
            fontSize="12" horizontalAlign="center" creationComplete="init()">
          
<mx:Script>
<![CDATA[ import mx.controls.Alert; private function init():void{ generate.text=generateCheckCode(); } //login identifying private function loginHandler():void{ if(user.text==""||pass.text==""){ Alert.show("user or pass is empty","tips"); }else{ if(user.text=="shane"&&pass.text=="shane" &&identify.text.toLowerCase()==generate.text.toLowerCase()){ Alert.show("login is OK","tips"); currentState="hollow"; }else{ if(identify.text.toLowerCase()!=generate.text.toLowerCase()){ Alert.show("indentifyCode is error","tips"); generate.text=generateCheckCode(); }else{ Alert.show("user or pass error","tips"); } } } } //clear private function clearHandler():void{ user.text=pass.text=""; } //generate identifying coder private function generateCheckCode():String{ //init var num:Number; var code:String; var checkCode:String=""; for(var i:int=0;i<5;i++){ num=Math.round(Math.random()*100000); if(num%2==0){ code=String.fromCharCode(48+(num%10)); }else{ code=String.fromCharCode(65+(num%26)); } checkCode +=code; } return checkCode; } ]]>
</mx:Script>
          
<mx:Panel id="panel" x="143" y="115" width="350" height="229" layout="absolute" title="login">

<mx:Button id="btnLogin" x="73" y="141" label="login" click="loginHandler()"/>
<mx:Button id="btnClear" x="167" y="141" label="clear" click="clearHandler()"/>

<mx:Label x="44" y="31" text="user"/>
<mx:Label x="44" y="64" text="pass"/>

<mx:TextInput id="user" x="81" y="31"/>
<mx:TextInput id="pass" x="81" y="62" displayAsPassword="true"/>
<mx:Text x="28" y="100" text="identify"/>
<mx:TextInput x="81" y="98" width="50" id="identify"/>
<mx:Label x="139" y="100" width="48" id="generate"/>
<mx:Label x="195" y="100" text="看不清楚 换个~~" click="generateCheckCode()"/>

</mx:Panel>

  <mx:states>
   <mx:State name="hollow">
    <mx:RemoveChild target="{panel}"/>
    <mx:AddChild position="lastChild">
     <mx:Label text="hollow marshane" x="0" y="200" fontSize="200" color="red"/>
    </mx:AddChild>
   </mx:State>
  </mx:states>

</mx:Application>




自动配置和在线安装Adobe AIR运行环境(AIR Express Install Badge )

接触Adobe AIR的朋友一定会有这样一个疑惑：
如果客户的电脑上没装Adobe AIR运行环境怎么办？
事实上，我们明白，在Adobe AIR普及率还不算高的今天（尤其在中国）总是告诉客户“请先下载Adobe AIR1.1”会显得太不“友好”。因为可能网友们一时半会还没明白“AIR”是什么，我为什么要安装这个东西？
现在给大家介绍来自Adobe的解决方案：AIR Express Install Badge
如果你需要发布一个Adobe AIR应用,没有安装Adobe AIR运行环境的客户机它会为你自动地先安装Adobe AIR运行环境，然后再安装Adobe AIR应用。当然已经安装了AIR运行环境的就会直接安装AIR应用了. 这种在线安装AIR的方法很方便。
AIR Express Install Badge 事实上是一种Adobe AIR推出的“在线安装”AIR应用的方式。
怎样创建一个Adobe AIR应用在线安装?（步骤和下载）：
• 首先需要下载和配置AIR SDK     [ 下载1（AIR at WIN）下载2 （AIR at mac）更多SDK AIR Flash开发中心 ]
• 然后需要创建一个在线安装时用的图片
• 接着可以使用Flash来创建一个安装动画
简而言之，这个方法就是使用一个Flash动画作为在线安装的前端（因为FLASH的普及率是相当高的），这个时候通过FLASH来判断客户端是否有 Adobe AIR运行环境，如果没有则自动先安装Adobe AIR运行环境(当然时间也会变的长一些，需要下载、安装)，接着再自动安装这个AIR应用。这个过程客户几乎察觉不到他安装了AIR。
Adobe AIR应用在线安装(配置方法) ：
1.创建安装FLASH动画的背景图像
创建一个215px x 100px 图像，被用来作为背景。 默认的在线安装区域为 217px x 180px 。

2.配置SWF
       参数：
• 应用程序名称(appname)：也就是你的AIR应用的名称。
• 应用程序路径 (appurl)：你的AIR应用程序的下载路径。 (比如：http://www.AIRia.cn/myAirApp.air)
• AIR版本（airversion）： AIR应用的版本。比如AIR1.1
• 安装按钮的颜色(buttoncolor) ：如果需要,可以试用十六进制定义一个按钮颜色。(默认是灰色）
• 安装文字信息的颜色(messgagecolor) ：如果需要,可以试用十六进制定义一个按钮颜色。(默认是黑色）
• 背景图像地址(imageurl)：背景图像地址。

像这样：

AIRia编者：如果你想让你的AIR应用为更多人接受，那么你不得不选择这个方法。但国外也有很多人反对这种做法，因为这没有征求客户的同意就安装了另外一个插件,部分人也质疑这种在线安装的安全性，本文不就这些问题进行讨论。本文为本站原创（参考了一些英文信息），转载请注明来自AIRia，谢谢!
相关：关于Flash player 10将集成AIR的某些特性的问题，本站将后续探讨。