2009-08-14

【AIR】NativeWindowクラスによるウインドウ操作

AIRで追加されたNativeWindowクラス.

ウインドウ操作を扱うクラスで,簡単にウインドウを生成・制御可能.

Flash独特のグラフィックス環境を用いて,オリジナルのスキンでウインドウを作ることができる.

そのサンプルがこれ.

あまり一般的な書き方してないけど.

 
package {
import flash.events.Event;
import flash.events.MouseEvent;
import flash.display.Sprite;
import flash.display.NativeWindow;
import flash.display.NativeWindowType;
import flash.display.NativeWindowInitOptions;
import flash.display.NativeWindowSystemChrome;
import flash.display.StageScaleMode;
import flash.display.StageAlign;
import flash.geom.Rectangle;
import flash.display.DisplayObject;

// Tweener(ウインドウのエフェクト用)
import caurina.transitions.Tweener;
import caurina.transitions.properties.FilterShortcuts;


public class NativeWindowEx extends NativeWindow {
protected var base:Sprite;
// ウインドウのオリジナルスキン(CS4で作成後Sprite継承でASに書き込み指定)
private var skin:DialogSkin;

public function NativeWindowEx(initX:int, initY:int, initTitle:String, initDO:DisplayObject) {
// NativeWindowのオプション
var nwOptions:NativeWindowInitOptions = new NativeWindowInitOptions();
// ウインドウタイプ
nwOptions.type = NativeWindowType.LIGHTWEIGHT;
// システムクロームの設定
nwOptions.systemChrome = NativeWindowSystemChrome.NONE;
// ウインドウにalpha値を適用するかどうか
nwOptions.transparent = true;
// 最小化できるかどうか
nwOptions.minimizable = true;
// 最大化できるかどうか
nwOptions.maximizable = false;
// ウインドウサイズを変更できるかどうか
nwOptions.resizable= false;
super(nwOptions);

base = new Sprite();
base.alpha = 0.0;
// NativeWindowの持つstageにaddChild
this.stage.addChild(base);

skin = new DialogSkin();
skin.window.addEventListener(MouseEvent.MOUSE_DOWN, skinWindowDragHandler);
skin.close.addEventListener(MouseEvent.MOUSE_DOWN, skinCloseButtonHandler);
skin.close.addEventListener(MouseEvent.MOUSE_OVER, skinCloseMouseOverHandler);
skin.close.addEventListener(MouseEvent.MOUSE_OUT, skinCloseMouseOutHandler);
// 貼り付ける内容に合わせてスケール変換(skinはscale9Gridを設定済み)
skin.close.scaleX = (initDO.width) / 490;
skin.close.scaleY = (initDO.height) / 300;
skin.window.scaleX = (initDO.width) / 490;
skin.window.scaleY = (initDO.height) / 300;
skin.x = 10;
skin.y = 10;
base.addChild(skin);

var rect:Rectangle = skin.scale9Grid;
initDO.x = rect.left + 10;
initDO.y = rect.top + 10;
base.addChild(initDO);

super.activate();

this.x = initX;
this.y = initY;
this.width = skin.width + 20;
this.height = skin.height + 20;
this.title = initTitle;
this.stage.scaleMode = StageScaleMode.NO_SCALE;
this.stage.align = StageAlign.TOP_LEFT;
this.addEventListener(Event.CLOSE, windowCloseHandler);
// フェードインでウインドウを表示
Tweener.addTween(base, {alpha:1.0, time:0.5, transition:"linear"});
}

public function deleteReference():void {
skin.window.removeEventListener(MouseEvent.MOUSE_DOWN, skinWindowDragHandler);
skin.close.removeEventListener(MouseEvent.MOUSE_DOWN, skinCloseButtonHandler);
skin.close.removeEventListener(MouseEvent.MOUSE_OVER, skinCloseMouseOverHandler);
skin.close.removeEventListener(MouseEvent.MOUSE_OUT, skinCloseMouseOutHandler);
}

// Event Handler /////////////////////////////////////////////
private function skinCloseMouseOverHandler(event:MouseEvent):void {
// マウスオーバーでGlowエフェクト
Tweener.addTween(event.currentTarget, {time:0.5, transition:"linear",
_Glow_alpha:0.7, _Glow_blurX:15, _Glow_blurY:15,
_Glow_color:0x00CCCC,
_Glow_quality:1, _Glow_strength:1});
}

private function skinCloseMouseOutHandler(event:MouseEvent):void {
// マウスアウトでGlowエフェクト解除
Tweener.addTween(event.currentTarget, {time:0.5, transition:"linear",
_Glow_alpha:0});
}

protected function windowCloseHandler(event:Event):void {
this.removeEventListener(Event.CLOSE, windowCloseHandler);
}

private function windowCloseTweenComp():void {
super.close();
deleteReference();
}

protected function skinWindowDragHandler(event:MouseEvent):void {
this.startMove();
}

protected function skinCloseButtonHandler(event:MouseEvent):void {
// フェードアウトでウインドウを閉じる
Tweener.addTween(base, {alpha:0.0, time:0.5, transition:"linear",
onComplete:windowCloseTweenComp});
}
}
}

NativeWindowInitOptionsで事前に作成するウインドウの設定.

オリジナルスキンを使うなら,

nwOptions.systemChrome = NativeWindowSystemChrome.NONE;

としておく.



新しく作ったウインドウにどうやってオブジェクトを表示するかというと,実は今までのやり方と全く変わらない.

this.stage.addChild(base);

というように,実は各NativeWindowがstageを所持している.

だから,今まで同様に,NativeWindow内のstageにaddChildすればいい.

つまり,表示オブジェクト的にFlashとAIRでは,



Flash:stageをトップとした階層構造

AIR :1つまたは複数のNativeWindow内のstageをトップとした階層構造



という違いがある.







各NativeWindowのメソッドについて.



activateでウインドウにフォーカスする.



このメソッドを呼び出すか,visibleをtrueにしないとウインドウが表示されないので注意.

closeでウインドウを閉じる.



startMoveでウインドウをドラッグ.

これ呼び出すだけで自動でドラッグされるとかwゆとり仕様乙

0 件のコメント: