本文介绍图 1 中显示的范例应用程序 WeatherStation。WeatherStation 应用程序窗口有一部分是透明的, 且不使用系统镶边, 因此该窗口显示带圆角的不规则边框, 而非常见的矩形框架。该窗口还能显示超出应用程序可视边框的图像。此应用程序根据美国的邮政编码从 Yahoo! Weather 服务查询天气预报数据。从该服务返回 XML 格式的数据, 然后应用程序分析、格式化并显示这些数据。

本范例应用程序演示 Adobe AIR 的以下功能:

• 具有透明背景和非矩形边框的窗口
• 用于最小化和关闭窗口的窗口控制按钮
• 通过响应“move”事件而移动窗口

WeatherStation 范例还展示在 Adobe AIR 应用程序中可以如何使用 Flash Player 的某些强大功能, 其中包括:

• 调用 HTTP 服务检索天气预报数据
• 使用 SharedObject 存储和检索应用程序设置

图 1。WeatherStation 范例应用程序

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

要求

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

Adobe AIR

• 下载

Adobe Flex Builder 3

• 试用
• 购买

范例文件:

• WeatherStation.zip (ZIP, 36K)
• WeatherStation.air (AIR, 403K)

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

• WeatherStation.mxml: 应用程序主文件 (Flex 的 MXML 格式), 其中包括本文所讨论的代码
• WeatherServices.mxml: 定义 HTTPService 调用及其参数的 MXML 文件。
• DecompressScreen.mxml: 定义“解压缩文件”屏幕的布局和功能的 MXML 文件
• WeatherStataion-app.xml: AIR 应用程序描述符文件
• close_icon.png/minimize_icon.png: 用作窗口自定义镶边按钮的图像
• AIR 图标文件范例

必备知识

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

关于透明窗口应用程序

Adobe AIR 同时支持不透明和透明的应用程序窗口。透明的窗口使操作系统的桌面一览无余, 而不透明的窗口隐藏其后的桌面区域。

AIR 窗口可以使用符合操作系统标准的边框、标题栏、菜单栏和窗口控制按钮 (统称为系统镶边)。将应用程序描述符文件中的 <systemChrome> 元素设置为 standard (默认设置) 时, 应用程序即使用标准的系统镶边元素。使用系统镶边的窗口始终不透明。

Flex 的 WindowedApplication 组件提供一组可供替代的窗口镶边元素和矩形窗口框架。WindowedApplication 组件的窗口也始终不透明。

如果想使应用程序变为透明, 则其不应使用系统镶边或 WindowedApplication 组件。这意味着应用程序必须自行提供用于控制窗口及其背景的机制。

了解代码

WeatherStation 应用程序还执行其它有趣的功能, 如与远程 HTTP 服务通信、使用新的 ActionScript 3.0 E4X 语法分析 XML 结果以及使用 SharedObject 存储和检索设置数据。有关这些功能的详细信息, 请参阅《ActionScript 3.0 编程》和《Flex 3 语言参考》。

注意: 对于文件的 MXML 代码所使用的全部 Flex 组件, 本文将不一一介绍。有关详细信息, 请参阅《Flex 3 语言参考》*。

设置窗口透明度

有两处可以控制应用程序窗口的透明度。

首先, 应用程序的应用程序描述符文件包含影响窗口透明度的两个元素: <systemChrome> 元素和 <transparent> 元素。必须将 <transparent> 元素设置为 true。应该将 <systemChrome> 元素设置为 none, 否则将使用标准的系统窗口标题栏和按钮, 且应用程序背景将为不透明。

以下示例显示 WeatherStation 应用程序描述符文件的 <initialWindow> 元素中的这些元素:

<initialWindow>
    <title>WeatherStation</title>
    <content>WeatherStation.swf</content>
 
    <systemChrome>none</systemChrome>
    <transparent>true</transparent>
 
    <!-- additional settings... -->
</initialWindow>

其次, 应用于 Flex Application 组件的 CSS 样式可以影响组件背景的显示方式, 以及该背景是否透明。为了确保背景透明, WeatherStation.mxml 文件包括以下 CSS 样式声明:

<mx:Style>
    Application
    {
        background-color:"";
        background-image:"";
        padding: 0px;
    }
    /* additional style declarations... */
</mx:Style>

移动应用程序窗口

通过单击窗口背景中的任意位置, 按住鼠标按键, 并将窗口拖至其它位置, 用户可以在桌面上四处移动 WeatherStation 窗口。为了触发移动窗口的进程, 应用程序监视并响应 MouseEvent.MOUSE_DOWN 事件。

首先, Application 的声明指定由 initApp() 方法处理 creationComplete 事件。

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
    xmlns="*"
    usePreloader="false"
    creationComplete="initApp()"
    layout="absolute"
    width="250"
    paddingRight="0"
    paddingLeft="0">

加载应用程序之后, initApp() 方法对两个可见的 VBox 组件设置 mouseDown 事件侦听器。用户在光标处于这些 VBox 组件之一上方的情况下按下鼠标按键时, 将加载 onMouseDown() 方法。

// 添加 mouseDown 侦听器, 这样单击并拖动背景或
// 显示区域即可移动窗口
this.bgBox.addEventListener(MouseEvent.MOUSE_DOWN, onMouseDown);
this.tempBox.addEventListener(MouseEvent.MOUSE_DOWN, onMouseDown);

onMouseDown() 方法显示启动窗口移动序列的简单程度:

private function onMouseDown(evt:MouseEvent):void
{
    stage.nativeWindow.startMove();
}

调用 NativeWindow.startMove() 方法会使窗口根据鼠标的移动而在桌面上四处移动, 直到释放鼠标按键为止。不需要编写其它代码即可控制窗口的移动和停止序列, 因为将自动处理这些序列。

最小化和关闭应用程序窗口

WeatherStation 应用程序使用小型 Button 组件使用户可以最小化或关闭应用程序。

将每个按钮的 click 事件都设置为触发相应的方法, 如下所示:

<mx:Button id="minimizeBtn"
    icon="@Embed('assets/minimize_icon.png')"
    width="16"
    height="16"
    click="onMinimize(event)" />
<mx:Button id="closeBtn"
    icon="@Embed('assets/close_icon.png')"
    width="16"
    height="16"
    click="onClose(event)" />

单击最小化按钮时, onMinimize() 方法调用 NativeWindow.minimize() 方法:

private function onMinimize(evt:MouseEvent):void
{
    stage.nativeWindow.minimize();
}

单击关闭按钮时, onClose() 方法调用 NativeWindow.close() 方法:

private function onClose(evt:MouseEvent):void
{
    stage.nativeWindow.close();
}

NativeWindow.close() 方法终止应用程序。此操作为异步进行, 并且应用程序即将停止时会启动一个 close 事件。应用程序可以侦听 close 事件, 并在应用程序停止之前执行各种清理或维护功能。

在桌面上投射阴影

WeatherStation 窗口看上去在桌面上投射了一道阴影, 就像漂浮在桌面上空一样。实际上, 投影并非应用于窗口本身。而是应用于用作背景元素的 bgBox VBox 组件, 并在应用程序窗口的透明背景上投射一道阴影。而这使得阴影就像落在桌面上一样。

为了实现此效果, 应用程序首先定义 flash.filters.DropShadowFilter 类的实例:

public var shadowFilter:DropShadowFilter;

然后, initApp() 方法设置滤镜的参数, 并将滤镜应用于 bgBox 组件和若干其它组件, 如下所示:

// 创建通用投影, 以用于不接受 CSS 阴影样式的组件上
shadowFilter = new DropShadowFilter();
shadowFilter.color = 0x000000;
shadowFilter.alpha = 0.4;
shadowFilter.blurX = 5;
shadowFilter.blurY = 5;
shadowFilter.distance = 5;
// 'external' 阴影
addShadow(this.bgBox);
addShadow(this.largeImage);
// 'internal' 阴影
addShadow(this.locationTxt);
addShadow(this.tempTxt);
addShadow(this.conditionTxt);
addShadow(this.additionalTxt);

由于 largeImage Image 对象延伸至 bgBox 组件背景的边界之外, 因此该对象也需要阴影来完善效果。对于其它显示组件而言, 只是由于在这种情况下更加突出, 因此才向其添加阴影。

在 addShadow() 方法中对每个组件都应用相同的 DropShadowFilter 实例:

/**
* Adds a standard drop shadow to a display object.
*/
 
public function addShadow(comp:DisplayObject):void
{
    comp.filters = [this.shadowFilter];
}

将每个组件都作为参数传递至此方法, 并将每个组件都视为 DisplayObject 实例 (因此对并非 Flex UIComponent 实例的 DisplayObject 实例可以使用相同的方法)。然后将每个对象的 filters 数组设置为包含一个 shadowFilter 对象的数组。

关于作者