この記事では、図 1 に示すサンプルアプリケーション WeatherStation について説明します。WeatherStation アプリケーションのウィンドウは、部分的に透明になっています。また、システムクロムを使用していないので、通常の矩形のフレームではなく角の丸い不規則な境界線が表示されます。画像がアプリケーションの境界線を越えて表示される場合もあります。このアプリケーションは、米国の郵便番号に基づいて Yahoo! 天気情報サービスから天気予報データを照会します。データはこのサービスから 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 リファレンスガイド』を参照してください。

ウィンドウを透明にするための設定

アプリケーションウィンドウを透明にするかどうかは、2 つの場所で制御します。

1 つ目は、アプリケーションのアプリケーション記述ファイルに含まれている、ウィンドウの透明度を左右する 2 つの要素（<systemChrome> と <transparent>）です。<transparent> 要素は true に設定する必要があります。<systemChrome> 要素は none に設定する必要があります。none に設定しない場合、標準のシステムウィンドウのタイトルバーとボタンが使用され、アプリケーションの背景は不透明になります。

次の例は、WeatherStation のアプリケーション記述ファイルの <initialWindow> 要素内にあるこれらの要素を示しています。

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

2 つ目の場所は、Flex の Application コンポーネントに適用される CSS スタイルです。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() メソッドは 2 つの 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 コンポーネントの背景の境界線を越えるので、オブジェクトにもシャドウを適用して、オブジェクト全体が影を落としているように見せる必要があります。その他の表示コンポーネントは浮き出て見えるので、シャドウを割り当てるだけです。

同じ DropShadowFilter インスタンスを addShadow() メソッド内の各コンポーネントに適用します。

/**
* 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 オブジェクトを含む配列に設定します。

著者について