Apollo ウインドウの移動とリサイズの実現

まずはタイトルバーのコンポーネントがマウス操作に反応するよう mouseDown イベントに対するイベントハンドラを指定します。

<mx:HBox mouseDown="onTitleBarMouseDown(event)" styleName="box" width="100%">
 

イベントハンドラの側で必要な処理は startMove() を呼び出すことだけです。

private function onTitleBarMouseDown(e:MouseEvent):void {
  stage.window.startMove( );
}
 

これで、タイトルバーを掴んで動かすことができるようになりました。

startResize() メソッド

次にウインドウのリサイズ処理を開始する startResize() メソッドの使い方です。

public function startResize(edgeOrCorner:String):void
 

このメソッドも、上で説明した startMove() と同様に、mouseDown のイベントハンドラ内で呼ばれると mouseUp イベントが発生するまで処理 （こっちの場合はマウスの動きに従ってウインドウの大きさを変更） を続けます。リサイズ終了の処理の記述が必要ない点も startMove() と似ています。

startResize() メソッドの引数にはリサイズを行う方向 （下向きとか左向きとか） を指定します。ということは、マウスの押された場所によって、指定する引数を変更するロジックが必要になるということです。例えば、押された場所が右下の角であれば、右側と下側両方の辺をリサイズの対象とするように引数を指定する必要があります。（普通のアプリの場合）

このとき引数として指定できるオプションには以下のものがあります。NativeWindowResize クラスに定義されています。

NativeWindowResize.TOP          // 上方向にリサイズ
NativeWindowResize.BOTTOM       // 下方向にリサイズ
NativeWindowResize.LEFT         // 左方向にリサイズ
NativeWindowResize.RIGHT        // 右方向にリサイズ
NativeWindowResize.TOP_LEFT     // 上と左方向にリサイズ
NativeWindowResize.TOP_RIGHT    // 上と右方向にリサイズ
NativeWindowResize.BOTTOM_LEFT  // 下と左方向にリサイズ
NativeWindowResize.BOTTOM_RIGHT // 下と右方向にリサイズ
NativeWindowResize.NONE         // どの方向にもリサイズしない
 

下のサンプルコードは右下方向にリサイズする処理を開始するものです。分かりやすくするために反応する領域を大きめに取っています。

private function onBoxMouseDown(e:MouseEvent):void {
  // 反応する領域の大きさ
  var dragArea:int = 300;
  // マウスが右下の角にあるかチェック
  if ((mouseY > (height - dragArea)) && (mouseX > (width - dragArea))) {
    stage.window.startResize(NativeWindowResize.BOTTOM_RIGHT);
  }
}
 

このメソッドを呼び出す記述を追加すると前回のサンプルでもリサイズができるようになります。下が修正したコードです。

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
  <mx:Script>
  <![CDATA[
    private function onMinBtnClick(e:MouseEvent):void
    {
      stage.window.minimize( );
    }
    private function onMaxBtnClick(e:MouseEvent):void
    {
      if (stage.window.displayState != NativeWindowDisplayState.MAXIMIZED)
      {
        stage.window.maximize( );
        maxBtn.label = "v";
      }
      else
      {
        stage.window.restore( );
        maxBtn.label = "\u25A2";
      }
    }
    private function onCloseBtnClick(e:MouseEvent):void
    {
      stage.window.close( );
    }
    private function onTitleBarMouseDown(e:MouseEvent):void {
      stage.window.startMove( );
    }
    private function onBoxMouseDown(e:MouseEvent):void {
      var dragArea:int = 300;
      if ((mouseY > (height - dragArea)) && (mouseX > (width - dragArea))) {
        stage.window.startResize(NativeWindowResize.BOTTOM_RIGHT);
      }
    }
  ]]>
  </mx:Script>
  <mx:Style>
    Application
    {
      background-color:"";
      background-image:"";
    }
    .box {
      backgroundColor:#888888;
      backgroundAlpha:0.8;
    }
  </mx:Style>
  <mx:HBox mouseDown="onTitleBarMouseDown(event)" styleName="box" width="100%">
    <mx:Button id="minBtn" label="_" click="onMinBtnClick(event)" />
    <mx:Button id="maxBtn" label='{"\u25A2"}' click="onMaxBtnClick(event)" />
    <mx:Button id="closeBtn" label="X" click="onCloseBtnClick(event)" />
  </mx:HBox>
  <mx:HBox mouseDown="onBoxMouseDown(event)" styleName="box" width="100%" height="100%"/>
</mx:Application>