サイテック株式会社 > 【連載】新人女子プログラマーの技術修行日記 - 第9回 Flex編④　AIRレイアウトのあれこれ

あれ、今年初の技術修行日記かもしれない(・・；)

最近はFlexでAIRアプリをいくつか作ったりしていて、

レイアウトまわりで何度も同じことを調べることがあったので、

次回からちゃちゃっとできるようにメモ代わりにまとめます。

デフォルトウィンドウ

デフォルトはこんな感じの表示になります。

ステータスバー無効

showStatusBar = "false"でステータスバーが消えます。

systemChrome

systemChromeはデフォルトstandardなので、Windows、MacなどOS依存の見え方ですが、これを無効にすることで、Flexスタイルで見えるようです。

Macで確認はしてませんが。。

オリジナルウィンドウにする

タイトルバーがあるとどうしてもAdobeやFlexの感じが強調されるのでこれをなくすには

設定ファイル***-app.xml内の

WindowedApplicationにshowFlexChrome = "false"を追加します。

タイトルバーがなくなったので閉じるボタンの追加と、

ウィンドウ移動用のCanvasかHboxを適当な場所に埋め込んでMouseDownイベントを追加します。

		// ウィンドウを閉じる
		private function closeWindow(event:MouseEvent):void {

			close();
		}

		// ウィンドウを移動させる
		private function moveWindow(event:MouseEvent):void {

			stage.nativeWindow.startMove();
		}

ウィンドウの角を丸くする

アプリケーションとしてはウィンドウは少し丸みがあった方がいい場合もあります。

<?xml version="1.0" encoding="utf-8"?>
<mx:WindowedApplication
	xmlns:mx="http://www.adobe.com/2006/mxml"
	layout="absolute"
	width="300"
	height="200"
	showStatusBar="false"
	showFlexChrome="false"
>

<mx:Canvas width="100%" height="100%" cornerRadius="20" backgroundColor="#fff6d2" borderStyle="solid">

	<mx:Text fontSize="14" text='枠を丸く2(app.xmlのtransparentをtrue)'  height="58" width="100%" verticalCenter="0"/>
	<mx:Canvas id="move_canvas" mouseDown="moveWindow(event)" width="100%"  height="50">
		<mx:Button click="closeWindow(event)" x="232" y="10" label="閉じる"/>
	</mx:Canvas>
</mx:Canvas>
</mx:WindowedApplication>

WindowedApplicationの中に同じ大きさのCanvasを配置して、

cornerRadiusを設定します。

borderStyle：noneでは丸くなりません。

WindowedApplicationを透明にしないと可視状態なので、

***-app.xmlのtransparentをtrueに設定します。

同じような別ウィンドウを開く

今回はWindowクラスを継承したクラスをActionScriptで作成して実装しました。

親に別ウィンドウボタンを追加して以下のClickイベントを追加する。

		// 別ウィンドウを開く
		private var other_window:createOtherWindow;
		public function openOtherWindow():void{

			// 開いてるウィンドウが既にあったら閉じる
			if(other_window != null) {
				other_window.close();
			}
			other_window = new createOtherWindow();
			other_window.openWindow();

		}

createOtherWindow.as

package
{
	import flash.events.MouseEvent;

	import mx.containers.Canvas;
	import mx.controls.Button;
	import mx.controls.Label;
	import mx.core.Window;

	public class createOtherWindow extends Window
	{
		public function createOtherWindow()
		{
			super();
			// window情報
			this.systemChrome = "none";
			this.visible = true;
			this.transparent = true;
			this.showTitleBar = false;
			this.resizable = false;

			this.width = 350;
			this.height = 250;
			this.showStatusBar = false;

			// これがないとWindow背景が透明にならない
			this.setStyle("borderStyle","none");
			this.setStyle("backgroundColor","");

		}

		public function openWindow():void {

			// 枠を丸くするベースCanvas
			var base_canvas:Canvas = new Canvas();
			base_canvas.width = 300;
			base_canvas.height = 200;
			base_canvas.setStyle("cornerRadius",20);
			base_canvas.setStyle("backgroundColor","#e3ffcc");
			base_canvas.setStyle("borderStyle","solid");
			base_canvas.verticalScrollPolicy = "off";
			base_canvas.horizontalScrollPolicy = "off";
			this.addChild(base_canvas);

			// ウィンドウを移動させる
			var move_canvas:Canvas = new Canvas();
			move_canvas.addEventListener(MouseEvent.MOUSE_DOWN,moveWindow);
			move_canvas.width = this.width;
			move_canvas.height = 50;
			base_canvas.addChild(move_canvas);

			// 閉じるボタン
			var close_button:Button = new Button();
			close_button.label = "閉じる";
			close_button.x = 232;
			close_button.y = 10;
			close_button.addEventListener(MouseEvent.CLICK,closeWindow);
			move_canvas.addChild(close_button);

			var label:Label = new Label();
			label.x = 10;
			label.text = "別ウィンドウ";
			base_canvas.addChild(label);

			this.open();
		}

		private function closeWindow(event:MouseEvent):void {

			this.close();
		}

		private function moveWindow(event:MouseEvent):void {

			stage.nativeWindow.startMove();
		}

	}
}

基本的なことばかり書きましたが、こんな感じです。

Windowの開き方も、レイアウトの設定の仕方もいろいろあるのでもっといい書き方はありそうな気がしますが。。

これでオリジナルなアプリケーションっぽいですね☆

今回は以上です。