Adobe AIRで作るデスクトップアプリケーション

第6回 ウィンドウの操作

この記事を読むのに必要な時間:およそ 2 分

ウィンドウの外観

ウェブ上のFlashコンテンツと違い,AIRアプリケーションにはそれぞれのウィンドウがあります。デフォルトの状態ではOSのウィンドウと同じ外観を持ったシステムクロームが使われます。開発環境に関係なく,アプリケーションを実行しているプラットフォームのウィンドウになります。

MacintoshとWindowsのシステムクローム

MacintoshとWindowsのシステムクローム

これはアプリケーション記述ファイルの設定によるものです。rootContent要素のsystemChrome属性が"standard"であればシステムクロームを指定していることになります。

<rootContent systemChrome="standard" transparent="false" visible="true">[SWF reference is generated]</rootContent>

システムクロームを使わない場合はsystemChrome属性を"none"にします。すると,Flexクロームに変わります。デフォルトのMXMLではルートにWindowedApplicationコンポーネントが指定されているため,そのカスタムクロームが適用されるのです。ただし,systemChrome属性を"none"にしただけではウィンドウのコーナーが不透明で違和感があります。これを解消するには,transparent属性を"true"にしてウィンドウのアルファサポートを有効にします。

<rootContent systemChrome="none" transparent="true" visible="true">[SWF reference is generated]</rootContent>

MacintoshとWindowsのFlexクローム

MacintoshとWindowsのFlexクローム

完全にオリジナルの外観にしたい場合は,MXMLのWindowedApplicationタグをApplicationタグに書き換えます。Applicationコンポーネントにはクロームがないため,背景だけの状態になります。さらに下記のようにスタイルを設定すれば背景も表示されなくなるので,自由な形状のパーツを配置してカスタムクロームを構成できます。ここではSWFLoaderコンポーネントを使って外部SWFファイルを読み込んでいます。

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
	<mx:Style>
		Application
		{
			background-image:"";
			background-color:"";
		}
	</mx:Style>
	<mx:SWFLoader x="0" y="0" source="clock.swf"/>
</mx:Application>

背景を透過させて自由な形のアプリケーションにできる

背景を透過させて自由な形のアプリケーションにできる

ウィンドウの最小化/最大化/クローズ

AIRアプリケーションのウィンドウはNativeWindowクラスのAPIでコントロールできます。各ウィンドウはNativeWindowクラスのインスタンスです。このオブジェクトにはStageクラスのwindowプロパティを使ってアクセスできます。下記はウィンドウのサイズ変更とクローズのサンプルです。

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
	<mx:Script>
		<![CDATA[
			private function onMinimizeButtonClick(evt:MouseEvent):void {
				stage.window.minimize();
			}
			private function onMaximizeButtonClick(evt:MouseEvent):void {
				stage.window.maximize();
			}
			private function onRestoreButtonClick(evt:MouseEvent):void {
				stage.window.restore();
			}
			private function onCloseButtonClick(evt:MouseEvent):void {
				stage.window.close();
			}
		]]>
	</mx:Script>
	<mx:Button x="10" y="10" label="最小化" click="onMinimizeButtonClick(event)"/>
	<mx:Button x="74" y="10" label="最大化" click="onMaximizeButtonClick(event)"/>
	<mx:Button x="140" y="10" label="元に戻す" click="onRestoreButtonClick(event)"/>
	<mx:Button x="214" y="10" label="閉じる" click="onCloseButtonClick(event)"/>
</mx:Application>

4つのボタンを配置し,clickイベントで各処理を行っています。minimize()メソッドはウィンドウを最小化し,maximize()メソッドは最大化します。変更前のサイズに戻すにはrestore()メソッドを使います。close()メソッドでウィンドウを閉じます。

著者プロフィール

タナカヤスヒロ

早稲田大学卒業後,DTP業務を経てマルチメディア系制作会社へ。Macromedia Directorにのめり込む。フリーランスとなりFlashにシフトしてからもデスクトップ絡みの仕事が絶えず,Apolloにも勝手に縁を感じている。現在株式会社antsに所属。ants Lab.にも記事を上げている。

URLhttp://labs.anthill.jp/

著書

コメント

コメントの記入