CloseableButton

CloseableTabNavigatorのボタンだけ作ってみた。

package test
{
	import flash.events.MouseEvent;
	
	import mx.controls.Button;
	import mx.events.CloseEvent;
	import mx.events.FlexEvent;

[Event(name="close", type="mx.events.CloseEvent")]

public class CloseableButton extends Button {

	[Inspectable(category="General", defaultValue="false")]
	public var closeable: Boolean;

	public function CloseableButton()	{
		super();
		addEventListener(FlexEvent.INITIALIZE, onInitialize);
		addEventListener(FlexEvent.CREATION_COMPLETE, onCreationComplete);
		addEventListener(MouseEvent.CLICK, onClick);
	}

	private function onInitialize(event: FlexEvent): void {
		if (closeable) {
			setStyle("paddingRight", 10 + 10);
		}
	}

	private function onCreationComplete(event: FlexEvent): void {
		if (closeable) {
			// ×ボタンを描画
			graphics.lineStyle(4, 0xFF0000);
			graphics.moveTo(width - 15, height / 2 - 5);
			graphics.lineTo(width - 5, height / 2 + 5);
			graphics.moveTo(width - 15, height / 2 + 5);
			graphics.lineTo(width - 5, height / 2 - 5);
		}
	}
	
	private function onClick(event: MouseEvent): void {
		if (closeable && event.localX > width - 15 && event.localX < width - 5
			&& event.localY > height / 2 - 5 && event.localY < height / 2 + 5) {
			event.stopImmediatePropagation();
			dispatchEvent(new CloseEvent(CloseEvent.CLOSE));
		}
	}
}
}

追記

Flex標準のTabNavigatorを拡張しようと思ったけど、ぜんぶ自作することにしました。
Tabを画面からはみ出すくらい追加すると、Tabの横幅が狭くなり文字が読めませんでした。それは嫌なので、Eclipseみたいに隠されたTabの個数を表示するとか、改行してTabを何段か表示するようにしたい。
ということで自作します。だから、Tabの中身は普通にHBoxで「アイコン／ラベル／閉じるボタン」というように並べます。