Flex Multi-line ToggleButtonBar - ActionScript 3 Snipplr Social Repository

Revision: 28394

at July 7, 2010 23:06 by ria-coder

Updated Code

package components
{
	import flash.display.DisplayObject;
	import flash.events.Event;
	
	import mx.containers.VBox;
	import mx.controls.ToggleButtonBar;
	import mx.events.FlexEvent;
	import mx.events.ItemClickEvent;
	
	/**
	 * @author Danny Kopping
	 * @link http://ria-coder.com
	 * 
	 * ==========================USAGE==========================
	 * <components:MultiLineToggleButtonBar id="mltbb" width="100%" selectedIndex="5" columns="2" 
						 barWidth="100%" barHeight="30" itemClick="trace(mltbb.selectedIndex)">
			<components:dataProvider>
				<mx:Array>
					<mx:Object label="Label" icon="@Embed(source='/path/to/icon')/>
					<mx:Object label="Label" icon="@Embed(source='/path/to/icon')/>
					<mx:Object label="Label" icon="@Embed(source='/path/to/icon')/>
					<mx:Object label="Label" icon="@Embed(source='/path/to/icon')/>
					<mx:Object label="Label" icon="@Embed(source='/path/to/icon')/>
				</mx:Array>
			</components:dataProvider>
		</components:MultiLineToggleButtonBar>
	 */
	
	[Event(name="itemClick",type="mx.events.ItemClickEvent")]
	public class MultiLineToggleButtonBar extends VBox
	{
		private var _dataProvider:Array;
		
		[ArrayElementType("mx.controls.ToggleButtonBar")]
		private var toggleBars:Array;
		
		private var selectedBar:ToggleButtonBar;
		private var _selectedIndex:int = 0;
		private var _barWidth:Object;
		private var _barHeight:Object;
		
		public var columns:uint = 3;

		public function MultiLineToggleButtonBar()
		{
			super();
			
			toggleBars = [];
			addEventListener(Event.ADDED_TO_STAGE, setSelected);
		}
		
		public function get barWidth():Object
		{
			return _barWidth;
		}

		public function set barWidth(value:Object):void
		{
			_barWidth = value;
		}

		public function get barHeight():Object
		{
			return _barHeight;
		}

		public function set barHeight(value:Object):void
		{
			_barHeight = value;
		}

		public function get dataProvider():Array
		{
			return _dataProvider;
		}
		
		public function set dataProvider(value:Array):void
		{
			_dataProvider = value;
			
			createBars();
		}
		
		private function createBars():void
		{
			for each(var bar:ToggleButtonBar in toggleBars)
				removeChild(bar);
			
			var tbIndex:uint = 0;
			var counter:uint = 0;
			var current:ToggleButtonBar;
			
			for each(var item:Object in dataProvider)
			{
				if(counter % columns == 0)
				{
					current = new ToggleButtonBar();
					current.setStyle("horizontalGap", 6);
					
					current.dataProvider = dataProvider.slice(counter, counter + columns);
					toggleBars.push(addChild(current) as ToggleButtonBar);
							
					current.addEventListener(FlexEvent.CREATION_COMPLETE, updateSizes);
					current.addEventListener(ItemClickEvent.ITEM_CLICK, onItemClick);
				}
				
				counter++;
			}
		}

		private function updateSizes(event:FlexEvent):void
		{
			var current:ToggleButtonBar = event.target as ToggleButtonBar;
			
			if(barWidth.toString().indexOf("%") != -1)
				current.percentWidth = barWidth.toString().substr(0, barWidth.toString().length - 1);
			else
				current.width = Number(barWidth);
			
			if(barHeight.toString().indexOf("%") != -1)
				current.percentHeight = barHeight.toString().substr(0, barHeight.toString().length - 1);
			else
				current.height = Number(barHeight);
		}
		
		private function setSelected(event:Event):void
		{
			if(selectedIndex < 0)
				return;
			
			if(!toggleBars[Math.floor(selectedIndex / columns)])
				return;
			
			var selected:ToggleButtonBar = toggleBars[Math.floor(selectedIndex / columns)];
			selected.selectedIndex = selectedIndex % columns;
			deselectOthers(selected);	
		}
		
		public function get selectedIndex():int
		{
			return _selectedIndex;;
		}
		
		public function set selectedIndex(value:int):void
		{			
			_selectedIndex = value;
		}

		private function onItemClick(event:ItemClickEvent):void
		{
			deselectOthers(event.target as ToggleButtonBar);
			this.dispatchEvent(event);
		}
		
		private function deselectOthers(selected:ToggleButtonBar):void
		{
			this.selectedBar = selected;
			
			for each(var bar:ToggleButtonBar in toggleBars)
				if(bar !== selected)
				{
					for each(var child:* in bar.getChildren())
						child.selected = false;
				}
			
			selectedIndex = (toggleBars.indexOf(selected) * columns) + selected.selectedIndex;
		}
	}
}

Revision: 28393

at July 7, 2010 23:05 by ria-coder

Updated Code

package components
{
	import flash.display.DisplayObject;
	import flash.events.Event;
	
	import mx.containers.VBox;
	import mx.controls.ToggleButtonBar;
	import mx.events.FlexEvent;
	import mx.events.ItemClickEvent;
	
	/**
	 * @author Danny Kopping
	 * @link http://ria-coder.com
	 * 
	 * ==========================USAGE==========================
	 * <components:MultiLineToggleButtonBar id="mltbb" width="100%" selectedIndex="5" columns="2" 
						 barWidth="100%" barHeight="30" itemClick="trace(mltbb.selectedIndex)">
			<components:dataProvider>
				<mx:Array>
					<mx:Object label="Label" icon="@Embed(source='/path/to/icon')/>
					<mx:Object label="Label" icon="@Embed(source='/path/to/icon')/>
					<mx:Object label="Label" icon="@Embed(source='/path/to/icon')/>
					<mx:Object label="Label" icon="@Embed(source='/path/to/icon')/>
					<mx:Object label="Label" icon="@Embed(source='/path/to/icon')/>
				</mx:Array>
			</components:dataProvider>
		</components:MultiLineToggleButtonBar>
	 */
	
	[Event(name="itemClick",type="mx.events.ItemClickEvent")]
	public class MultiLineToggleButtonBar extends VBox
	{
		private var _dataProvider:Array;
		
		[ArrayElementType("mx.controls.ToggleButtonBar")]
		private var toggleBars:Array;
		
		private var selectedBar:ToggleButtonBar;
		private var _selectedIndex:int = 0;
		private var _barWidth:Object;
		private var _barHeight:Object;
		
		public var columns:uint = 3;

		public function MultiLineToggleButtonBar()
		{
			super();
			
			toggleBars = [];
			addEventListener(Event.ADDED_TO_STAGE, setSelected);
		}
		
		public function get barWidth():Object
		{
			return _barWidth;
		}

		public function set barWidth(value:Object):void
		{
			_barWidth = value;
		}

		public function get barHeight():Object
		{
			return _barHeight;
		}

		public function set barHeight(value:Object):void
		{
			_barHeight = value;
		}

		public function get dataProvider():Array
		{
			return _dataProvider;
		}
		
		public function set dataProvider(value:Array):void
		{
			_dataProvider = value;
			
			createBars();
		}
		
		private function createBars():void
		{
			for each(var bar:ToggleButtonBar in toggleBars)
				removeChild(bar);
			
			var tbIndex:uint = 0;
			var counter:uint = 0;
			var current:ToggleButtonBar;
			
			for each(var item:Object in dataProvider)
			{
				if(counter % columns == 0)
				{
					current = new ToggleButtonBar();
					current.setStyle("horizontalGap", 6);
					
					current.dataProvider = dataProvider.slice(counter, counter + columns);
					toggleBars.push(addChild(current) as ToggleButtonBar);
							
					current.addEventListener(FlexEvent.CREATION_COMPLETE, updateSizes);
					current.addEventListener(ItemClickEvent.ITEM_CLICK, onItemClick);
				}
				
				counter++;
			}
			
			trace((toggleBars.length * columns) + ":" + Math.ceil(dataProvider.length / columns));
		}

		private function updateSizes(event:FlexEvent):void
		{
			var current:ToggleButtonBar = event.target as ToggleButtonBar;
			
			if(barWidth.toString().indexOf("%") != -1)
				current.percentWidth = barWidth.toString().substr(0, barWidth.toString().length - 1);
			else
				current.width = Number(barWidth);
			
			if(barHeight.toString().indexOf("%") != -1)
				current.percentHeight = barHeight.toString().substr(0, barHeight.toString().length - 1);
			else
				current.height = Number(barHeight);
		}
		
		private function setSelected(event:Event):void
		{
			if(selectedIndex < 0)
				return;
			
			if(!toggleBars[Math.floor(selectedIndex / columns)])
				return;
			
			var selected:ToggleButtonBar = toggleBars[Math.floor(selectedIndex / columns)];
			selected.selectedIndex = selectedIndex % columns;
			deselectOthers(selected);	
		}
		
		public function get selectedIndex():int
		{
			return _selectedIndex;;
		}
		
		public function set selectedIndex(value:int):void
		{			
			_selectedIndex = value;
		}

		private function onItemClick(event:ItemClickEvent):void
		{
			deselectOthers(event.target as ToggleButtonBar);
			this.dispatchEvent(event);
		}
		
		private function deselectOthers(selected:ToggleButtonBar):void
		{
			this.selectedBar = selected;
			
			for each(var bar:ToggleButtonBar in toggleBars)
				if(bar !== selected)
				{
					for each(var child:* in bar.getChildren())
						child.selected = false;
				}
			
			selectedIndex = (toggleBars.indexOf(selected) * columns) + selected.selectedIndex;
		}
	}
}

Revision: 28392

at July 7, 2010 22:00 by ria-coder

Initial Code

package components
{
	import flash.display.DisplayObject;
	import flash.events.Event;
	
	import mx.containers.VBox;
	import mx.controls.ToggleButtonBar;
	import mx.events.FlexEvent;
	import mx.events.ItemClickEvent;
	
	/**
	 * @author Danny Kopping
	 * @link http://ria-coder.com
	 * 
	 * ==========================USAGE==========================
	 * <components:MultiLineToggleButtonBar id="mltbb" width="100%" selectedIndex="5" columns="2" 
												 itemClick="trace(mltbb.selectedIndex)">
			<components:dataProvider>
				<mx:Array>
					<mx:Object label="Label" icon="@Embed(source='/path/to/icon')/>
					<mx:Object label="Label" icon="@Embed(source='/path/to/icon')/>
					<mx:Object label="Label" icon="@Embed(source='/path/to/icon')/>
					<mx:Object label="Label" icon="@Embed(source='/path/to/icon')/>
					<mx:Object label="Label" icon="@Embed(source='/path/to/icon')/>
				</mx:Array>
			</components:dataProvider>
		</components:MultiLineToggleButtonBar>
	 */
	
	[Event(name="itemClick",type="mx.events.ItemClickEvent")]
	public class MultiLineToggleButtonBar extends VBox
	{
		private var _dataProvider:Array;
		
		[ArrayElementType("mx.controls.ToggleButtonBar")]
		private var toggleBars:Array;
		
		private var selectedBar:ToggleButtonBar;
		private var _selectedIndex:int = 0;
		
		public var columns:uint = 3;

		public function MultiLineToggleButtonBar()
		{
			super();
			
			toggleBars = [];
			addEventListener(Event.ADDED_TO_STAGE, setSelected);
		}
		
		public function get dataProvider():Array
		{
			return _dataProvider;
		}
		
		public function set dataProvider(value:Array):void
		{
			_dataProvider = value;
			
			createBars();
		}
		
		private function createBars():void
		{
			for each(var bar:ToggleButtonBar in toggleBars)
				removeChild(bar);
			
			var tbIndex:uint = 0;
			var counter:uint = 0;
			var current:ToggleButtonBar;
			
			for each(var item:Object in dataProvider)
			{
				if(counter % columns == 0)
				{
					current = new ToggleButtonBar();
					current.setStyle("horizontalGap", 6);
					current.percentWidth = current.percentHeight = 100;
					current.dataProvider = dataProvider.slice(counter, counter + columns);
					toggleBars.push(addChild(current) as ToggleButtonBar);
							
					current.addEventListener(ItemClickEvent.ITEM_CLICK, onItemClick);
				}
				
				counter++;
			}
		}
		
		private function setSelected(event:Event):void
		{
			if(selectedIndex < 0)
				return;
			
			if(!toggleBars[Math.floor(selectedIndex / columns)])
				return;
			
			var selected:ToggleButtonBar = toggleBars[Math.floor(selectedIndex / columns)];
			selected.selectedIndex = selectedIndex % columns;
			deselectOthers(selected);	
		}
		
		public function get selectedIndex():int
		{
			return _selectedIndex;;
		}
		
		public function set selectedIndex(value:int):void
		{			
			_selectedIndex = value;
		}

		private function onItemClick(event:ItemClickEvent):void
		{
			deselectOthers(event.target as ToggleButtonBar);
			this.dispatchEvent(event);
		}
		
		private function deselectOthers(selected:ToggleButtonBar):void
		{
			this.selectedBar = selected;
			
			for each(var bar:ToggleButtonBar in toggleBars)
				if(bar !== selected)
				{
					for each(var child:* in bar.getChildren())
						child.selected = false;
				}
			
			selectedIndex = (toggleBars.indexOf(selected) * columns) + selected.selectedIndex;
		}
	}
}

Initial URL

http://ria-coder.com/

Initial Description

Here's a very VERY rough but working implementation of a multi-line ToggleButtonBar component in Flex

Initial Title

Flex Multi-line ToggleButtonBar

Initial Tags

Flex

Initial Language

ActionScript 3

Choose a language for easy browsing: