チェックボックスをつくる

イベントの勉強にチェックボックスを自作してみた。

イベントクラス

package my.events 
{
	import flash.events.Event;
	 
	public class CheckBoxEvent extends Event {
		
		/**
		 * The <code>CheckBoxEvent.CHANGE</code> constant defines the values of the <code>type</code>
		 * property of the event object for a <code>checkBoxChange</code> event.
		 * 
		 * @eventType CheckBoxChange
		 */		
		public static const CHANGE:String = "checkBoxChange";
		
		private var _isOn:Boolean;
		
		/**
		 * Constructor.
		 * 
		 * @param type The type of event to be dispatched. This should be <code>CheckBoxEvent.CHANGE</code>.
		 * @param isOn The state of the check box.
		 * 
		 * @example
		 * <pre>
		 * var event:CheckBoxEvent = new CheckBoxEvent(CheckBoxEvent.CHANGE, boolean);
		 * dispatchEvent(event);
		 * </pre>
		 */		
		public function CheckBoxEvent(type:String, isOn:Boolean) {
			super(type);
			_isOn = isOn;
		}
		
		/**
		 * @return The state of the check box. If value is true, check box was checked.
		 */		
		public function get isOn():Boolean {
			return _isOn;
		}
		
		/**
		 * @return The cloned event.
		 */
		override public function clone():Event {
			return new CheckBoxEvent(type, _isOn);
		}
		
		override public function toString():String {
			return formatToString("CheckBoxEvent", "type", 
			                      "bubbles", "cancelable", "eventPhase", "_isOn");
		}				
	}
}

チェックボックスのチェックマーク

チェックマークの絵を描く。

package my.display 
{
	import flash.display.Shape;

	public class CheckBoxMark extends Shape {
		
		public function CheckBoxMark() {
			draw();
		}
		
		private function draw():void {
			graphics.beginFill(0x000000);
			graphics.lineStyle(1, 0x000000);
			graphics.moveTo(0, 10);
			graphics.lineTo(5, 15);
			graphics.lineTo(20, 0);
			graphics.lineTo(5, 20);
			graphics.lineTo(0, 10);
			graphics.endFill();
			scaleX = 0.7;
			scaleY = 0.7;
		}
	
}

チェックボックス

メインとなるクラス

package my.display 
{
	import my.events.CheckBoxEvent;	
	 
	import flash.display.Sprite;
	import flash.display.Shape;
	import flash.events.MouseEvent;
	import flash.text.TextField;
	import flash.text.TextFormat;	
	 
	public class CheckBox extends Sprite {
		
		private const SIZE:uint = 20;
		private const TEXT_FORMAT:TextFormat = new TextFormat(null, 20);
		
		private var _mark:Shape;
		private var _isOn:Boolean;
		
		public function CheckBox(isOn:Boolean=false, text:String="") {
			_isOn = isOn;
			drawBox();
			createMark();
			createTextField(text);
			addEventListener(MouseEvent.MOUSE_DOWN, onMouseDownListener);
		}
		
		private function drawBox():void {
			graphics.beginFill(0xFFFFFF);
			graphics.lineStyle(1);
			graphics.lineTo(SIZE, 0);
			graphics.lineTo(SIZE, SIZE);
			graphics.lineTo(0, SIZE);
			graphics.lineTo(0, 0);
			graphics.endFill();			
		}		
		
		private function createMark():void {
			_mark = new CheckBoxMark();
			_mark.x = (width - _mark.width) / 2;
			_mark.y = (height - _mark.height) / 2;
			addChild(_mark);
			_mark.visible = _isOn;
		}
		
                private function createTextField(text:String):void {
			var field:TextField = new TextField();
			field.text = text;
			field.setTextFormat(TEXT_FORMAT);
			field.selectable = false;
			field.x = width;
			field.y = (height - field.textHeight) / 2 ;
			addChild(field);
		}
		
		private function onMouseDownListener(e:MouseEvent):void {
			_isOn = !_isOn;
			dispatchEvent(new CheckBoxEvent(CheckBoxEvent.CHANGE, _isOn));
			_mark.visible = _isOn;
		}				
	}
}

動作確認

ちゃんと動いているようだ。

package  
{
	import my.display.CheckBox;
	import my.events.CheckBoxEvent;
	 
	import flash.display.Sprite;	
	
	public class Main extends Sprite{
		
		public function Main() {
			var c:CheckBox = new CheckBox(true, "test");
			c.x = c.y = 100;
			addChild(c);
			c.addEventListener(CheckBoxEvent.CHANGE, changeListener);
		}
		
		private function changeListener(e:CheckBoxEvent):void {
			trace(e.isOn);
		}
	}

}