AboutFlex.net

This component is a ButtonBar for the ImageBtn component.

This example shows you an ImageBtnBar in action:

the Application:

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical"
	xmlns:creativesource="it.creativesource.*"
	viewSourceURL="srcview/index.html" width="550" height="130">

	<creativesource:ImageBtnBar width="444" direction="horizontal">
		<creativesource:ImageBtn
			id="imageBtn"
			backgroundImg="@Embed('./assets/base.png')"
			rollOverImage="@Embed('./assets/over.png')"
			selectedImage="@Embed('./assets/down.png')"
			enableSelection="true"
			width="130" height="50" />
		<creativesource:ImageBtn
			id="imageBtn1"
			backgroundImg="@Embed('./assets/base.png')"
			rollOverImage="@Embed('./assets/over.png')"
			selectedImage="@Embed('./assets/down.png')"
			enableSelection="true"
			width="130" height="50"
			/>
		<creativesource:ImageBtn
			id="imageBtn2"
			backgroundImg="@Embed('./assets/base.png')"
			rollOverImage="@Embed('./assets/over.png')"
			selectedImage="@Embed('./assets/down.png')"
			enableSelection="true"
			width="130" height="50"
			/>
	</creativesource:ImageBtnBar>

</mx:Application>

the ImageBtnBar:

package it.creativesource
{
	import flash.display.DisplayObject;
	import flash.events.MouseEvent;

	import mx.collections.ArrayCollection;
	import mx.containers.Box;

	public class ImageBtnBar extends Box
	{

		protected var dataProvider:ArrayCollection
		public function ImageBtnBar(){

			super();
			dataProvider=new ArrayCollection();
		}
		override public function addChild(child:DisplayObject):DisplayObject{
			if(!(child is ImageBtn))
			throw new Error('The child must be an ImageBtn')
			child.addEventListener(MouseEvent.CLICK,deSelectOthers);
			dataProvider.addItem(child)
			return super.addChild(child)

		}

		override public function removeChild(child:DisplayObject):DisplayObject{
			for(var i:int=0;i<dataProvider.length;i++){
				if(child==dataProvider[i])
					removeChildAt(i);
			}
			return super.removeChild(child)

		}
		override public function removeChildAt(index:int):DisplayObject{
			dataProvider.removeItemAt(index)
			return super.removeChildAt(index);	

		}
		private function deSelectOthers(e:MouseEvent):void{

			for(var i:int=0;i<super.numChildren;i++){
				if(dataProvider[i]!=e.currentTarget)
					dataProvider[i].deSelect();

			}
		}

	}
}

the ImageBtn:

package it.creativesource
{
	import flash.events.Event;
	import flash.events.MouseEvent;

	import mx.containers.Canvas;
	import mx.controls.Image;
	import mx.controls.Text;

	public class ImageBtn extends Canvas
	{
		public const BASE_STATE:String='BASE';
		public const OVER_STATE:String='OVER';
		public const SELECTED_STATE:String='SELECTED';
		public const STATE_CHANGED:String="stateChanged"
		protected var textField:Text;
		protected var background:Image;
		protected var backgroundOver:Image;
		protected var backgroundSelected:Image;
		private var _state:String=BASE_STATE;

		public function ImageBtn()
		{

			super();
			buttonMode=true;
			background=new Image()
			backgroundOver=new Image()
			backgroundSelected=new Image();
			textField=new Text();
			state=BASE_STATE;
			activate();

		}

		override protected function createChildren():void{

			super.createChildren();
			addChild(background);
			addChild(backgroundOver);
			addChild(backgroundSelected);
			addChild(textField);

		}
		override public function set label(value:String):void{
			textField.text=value;
		}
		[Bindable]
		override public function get label():String{
			return textField.text;
		}

		override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void{

			super.updateDisplayList(unscaledWidth,unscaledHeight);

			textField.x=this.width/2-textField.textWidth/2;
			textField.y=this.height/2-textField.textHeight/2;
			textField.mouseChildren=false;
			horizontalScrollPolicy="none"
			verticalScrollPolicy="none"
		}

		public function set enableSelection(b:Boolean):void{
			if(b==true)
				addEventListener(MouseEvent.CLICK,selectBtn)

		}

		public function set backgroundImg(s:String):void{
			background.source=s;
		}

		public function set rollOverImage(s:String):void{
			backgroundOver.source=s;
		}
		public function set selectedImage(s:String):void{
			backgroundSelected.source=s;
		}

		private function handleOut(e:MouseEvent=null):void{
			state=BASE_STATE;
		}
		private function handleOver(e:MouseEvent=null):void{
			state=OVER_STATE
		}

		private function selectBtn(e:MouseEvent=null):void{
			state=SELECTED_STATE
		}

		public function set state(state:String):void{
			switch(state){
				case BASE_STATE:
					setBaseState();
				break;
				case OVER_STATE:
					setOverState();

				break;
				case SELECTED_STATE:
					setSelectedState();
				break;
				default:
					throw new Error('This state does not exist, please use '+BASE_STATE+'or'+OVER_STATE+'or'+SELECTED_STATE)
					setBaseState();
				break;
			}
			_state=state
		}
		public function get state():String{
			return _state
		}
		private function setBaseState():void{
			background.visible=true
			backgroundOver.visible=false
			backgroundSelected.visible=false
			dispatchEvent(new Event(STATE_CHANGED))
		}

		private function setOverState():void{
			background.visible=false
			backgroundOver.visible=true
			backgroundSelected.visible=false
			dispatchEvent(new Event(STATE_CHANGED))
		}

		private function setSelectedState():void{
			if(state!=SELECTED_STATE){
				backgroundSelected.visible=true
				background.visible=false
				backgroundOver.visible=false
				removeEventListener(MouseEvent.MOUSE_OVER,handleOver)
				removeEventListener(MouseEvent.MOUSE_OUT,handleOut)
				dispatchEvent(new Event(STATE_CHANGED))
			}
		}

		public function deSelect(e:MouseEvent=null):void{

			state=BASE_STATE;
			activate()
			dispatchEvent(new Event(STATE_CHANGED))

		}

		private function activate():void{

			addEventListener(MouseEvent.MOUSE_OVER,handleOver)
			addEventListener(MouseEvent.MOUSE_OUT,handleOut)

		}

	}
}