停靠栏图标和系统任务栏图标提供了一种简便的方法, 使用户可以访问无可见窗口的应用程序, 并通知用户发生了需要关注的事件。Adobe AIR 提供两个类: DockIcon 和 SystemTrayIcon, 使您可以更改应用程序图标的外观、为其添加菜单以及响应其事件。

图 1 中显示的 Stopwatch 范例应用程序演示 Adobe AIR 的以下功能:

• 设置、显示图标图像和为其添加动画效果
• 当用户单击图标时响应所调度的事件
• 向图标添加菜单
• 为停靠栏图标添加弹跳效果
• 闪动 Windows 任务栏上的窗口按钮

图 1。Stopwatch 这个应用程序的窗口, 处于非最小化状态。

注意: 本范例应用程序按原样提供, 用于教学目的。

要求

若要充分利用本篇文章, 您需要以下软件和文件:

Adobe AIR

• 下载

Adobe Flash CS3 Professional

• 试用
• 购买

为 Flash CS3 Professional 提供的 Adobe AIR 更新

• 下载*

范例文件:

• Stopwatch.zip (ZIP, 48K)
• Stopwatch.air (AIR, 140K)

本范例应用程序包括以下文件:

• Stopwatch.as: 应用程序主文件 (Flex 的 MXML 格式), 其中包括本文所讨论的代码
• StopWatch.fla: 与 Adobe Flash CS3 配合使用的 Flash 文档
• Stopwatch-app.xml: AIR 应用程序描述符文件
• Clock.as: 定义用于设置和显示计时器的时钟控件
• HandControl.as: 定义秒针, 这是时钟的一个子组件
• GoButton.as: 定义开始/停止按钮
• MinimizeButton.as: 定义停靠按钮
• CloseButton.as: 定义关闭按钮
• AIR 图标文件范例

必备知识

应具备使用 Flash CS3 构建应用程序的一般经验。有关使用此快速入门指南的详细信息, 请参阅用 Flash 构建快速入门范例应用程序。

关于应用程序图标

Mac OS X 和 Windows 操作系统中都支持应用程序图标, 但在每种系统中使用这些图标所涉及的惯例有一些不同。在 Mac OS X 中, 应用程序图标是停靠栏图标, 由 DockIcon 对象表示。在 Windows 中, 应用程序图标是系统任务栏图标, 由 SystemTrayIcon 类表示。DockIcon 和 SystemTrayIcon 类都是 InteractiveIcon 类的子类。自动创建应用程序的图标对象。对象类型由运行应用程序实例的操作系统确定。

由于直到运行时才确定对象类型, 因此必须谨防访问错误图标类的成员。可以使用静态 NativeApplication 属性 supportsDockIcon 和 supportsSystemTrayIcon 检查何种图标类型可用。两种类型的图标都支持菜单和图像。主要区别在于:

• 只有在设置了图像后才会出现系统任务栏图标。
• 如不设置其它图像, 则停靠栏图标显示应用程序描述符中指定的图像。
• 系统任务栏图标具有 tooltip 属性。
• 系统任务栏图标调度鼠标事件。
• 停靠栏图标不直接调度事件, 但可以通过侦听 NativeApplication 对象的 invoke 事件来检测单击。

停靠栏图标

停靠栏图标为用户提供了一种轻松访问应用程序的方法。每当应用程序运行时, 停靠栏中就会显示应用程序图标。用户甚至还可以在应用程序不运行时将图标保留在停靠栏中。在应用程序描述符文件的 <icon> 元素内指定这两种情况下对图标使用的图像。当应用程序正在运行时, 可以通过设置 NativeApplication.nativeApplication.icon.bitmaps 属性来更改图标图像。当应用程序关闭时, 如果图标保留在停靠栏中, 则图标会变回原始图像。

除了设置图标图像之外, 还可以向停靠栏图标添加菜单。添加菜单后, 其中各项显示在操作系统提供的标准菜单上方。

虽然不能直接侦听停靠栏图标上的鼠标事件, 但每当用户单击停靠栏图标时, NativeApplication 对象都会调度一个 invoke 事件。

系统任务栏图标

在 Windows 中, 系统任务栏的正式用途是通知用户发生了重要的应用程序事件, 如有电子邮件到达, 因此系统任务栏的正式名称为通知区域。实际上, 系统任务栏也已成为一种特定区域, 用户在此可以访问不像平时那样显示窗口的应用程序或实用程序。

默认情况下, 不显示 AIR 应用程序的系统任务栏图标。若要显示该图标, 必须通过设置 bitmaps 数组为图标提供图像。同样地, 若要从系统任务栏删除图标, 则要通过将 bitmaps 属性设置为空数组来清除图像。

系统任务栏图标支持菜单、工具提示, 并为鼠标事件调度事件。

Stopwatch 范例应用程序

Stopwatch 应用程序创建一个 60 秒的计时器实用程序, 为系统任务栏或停靠栏图标添加像倒计时一样的动画效果。Stopwatch 演示如何使用系统任务栏和停靠栏图标以及为其添加动画效果。

若要测试此应用程序, 请启动 Stopwatch 应用程序文件 (Stopwatch.air)。单击三角形启动按钮, 从而启动时钟。可以注意到系统任务栏或停靠栏图标随每秒时间的过去而发生变化。单击黄色的小按钮将使应用程序最小化至系统任务栏或停靠栏。当倒计时到达零时, 秒表窗口自动重新出现。也可以单击应用程序图标来还原窗口。

了解代码

Stopwatch 范例有两个关键部分。Stopwatch 主类作为进入应用程序的入口点, 并定义所有用于处理应用程序图标的函数。应用程序包中的其余类定义用户界面, 用于显示、设置和控制时钟。这些类使用 ActionScript 和基本的 Flash API。本篇文章中不对其进行详细讨论。

设置

Stopwatch 类的构造函数为时钟和时钟控件添加子显示对象, 并将计时器初始化。

为了设置应用程序图标, Stopwatch 使用 NativeApplication 类的静态 supportsDockIcon 和 supportsSystemTrayIcon 属性检查何种类型的图标可用, 然后添加事件侦听器、菜单和一个工具提示:

if(NativeApplication.supportsDockIcon){
    var dockIcon:DockIcon = NativeApplication.nativeApplication.icon as DockIcon;
    NativeApplication.nativeApplication.addEventListener(InvokeEvent.INVOKE, undock);
    dockIcon.menu = createIconMenu();
} else if (NativeApplication.supportsSystemTrayIcon){
    var sysTrayIcon:SystemTrayIcon =
    NativeApplication.nativeApplication.icon as SystemTrayIcon;
    sysTrayIcon.tooltip = "Stopwatch";
    sysTrayIcon.addEventListener(MouseEvent.CLICK,undock);
    sysTrayIcon.menu = createIconMenu();
}

添加菜单

createIconMenu() 函数为应用程序创建菜单。此函数创建 NativeMenu 对象以及命令项 Start (开始) 和 Pause (暂停), 用于控制计时器。对于系统任务栏图标, 此函数还添加 Show clock (显示时钟) 和 Exit (退出) 命令。这些命令对于停靠栏图标菜单并非必要, 因为停靠栏图标的标准菜单中已包括这些功能的命令。您的应用程序无法删除或更改标准菜单项。添加至停靠栏菜单的任何菜单命令都显示在标准项的上方。

private var startCommand:NativeMenuItem = new NativeMenuItem("Start");
private var pauseCommand:NativeMenuItem = new NativeMenuItem("Pause");
private var showCommand: NativeMenuItem = new NativeMenuItem("Show clock");
 
private function createIconMenu():NativeMenu{
    var iconMenu:NativeMenu = new NativeMenu();
    iconMenu.addItem(startCommand);
    startCommand.addEventListener(Event.SELECT, toggleTimer);
    iconMenu.addItem(pauseCommand);
    pauseCommand.addEventListener(Event.SELECT, toggleTimer);
    iconMenu.addItem(new NativeMenuItem("", true));//分隔符
    if(NativeApplication.supportsSystemTrayIcon){
        iconMenu.addItem(showCommand);
        showCommand.addEventListener(Event.SELECT, undock);
        iconMenu.addItem(new NativeMenuItem("", true));//分隔符
        var exitCommand: NativeMenuItem = iconMenu.addItem(new NativeMenuItem("Exit"));
        exitCommand.addEventListener(Event.SELECT, exit);
    }
    iconMenu.addItem(new NativeMenuItem("", true));//分隔符
    iconMenu.addSubmenu(createSourceCodeMenu(), "Source code");
    iconMenu.addEventListener(Event.DISPLAYING, setMenuCommandStates);
    return iconMenu;
}

由于 Start、Pause 和 Show clock 菜单项的状态取决于当前的应用程序状态, 因此使用菜单 displaying 事件的处理函数。在显示菜单项之前, 菜单将调度 displaying 事件。以下事件处理函数更新 startCommand 和 pauseCommand 对象的 enabled 属性以及 showCommand 对象的 checked 属性:

private function setMenuCommandStates(event:Event):void{
    startCommand.enabled = goButton.startState;
    pauseCommand.enabled = !goButton.startState;
    showCommand.checked = stage.nativeWindow.visible;
}

停靠应用程序

Stopwatch 通过隐藏时钟窗口并将图标图像设置为时钟表面的快照, 从而停靠应用程序:

public function dock(event:Event = null):void{
    stage.nativeWindow.visible = false;
    NativeApplication.nativeApplication.icon.bitmaps = [clock.bitmapData];
}

在 Mac OS X 中, 设置图标图像并非绝对必要, 因为始终都会显示图像。在 Windows 中, 设置该图像是必不可少的, 因为如果没有图标, 用户就无法还原应用程序。

为了取消应用程序的停靠, Stopwatch 再次使窗口可见, 并清除图标图像, 以便从 Windows 的系统任务栏中删除图标。 (在 Mac OS X 中, 此操作将还原默认的图标图像。)

public function undock(event:Event = null):void{
    stage.nativeWindow.visible = true;
    NativeApplication.nativeApplication.icon.bitmaps = [];
}

为图标添加动画效果

秒表计时器每经过一秒, Stopwatch 都会更新图标的 bitmaps 数组, 从而为图标添加动画效果。Clock 类定义秒表的视觉效果, 该类提供一个 bitmapData 属性, 后者提供时钟显示的快照。以下函数使用 BitmapData 对象的 draw() 方法创建 Clock 对象当前可视状态的位图图像:

public function get bitmapData():BitmapData{
    var clockImage:BitmapData = new BitmapData(this.width, this.height,true,0x00ffffff);
    clockImage.draw(this);
    return clockImage;
}

为了创建透明图标, 创建用于定义图标图像的 BitmapData 对象时必须将其构造函数的 transparent 参数设置为 true。此外, 应该用 32 位 ARGB 颜色值设置填充颜色, 同时将 alpha 组件设置为 0。例如采用十六进制时, 可以使用 0x00ffffff。

Stopwatch 范例将 Clock 的 bitmapData 属性所提供的 BitmapData 对象赋给图标的 bitmaps 数组。由于 bitmaps 是 Array 对象, 因此必须将图像放置到数组中, 为此, 在本例中使用中括号表示法: [clock.bitmapData]。如果所提供的数组包含多个图像, 则系统将选择最接近图标显示大小的图像。例如, 停靠栏图标使用最接近 128x128 像素的图标, 而系统任务栏图标使用最接近 16x16 像素的图标。通常在显示大小符合图像大小时图标看起来效果更好, 因为不必执行缩放。

public function changeIcon():void{
    NativeApplication.nativeApplication.icon.bitmaps = [clock.bitmapData];
}

注意: 无法修改由 bitmaps 属性所引用的 Array 对象。只能分配一个新的数组。例如, 以下语句:

NativeApplication.nativeApplication.icon.bitmaps.push(clock.bitmapData);

不起作用。

通知用户发生了事件

在 Mac OS X 中, 停靠栏图标可以用于通知用户发生了需要关注的事件。在 Stopwatch 中, 当计时器达到零时, 通过调用 icon.bounce(), 使停靠栏图标跳动。如果使用 critical 通知类型, 则停靠栏图标将一直跳动至用户激活应用程序为止。如果使用 informational 类型, 则停靠栏图标只跳动一次。 (如果应用程序已有焦点, 则停靠栏图标完全不跳动。)

Windows 使用不同的通知方案。可以更改系统任务栏图标图像或弹出包含消息的简单窗口, 但系统任务栏图标无法跳动。Windows 中提供一个窗口级通知函数, 当应用程序在任务栏中具有窗口按钮时可以使用此函数。此函数为 notifyUser(), 在 NativeWindow 对象上调用, 可以加亮显示或闪动窗口的任务栏按钮。

Stopwatch 检查当前操作系统支持何种类型的图标, 并调用 DockIcon.bounce() 或 NativeWindow.notifyUser() 函数。

public function notify():void{
    if(NativeApplication.supportsDockIcon){
        var dock:DockIcon = NativeApplication.nativeApplication.icon as DockIcon;
        dock.bounce(NotificationType.CRITICAL);
    } else if (NativeApplication.supportsSystemTrayIcon){
        stage.nativeWindow.notifyUser(NotificationType.CRITICAL);
    }
}

关于作者