Archive for 2010/3/3
AIRのいいところは、標準にあるWindowをカスタマイズできるところです。
しかしながら、なかなか、手を出すのが面倒でやっていなかったのですが、ちょっと試してみました。
作ってみた画面は以下の通りです。
このような画面を作るのに、Javaなどで作るのは非常に面倒なのですが、AIRの場合には慣れてしまえば、HTMLを組んでいるように簡単に作れます。
このような画面も、なれないデザイン込みでまあ、一晩もあればなんとかなるというレベルです。
さて、まず、カスタマイズをするために、いくつかの準備が必要です。
- アプリケーションのXMLでsystemChromeをnoneに設定します。
- アプリケーションのXMLで同じくtransparentをtrueに設定します。
- WindowedApplicaitonのshowFlexChromeをfalseに設定します。
これで、完全にデフォルトのコントロールが外れましたので、後は自分で部品を作っていきそれらを並べればいいというわけです。
でも、このようにカスタマイズすることで、自由に配置できるのはいいのですが、このために以下のようなことは自分で処理を書かなくてはいけません。
- ウィンドウの最小化・戻す・最大化・閉じる(右はじのボタンたち)
- ウィンドウの移動
- ウィンドウのリサイズ
ただ、メソッドを呼ぶだけでこれらの機能が実現できるので、あまり心配はいりません。
ウィンドウの最小化、戻す、最大化、閉じるは、
NativeWindowの
minimize(); restore(); maximize(); close();
で実現できますし、ウィンドウの移動は、startMove() でできますが、もともと、上部のバーを消してしまったので、私はロゴマークか、もしくは、濃い青い部分でmouseDownしたら移動ができるようにしてみました。
<mx :HBox top="10" left="15">
<mx :Image source="@Embed('assets/logo.png')" mouseDown="nativeWindow.startMove()" useHandCursor="true" />
</mx>
あと、リサイズは小さくて見えずらいのですが、左下に△のしるしを置き、そこでmouseDownしたときにstartResize()が動かせばリサイズができるようになります。
startResize();



