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

ふつうのウインドウだったらマウスでウインドウの位置を変えたり大きさを変えたりできますよね?今回はそれらの機能を追加したいと思います。

startMove() メソッド

startMove() は NativeWindow クラスのメソッドです。

public function startMove():void
 

マウスのボタンを押すと mouseDown イベントが発生します。この状態で startMove() メソッドを呼び出すと、マウスボタンを離す (もしくは何らかのマウスイベントが発生する) までマウスの動きに従ってウインドウを移動させることができます。

移動終了の判断は Apollo 側で勝手に行いますので、特に設定する必要はありません。ですので stopMove() といった類のメソッドは提供されていません。

ちなみに Windows では mouseDown 以外のタイミングから startMove() を呼ぶとキー操作による移動も可能になるようです。

さて、前回のサンプルにタイトルバーを使った移動ができるように機能を追加してみましょう。

まずはタイトルバーのコンポーネントがマウス操作に反応するよう 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>
 

コメントする

2014年1月

Sun Mon Tue Wed Thu Fri Sat
      1 2 3 4
5 6 7 8 9 10 11
12 13 14 15 16 17 18
19 20 21 22 23 24 25
26 27 28 29 30 31  
レンタルサーバー

月別 アーカイブ

Powered by Movable Type 4.261