AIR ウィンドウの基礎



AIR には、Flash®、Flex™ および HTML のプログラミング技法を使用してオペレーティングシステムのネイティブウィンドウを作成するための、簡単に使用できるクロスプラットフォームのウィンドウ API が用意されています。

AIR では、アプリケーションの外観を柔軟に開発できます。ユーザが作成するウィンドウは、標準のデスクトップアプリケーションのようになります。Macintosh で実行する場合は Apple スタイルに一致し、Windows で実行する場合は Microsoft の規則に準拠し、Linux で実行する場合はウィンドウマネージャに適合します。いずれの場合も、プラットフォーム固有のコード行を含める必要はありません。または、Flex フレームワークで提供されているスキンとして使用できて拡張性のあるクロムを使用して、アプリケーションの実行環境に左右されない独自のスタイルを作成することもできます。 さらには、デスクトップに対する透明度とアルファブレンドを完全にサポートするベクトルとビットマップのアートワークを使用して、独自のウィンドウクロムを描画することもできます。矩形のウィンドウに飽きているなら、丸いウィンドウを作成してみてください。

AIR のウィンドウ

AIR では、ウィンドウを操作するための 3 つの API がサポートされています。

  • ActionScript 指向の NativeWindow クラスは、最下位レベルのウィンドウ API を提供します。NativeWindows は、ActionScript および Flash CS オーサリングによるアプリケーションで使用します。アプリケーションで使用する目的に特化したウィンドウを作成する場合は、NativeWindow クラスの拡張を検討してください。

  • Flex framework mx:WindowedApplication クラスおよび mx:Window クラスは、NativeWindow クラスに Flex の「ラッパー」を提供します。Flex を使用して作成した AIR アプリケーションを Flex アプリケーションの初期ウィンドウとして使用する必要がある場合、WindowedApplication コンポーネントは Application コンポーネントを置き換えます。

  • HTML 環境では、ブラウザベースの Web アプリケーションの場合と同じように JavaScript Window クラスを使用できます。JavaScript Window メソッドの呼び出しは、基になるネイティブウィンドウオブジェクトに転送されます。

ActionScript ウィンドウ

NativeWindow クラスでウィンドウを作成するときは、Flash Player のステージと表示リストを直接使用します。NativeWindow に表示オブジェクトを追加するには、ウィンドウステージの表示リストまたはステージの別の表示オブジェクトコンテナにオブジェクトを追加します。

Flex フレームワークウィンドウ

Flex Framework では、固有のウィンドウコンポーネントが定義されています。これらのコンポーネント(mx:WindowedApplication と mx:Window)はフレームワークの外部では使用できず、したがって HTML ベースの AIR アプリケーションでは使用できません。

HTML ウィンドウ

HTML ウィンドウを作成するときは、HTML、CSS および JavaScript を使用してコンテンツを表示します。表示オブジェクトを HTML ウィンドウに追加するには、そのコンテンツを HTML DOM に追加します。HTML ウィンドウは、NativeWindow の特殊なカテゴリです。AIR ホストでは、基になる インスタンスへのアクセスを提供する nativeWindownativeWindow プロパティが、HTML ウィンドウで定義されています。このプロパティを使用して、ここで説明する NativeWindow のプロパティ、メソッドおよびイベントにアクセスできます。

注意: また、JavaScript の Window オブジェクトには、moveTo()close() など、コンテナウィンドウのスクリプトを作成するためのメソッドもあります。オーバーラップするメソッドを使用できる場合は、最も便利なものを使用してかまいません。

初期アプリケーションウィンドウ

アプリケーションの最初のウィンドウは、AIR によって自動的に作成されます。AIR は、アプリケーション記述ファイルの initialWindow エレメントで指定されているパラメータを使用して、ウィンドウのプロパティとコンテンツを設定します。

ルートコンテンツが SWF ファイルの場合、AIR は NativeWindow インスタンスを作成して、SWF ファイルを読み込み、それをウィンドウステージに追加します。ルートコンテンツが HTML ファイルの場合、AIR は HTML ウィンドウを作成して HTML を読み込みます。

アプリケーション記述子で指定するウィンドウプロパティについて詳しくは、アプリケーション記述ファイルの構造を参照してください。

ネイティブウィンドウクラス

ネイティブウィンドウ API には、次のクラスが含まれます。

パッケージ

クラス

flash.display

  • NativeWindow

  • NativeWindowInitOptions

  • NativeWindowDisplayState

  • NativeWindowResize

  • NativeWindowSystemChrome

  • NativeWindowType

ウィンドウのストリング定数は、次のクラスで定義されています。

  • NativeWindowDisplayState

  • NativeWindowResize

  • NativeWindowSystemChrome

  • NativeWindowType

flash.events

  • NativeWindowBoundsEvent

  • NativeWindowDisplayStateEvent

ネイティブウィンドウのイベントフロー

ネイティブウィンドウは、イベントを送出して、重要な変更が発生しようとしていること、または既に発生したことを、関係するコンポーネントに通知します。多くのウィンドウ関連イベントは、ペアで送出されます。最初のイベントは、変更が発生しようとしていることを警告します。2 番目のイベントは、変更が行われたことを通知します。警告イベントはキャンセルできますが、通知イベントはキャンセルできません。次のシーケンスは、ユーザがウィンドウの最大化ボタンをクリックすると発生するイベントのフローを示したものです。

  1. NativeWindow オブジェクトが、displayStateChanging イベントを送出します。

  2. 登録済みのどのリスナーもイベントをキャンセルしない場合、ウィンドウは最大化します。

  3. NativeWindow オブジェクトが、displayStateChange イベントを送出します。

    さらに、NativeWindow オブジェクトはウィンドウのサイズと位置に関連する変更についてのイベントも送出します。これらの関連する変更については、警告イベントは送出されません。次のような関連イベントがあります。

    1. 最大化操作によりウィンドウの左上隅の位置が移動した場合、move イベントが送出されます。

    2. 最大化操作によりウィンドウのサイズが変更された場合、resize イベントが送出されます。

    NativeWindow オブジェクトは、ウィンドウを最小化する、元のサイズに戻す、閉じる、移動する、サイズ変更するときも、同様のシーケンスでイベントを送出します。

    警告イベントは、ウィンドウクロムまたはその他のオペレーティングシステムによって制御されるメカニズムを通して変更が開始されるときにのみ、送出されます。ウィンドウメソッドを呼び出してウィンドウのサイズ、位置、表示状態を変更すると、ウィンドウは変更を通知するイベントのみを送出します。必要な場合は、ウィンドウの dispatchEvent() メソッドを使用して警告イベントを送出した後、警告イベントがキャンセルされたかどうかを確認してから、変更を継続できます。

    ウィンドウ API のクラス、メソッド、プロパティ、イベントについて詳しくは、『Adobe AIR HTML 開発者用リファレンスガイド』(http://www.adobe.com/go/learn_air_html_jslr_jp)を参照してください。

    Flash 表示リストの使用に関する一般的な情報については、『Adobe ActionScript 3.0 のプログラミング』(http://www.adobe.com/go/learn_fl_cs4_programmingAS3_jp)の「表示のプログラミング」の節を参照してください。

ネイティブウィンドウのスタイルと動作を制御するプロパティ

ウィンドウの基本的な外観と動作は、次のプロパティが制御します。

  • type

  • systemChrome

  • transparent

ウィンドウを作成するときは、ウィンドウコンストラクタに渡す NativeWindowInitOptions オブジェクトで、これらのプロパティを設定します。AIR は、初期アプリケーションウィンドウのプロパティを、アプリケーション記述子から読み取ります(ただし、type プロパティはアプリケーション記述子では設定できず、常に normal に設定されます)。ウィンドウの作成後に、プロパティを変更することはできません。

これらのプロパティの設定の中には、同時に指定できないものがあります。例えば、systemChromestandard のとき、または transparenttrue のときには、typelightweight に設定することはできません。

ウィンドウタイプ

AIR のウィンドウタイプでは、ネイティブオペレーティングシステムの chrome 属性と visibility 属性を結合して、ウィンドウの 3 つの機能タイプを作成します。コードでタイプ名を参照するには、NativeWindowType クラスで定義されている定数を使用します。AIR には次のウィンドウタイプがあります。

タイプ

説明

normal

一般的なウィンドウです。normal ウィンドウは、フルサイズスタイルのクロムを使用し、Windows のタスクバーおよび Mac OS X のウィンドウメニューに表示されます。

utility

ツールパレットです。utility ウィンドウはスリムなバージョンのシステムクロムを使用し、Windows のタスクバーおよび Mac OS X のウィンドウメニューには表示されません。

lightweight

lightweight ウィンドウはクロムを持たず、Windows のタスクバーおよび Mac OS-X のウィンドウメニューには表示されません。また、lightweight ウィンドウには、Windows のシステムメニュー(Alt + Space)がありません。lightweight ウィンドウは、通知バブルや、短時間だけ表示される領域を開くコンボボックスなどのコントロールに適しています。lightweight の type を使用するときは、systemChromenone に設定する必要があります。

ウィンドウクロム

ウィンドウクロムは、ユーザがデスクトップ環境内のウィンドウを操作できるようにする一連のコントロールです。クロムエレメントには、タイトルバー、タイトルバーボタン、ボーダー、サイズ変更グリップなどがあります。

システムクロム

systemChrome プロパティには、standard または none を設定できます。ユーザのオペレーティングシステムによって作成およびスタイル設定される標準コントロールのセットをウィンドウで使用するには、standard システムクロムを選択します。ウィンドウに独自のクロムを使用するには、none を選択します。コードでシステムクロムの設定を参照するには、NativeWindowSystemChrome クラスで定義されている定数を使用します。

システムクロムは、システムによって管理されます。アプリケーションでは、コントロール自体に直接アクセスすることはできませんが、コントロールが使用されるときに送出されるイベントには対応できます。ウィンドウに標準のクロムを使用する場合は、transparent プロパティを false に設定し、type プロパティを normal または utility に設定する必要があります。

カスタムクロム

システムクロムを使用しないでウィンドウを作成する場合は、独自のクロムコントロールを追加して、ユーザとウィンドウの間の対話を処理する必要があります。また、透明で非矩形のウィンドウを作成してもかまいません。

ウィンドウの透明度

ウィンドウとデスクトップまたは他のウィンドウとのアルファブレンドを可能にするには、transparent プロパティを true に設定します。transparent プロパティは、ウィンドウを作成する前に設定する必要があり、変更することはできません。

透明なウィンドウには、デフォルトの背景はありません。アプリケーションによって描画されたオブジェクトを含まないウィンドウ領域は表示されません。表示されたオブジェクトのアルファ設定が 1 未満の場合は、同じウィンドウ内の他の表示オブジェクト、他のウィンドウ、デスクトップなど、オブジェクトの下にあるすべてのものが透けて見えます。大きいアルファブレンド領域のレンダリングには時間がかかる場合があるので、この効果は控えめに使用する必要があります。

ボーダーが不規則な形のウィンドウ、または「フェードアウト」するウィンドウや不可視のウィンドウを作成するには、透明なウィンドウが便利です。

重要: Linux の場合、マウスイベントは完全に透明なピクセルを通過できません。完全に透明で面積が広いウィンドウを作成すると、見えないウィンドウによってユーザの操作がブロックされ、デスクトップ上にある他のウィンドウやアイテムがアクセス不能になるため、望ましくありません。Mac OS X および Windows の場合、マウスイベントは完全に透明なピクセルを通過します。

透明度は、システムクロムを使用するウィンドウでは使用できません。さらに、HTML 内の SWF コンテンツと PDF コンテンツは、透明ウィンドウに表示されません。詳しくは、HTML ページに SWF コンテンツまたは PDF コンテンツを読み込む場合の考慮事項を参照してください。

オペレーティングシステムによっては、ハードウェア構成、ソフトウェア構成またはユーザの表示オプションにより、透明度がサポートされない場合があります。透明度がサポートされていない場合、アプリケーションの背景は黒になります。この場合、アプリケーションの透明領域は不透明の黒として表示されます。

ウィンドウの透明度が使用可能かどうかは、静的な NativeWindow.supportsTransparency プロパティによって報告されます。このプロパティで false をテストする場合は、警告ダイアログをユーザに表示するか、フォールバックとして矩形の不透明なユーザインターフェイスを表示することができます。Windows および Macintosh オペレーティングシステムでは、常に透明度がサポートされます。Linux オペレーティングシステムでのサポートには、合成ウィンドウマネージャが必要ですが、合成ウィンドウマネージャがアクティブな場合でも、ユーザの表示オプションまたはハードウェア構成により、透明度は使用できません。

HTML アプリケーションウィンドウでの透明度

デフォルトでは、HTML ウィンドウおよび HTMLLoader オブジェクトに表示される HTML コンテンツの背景は、コンテナウィンドウが透明であっても不透明です。HTML コンテンツに表示されるデフォルトの背景をオフにするには、paintsDefaultBackground プロパティを false に設定します。次の例では、HTMLLoader を作成し、デフォルトの背景をオフにしています。

var htmlView:HTMLLoader = new HTMLLoader(); 
htmlView.paintsDefaultBackground = false;

この例では、JavaScript を使用して HTML ウィンドウのデフォルトの背景をオフにしています。

window.htmlLoader.paintsDefaultBackground = false;

HTML ドキュメント内のエレメントに背景色を設定すると、そのエレメントの背景は透明ではなくなります。透明度(または不透明度)の値の部分的な設定は、サポートされていません。ただし、透明な PNG 形式のグラフィックをページまたはページエレメントの背景として使用することで、同じような視覚効果を得ることができます。

表示ウィンドウカタログ

次の表に、異なるウィンドウプロパティ設定の組み合わせが Mac OS X、Windows および Linux オペレーティングシステムでどのような視覚効果になるかを示します。

ウィンドウ設定

Mac OS X

Microsoft Windows

Linux*

Type:normal

SystemChrome:standard

Transparent:false




Type:utility

SystemChrome:standard

Transparent:false




Type:Any

SystemChrome:none

Transparent:false




Type:Any

SystemChrome : none

Transparent:true




mxWindowedApplication または mx:Window

Type : Any

SystemChrome : none

Transparent:true




*Ubuntu と Compiz ウィンドウマネージャ

注意: Mac OS X ツールバー、Mac OS X プロキシアイコン、Windows タイトルバーアイコン、代替システムクロムの各システムクロムエレメントは、AIR ではサポートされていません。