Flex Multi-line ToggleButtonBar


/ Published in: ActionScript 3
Save to your folder(s)

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


Copy this code and paste it in your HTML
  1. package components
  2. {
  3. import flash.display.DisplayObject;
  4. import flash.events.Event;
  5.  
  6. import mx.containers.VBox;
  7. import mx.controls.ToggleButtonBar;
  8. import mx.events.FlexEvent;
  9. import mx.events.ItemClickEvent;
  10.  
  11. /**
  12. * @author Danny Kopping
  13. * @link http://ria-coder.com
  14. *
  15. * ==========================USAGE==========================
  16. * <components:MultiLineToggleButtonBar id="mltbb" width="100%" selectedIndex="5" columns="2"
  17. barWidth="100%" barHeight="30" itemClick="trace(mltbb.selectedIndex)">
  18. <components:dataProvider>
  19. <mx:Array>
  20. <mx:Object label="Label" icon="@Embed(source='/path/to/icon')/>
  21. <mx:Object label="Label" icon="@Embed(source='/path/to/icon')/>
  22. <mx:Object label="Label" icon="@Embed(source='/path/to/icon')/>
  23. <mx:Object label="Label" icon="@Embed(source='/path/to/icon')/>
  24. <mx:Object label="Label" icon="@Embed(source='/path/to/icon')/>
  25. </mx:Array>
  26. </components:dataProvider>
  27. </components:MultiLineToggleButtonBar>
  28. */
  29.  
  30. [Event(name="itemClick",type="mx.events.ItemClickEvent")]
  31. public class MultiLineToggleButtonBar extends VBox
  32. {
  33. private var _dataProvider:Array;
  34.  
  35. [ArrayElementType("mx.controls.ToggleButtonBar")]
  36. private var toggleBars:Array;
  37.  
  38. private var selectedBar:ToggleButtonBar;
  39. private var _selectedIndex:int = 0;
  40. private var _barWidth:Object;
  41. private var _barHeight:Object;
  42.  
  43. public var columns:uint = 3;
  44.  
  45. public function MultiLineToggleButtonBar()
  46. {
  47. super();
  48.  
  49. toggleBars = [];
  50. addEventListener(Event.ADDED_TO_STAGE, setSelected);
  51. }
  52.  
  53. public function get barWidth():Object
  54. {
  55. return _barWidth;
  56. }
  57.  
  58. public function set barWidth(value:Object):void
  59. {
  60. _barWidth = value;
  61. }
  62.  
  63. public function get barHeight():Object
  64. {
  65. return _barHeight;
  66. }
  67.  
  68. public function set barHeight(value:Object):void
  69. {
  70. _barHeight = value;
  71. }
  72.  
  73. public function get dataProvider():Array
  74. {
  75. return _dataProvider;
  76. }
  77.  
  78. public function set dataProvider(value:Array):void
  79. {
  80. _dataProvider = value;
  81.  
  82. createBars();
  83. }
  84.  
  85. private function createBars():void
  86. {
  87. for each(var bar:ToggleButtonBar in toggleBars)
  88. removeChild(bar);
  89.  
  90. var tbIndex:uint = 0;
  91. var counter:uint = 0;
  92. var current:ToggleButtonBar;
  93.  
  94. for each(var item:Object in dataProvider)
  95. {
  96. if(counter % columns == 0)
  97. {
  98. current = new ToggleButtonBar();
  99. current.setStyle("horizontalGap", 6);
  100.  
  101. current.dataProvider = dataProvider.slice(counter, counter + columns);
  102. toggleBars.push(addChild(current) as ToggleButtonBar);
  103.  
  104. current.addEventListener(FlexEvent.CREATION_COMPLETE, updateSizes);
  105. current.addEventListener(ItemClickEvent.ITEM_CLICK, onItemClick);
  106. }
  107.  
  108. counter++;
  109. }
  110. }
  111.  
  112. private function updateSizes(event:FlexEvent):void
  113. {
  114. var current:ToggleButtonBar = event.target as ToggleButtonBar;
  115.  
  116. if(barWidth.toString().indexOf("%") != -1)
  117. current.percentWidth = barWidth.toString().substr(0, barWidth.toString().length - 1);
  118. else
  119. current.width = Number(barWidth);
  120.  
  121. if(barHeight.toString().indexOf("%") != -1)
  122. current.percentHeight = barHeight.toString().substr(0, barHeight.toString().length - 1);
  123. else
  124. current.height = Number(barHeight);
  125. }
  126.  
  127. private function setSelected(event:Event):void
  128. {
  129. if(selectedIndex < 0)
  130. return;
  131.  
  132. if(!toggleBars[Math.floor(selectedIndex / columns)])
  133. return;
  134.  
  135. var selected:ToggleButtonBar = toggleBars[Math.floor(selectedIndex / columns)];
  136. selected.selectedIndex = selectedIndex % columns;
  137. deselectOthers(selected);
  138. }
  139.  
  140. public function get selectedIndex():int
  141. {
  142. return _selectedIndex;;
  143. }
  144.  
  145. public function set selectedIndex(value:int):void
  146. {
  147. _selectedIndex = value;
  148. }
  149.  
  150. private function onItemClick(event:ItemClickEvent):void
  151. {
  152. deselectOthers(event.target as ToggleButtonBar);
  153. this.dispatchEvent(event);
  154. }
  155.  
  156. private function deselectOthers(selected:ToggleButtonBar):void
  157. {
  158. this.selectedBar = selected;
  159.  
  160. for each(var bar:ToggleButtonBar in toggleBars)
  161. if(bar !== selected)
  162. {
  163. for each(var child:* in bar.getChildren())
  164. child.selected = false;
  165. }
  166.  
  167. selectedIndex = (toggleBars.indexOf(selected) * columns) + selected.selectedIndex;
  168. }
  169. }
  170. }

URL: http://ria-coder.com/

Report this snippet


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.