[AIR]透過ウィンドウのハンドリングやってみた

仕事でairアプリを作る事になりそうなので勉強してます。今回やってみたのは透過ウィンドウ（クローム？）のガジェット作り。ティッカーとかそういうクールな感じのデスクトップアプリケーションを作るときに使うと良いみたい。

今回作ったやる夫４コマのガジェットは、開くたびに違う４コマを開くというもの。サーバ側で画像をジェネレートしてるのでクライアントはそれを参照してるだけです。

透過ウィンドウを使う際には注意があって、普通のウィンドウは、ウィンドウタイトルバーをつかんでドラッグする事でウィンドウそのものを動かす事が出来るんだけど、透過ウィンドウだとタイトルバーもないのでそれをなんとかする必要があります。

で、ウィンドウのドラッグとか、アプリケーションの終了などのウィンドウクローズ処理を透過ウィンドウの場合どうするかというと、

ドラッグはコンテンツをつかんでドラッグしてあげる処理を実装する事で実現できます。
ウィンドウクローズは、ウィンドウタイトルバーにあるクローズボタンとかがないので、コンテンツ内に実装して解決してあげる必要があります。

ウィンドウクローズは、コンテンツをダブルクリックした時にクローズするというものと、コンテンツ内にボタンを用意してクローズする２通りのものを実装してみました。

ウィンドウのドラッグはそのままコンテンツをドラッグする事で実現しています。ちなみにコンテンツも透過png画像だったりすると、その透過部分はドラッグの際に掴めないみたいです。

これがやる夫４コマの拡大図。上の方にウィンドウの最小化と閉じるボタンをちょこっと用意してあります。

実装はjavascriptで行っていて、flexは使っていません。仕事ではティッカーを作るかもしれないので、調べたかったのはこういうコンテンツ上でのウィンドウハンドリングでした。

AdobeAIRのリファレンスがありますので詳しくはそちらを参照してください。

使ったwindow.nativeWindowのメソッド

// ドラッグ
window.nativeWindow.startMove();
// 最小化
window.nativeWindow.minimize();

ソース

<html>
<head>
<title>transWindow</title>
<script type="text/javascript">
document.onmousedown = function() {
window.nativeWindow.startMove();
};
document.ondblclick = function() {
window.close();
};
window.onload = function(){
var clswin = document.getElementById( "close" );
clswin.onclick = function(){
window.close();
}
var minwin = document.getElementById( "min" );
minwin.onclick = function(){
window.nativeWindow.minimize();
}
}
</script>
</head>
<body>
<div>
<div style="text-align:right;">
<img id="min" src="min.gif" /><img id="close" src="close.gif" />
</div>
<br />
<img src="http://mojalog.com/mojascript/img.php?u=higemoja" />
</div>
</body>
</html>

via : FlexSDKで「初めてのAIR」やってみた
via : ExtJSでAIRやってみた