Apollo改めAIRプログラミング入門（3）
AIRアプリのウィンドウは自由自在で縦横無尽！

クラスメソッド
杉浦篤史
2007/9/18

　ウィンドウAPIはアルファ版（Apollo）でも実装されていましたが、AIRベータ版となってからいくつか機能が追加されました。今回は追加された機能についてのウィンドウAPIの解説と複数ウィンドウ制御を行うアプリを作成します。

　以前掲載された連載「Apolloプログラミング入門」の第2回「自由な形にできるウィンドウのApolloアプリを作成しよう」とも併せてご覧ください。

　ウィンドウタイプを指定して新しいウィンドウを開く

　AIRベータ版より、新しく開いたウィンドウをタスクバーに表示させないようにしたり、通常のウィンドウよりボタンの少ないウィンドウを表示できるようになりました。

　新しいウィンドウを開くにはNativeWindowクラスを使用しますが、そのときにNativeWindowInitOptionsクラスによってウィンドウの初期設定を行うことができます。

　その中で、typeプロパティを指定することでウィンドウのタイプを指定して新しいウィンドウを開くことができます。

表　NativeWindowTypeクラスの定数
定数名 ウィンドウ状態
NativeWindowType.LIGHTWEIGHT クロームのない状態のウィンドウ
NativeWindowType.NORMAL 通常状態のウィンドウ
NativeWindowType.UTILITY 通常よりバーの部分が小さくボタンの少ないウィンドウ
※NORMAL以外のウィンドウはタスクバーに表示されません

　以下のその例を示します。実行結果は図1となります。

<?xml version="1.0" encoding="utf-8"?>
<mx:WindowedApplication xmlns:mx="http://www.adobe.com/2006/mxml"
    layout="vertical"horizontalAlign="center"
    verticalAlign="middle"width="200" height="200"
    closing="closingHandler()">
<mx:Script>
<![CDATA[
    private var wa:Array = new Array();
    private function createWindow (type:String, y:Number):void {
        //新しいウィンドウを作る
        var wOptions:NativeWindowInitOptions
            = new NativeWindowInitOptions();
        //初期設定のウィンドウタイプがLIGHTWEIGHTの場合は
        //SystemChromeをNONEにする
        if (type == NativeWindowType.LIGHTWEIGHT) {
            wOptions.systemChrome = NativeWindowSystemChrome.NONE;
        }
        wOptions.type = type;
        var nw:NativeWindow = new NativeWindow(true, wOptions);
        nw.width = 200;
        nw.height = 100;
        nw.title = type;
        nw.x = stage.window.x + nw.width + 20;
        nw.y = stage.window.y + y;
        //作成したウィンドウは配列に保持する
        wa.push(nw);
    }
    private function closingHandler():void {
        //メインウィンドウを閉じたら、サブウィンドウをすべて閉じる
        for (var i:int=0; i<wa.length; i++) {
            var nw:NativeWindow = wa[i] as NativeWindow;
            if (nw) nw.close();
        }
    }
]]>
</mx:Script>
<mx:Button label="LIGHTWEIGHT"
    click="createWindow(NativeWindowType.LIGHTWEIGHT, 0)" />
<mx:Button label="NORMAL"
    click="createWindow(NativeWindowType.NORMAL, 110)" />
<mx:Button label="UTILITY"
    click="createWindow(NativeWindowType.UTILITY, 220)" />
</mx:WindowedApplication>

図1　実行結果、3つのボタンを順番に押してタイプの異なるウィンドウを表示
図1　実行結果、3つのボタンを順番に押してタイプの異なるウィンドウを表示

　この例では、「LIGHTWEIGHT」「NORMAL」「UTILITY」の3つのボタンを押すことで、それぞれ対応したウィンドウを新しく開きます。

　注意したいのは、LIGHTWEIGHTタイプのウィンドウで、このタイプにするためには、systemChromeが「NONE」である必要があります。

if (type == NativeWindowType.LIGHTWEIGHT) {
    wOptions.systemChrome = NativeWindowSystemChrome.NONE;
}

　この例ではLIGHTWEIGHTのときのみNativeWindowSystemChrome.NONEとしています。

　また、新しくウィンドウを開くたびに開いたウィンドウの参照を配列に格納するようにしています。これは、開いたウィンドウの参照を保持することでその制御を行うためですが、LIGHTWEIGHTタイプのように閉じるボタンのないウィンドウの場合には、ウィンドウ単体では閉じる手段がないためアプリを終了する際には消してやる必要があるからです。

　今回の例では、メインウィンドウのclosingイベントを使用して、メインウィンドウを閉じようとしたらすべての開いたウィンドウを閉じるようにしています。

private function closingHandler():void {
    //メインウィンドウを閉じたら、サブウィンドウをすべて閉じる
    for (var i:int=0; i<wa.length; i++) {
        var nw:NativeWindow = wa[i] as NativeWindow;
        if (nw) nw.close();
    }
}

　このような処理を行わない場合、LIGHTWEIGHTタイプは閉じるボタンもなくタスクバーも表示されないため、それを終了させるためには、例えばWindowsの場合、Alt＋F4キーかタスクマネージャで終了させないといけなくなります。

ウィンドウを常に最前面に表示させてみよう

　もう1つ、AIRベータ版からNativeWindowクラスのalwaysInFrontプロパティをtrueにすることでウィンドウを常に最前面に表示させることができるようになりました。常に最前面に表示させる状態にすることで、ほかのウィンドウより手前に表示されるようになります。

　以下にその例を示します。実行結果は図2となります。

<?xml version="1.0" encoding="utf-8"?>
<mx:WindowedApplication xmlns:mx="http://www.adobe.com/2006/mxml"
    layout="vertical"horizontalAlign="center"
    verticalAlign="middle" width="200" height="200"
    applicationComplete="applicationCompleteHandler()">
<mx:Script>
<![CDATA[
    private function applicationCompleteHandler():void {
        //メインウィンドウを最前面に表示するように設定
        cb.selected = true;
    }
    private function createWindow ():void {
        //新しいウィンドウを作る
        var wOptions:NativeWindowInitOptions
            = new NativeWindowInitOptions();
        var nw:NativeWindow = new NativeWindow(true, wOptions);
        nw.width = 200;
        nw.height = 100;
        nw.title = "最前面に表示";
        nw.alwaysInFront = true;
        nw.x = stage.window.x + nw.width + 20;
    }
    private function cbChangeHandler():void {
        //チェックボックスのON／OFFで最前面表示を切り替える
        if (stage.window.alwaysInFront) {
            stage.window.alwaysInFront = false;
        } else {
            stage.window.alwaysInFront = true;
        }
    }
]]>
</mx:Script>
<mx:CheckBox id="cb" label="常に最前面に表示"
    change="cbChangeHandler()" />
<mx:Button label="新しいウィンドウを作る" click="createWindow()" />
</mx:WindowedApplication>

図2　実行結果 チェックボックスでメインウィンドウの前面表示の切り替え、ボタン押下で常に最前面表示にした状態の新しいウィンドウを開く
図2　実行結果 チェックボックスでメインウィンドウの前面表示の切り替え、ボタン押下で常に最前面表示にした状態の新しいウィンドウを開く

　この例では、チェックボックスのON／OFFでメインウィンドウを常に最前面に表示するかを切り替えることができます。

　チェックボックスでON／OFFをチェックするたびにChangeイベントが走り、cbChangeHandler()を呼びます。そのたびに、alwaysInFrontもtrueとfalseが入れ替わり常に最前面に表示させるかどうかの設定をさせます。

private function cbChangeHandler():void {
    //チェックボックスのON／OFFで最前面表示を切り替える
    if (stage.window.alwaysInFront) {
        stage.window.alwaysInFront = false;
    } else {
        stage.window.alwaysInFront = true;
    }
}

　新しいウィンドウを作成する際にも、NativeWindowクラスで指定してやることで最前面に表示するウィンドウとして開くことができます。

　ウィンドウを開くNativeWindowのalwaysInFrontプロパティを設定するだけです。

//新しいウィンドウを作る
var wOptions:NativeWindowInitOptions = new NativeWindowInitOptions();
var nw:NativeWindow = new NativeWindow(true, wOptions);
nw.width = 200;
nw.height = 100;
nw.title = "最前面に表示";
nw.alwaysInFront = true;
nw.x = stage.window.x + nw.width + 20;

　常に最前面に表示させるウィンドウは、時計や付箋（ふせん）紙などのような常に画面内で最前面に表示させたいようなデスクトップアプリを作る際には利用したい機能です。

　また、最前面に表示しているウィンドウが複数ある場合は、その中で深度管理が行われアクティブになっているウィンドウが最も最前面に表示されます。

  1-2

　INDEX
Apollo改めAIRプログラミング入門（3）
Page1
ウィンドウタイプを指定して新しいウィンドウを開く
ウィンドウを常に最前面に表示させてみよう
  Page2
複数ウィンドウを使ったアプリを作ろう
さらに驚きの機能も




HTML5 + UX フォーラム 新着記事
＠ITメールマガジン　新着情報やスタッフのコラムがメールで届きます（無料）

注目のテーマ

HTML5＋UX 記事ランキング

本日 月間
＠IT