Wednesday, July 3, 2013

Flex: Accessing the buttons of a ButtonBar

I was trying to figure out a way to access the individual buttons of the ButtonBar yesterday. After spending a bit of time working on it, I finally managed to do it. Here's a solution to the problem.

Here's the source code of my main application - SimpleButtonBarSelect.mxml
<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" 
      xmlns:s="library://ns.adobe.com/flex/spark" 
      xmlns:mx="library://ns.adobe.com/flex/mx" 
      creationComplete="creationCompleteEvent(event)"> 
 <fx:Script>
  <![CDATA[
   import mx.collections.ArrayCollection;
   import mx.events.FlexEvent;
   import mx.events.IndexChangedEvent;
   
   import spark.components.ButtonBarButton;
   import spark.events.IndexChangeEvent;
   
   //A set of data that will be used to populate the ButtonBar
   [Bindable]
   private var dummyData:ArrayCollection = new ArrayCollection(
    [{label: "1", value:9},
    {label: "2", value:8},
    {label: "3", value:7},
    {label: "4", value:6},
    {label: "5", value:5},
    {label: "6", value:4},
    {label: "7", value:3},
    {label: "8", value:2},
    {label: "9", value:1}]);
   
   //Upon clicking on one of the checkbox,
   protected function clickEvent(event:MouseEvent):void
   {
    var isOddDisable:Boolean = chkOdd.selected;
    var isEvenDisable:Boolean = chkEven.selected;
    
    var tempButton:ButtonBarButton;
    var tempLabelNum:Number;
    
    //Loop through all the buttons of the ButtonBar
    for(var i:int = 0; i < btnBar.dataGroup.numElements; i ++)
    {
     tempButton = ButtonBarButton(btnBar.dataGroup.getElementAt(i));
     tempLabelNum = Number(tempButton.label);
     if(tempLabelNum % 2 == 0)
     {
      //If the label is a odd number
      //check it against the value of the chkOdd checkbox
      tempButton.enabled = !isEvenDisable;
     }else{
      //If the label is a even number
      //check it against the value of the chkEven checkbox
      tempButton.enabled = !isOddDisable;
     }
    }
   }
   
   //Upon clicking on one of the buttons of the ButtonBar, we
   //will update the 'Result:"
   protected function changeEvent(event:IndexChangeEvent):void
   {
    var tempBar:ButtonBar = ButtonBar(event.target);
    var tempObj:* = tempBar.selectedItem;
    
    lblResult.text = "Result: Button " + tempObj.label +
     " with a value of " + tempObj.value + " has been selected."
   }
   
   //Dispatch a change event at the start of the application since
   //one of the buttons are selected by default.
   protected function creationCompleteEvent(event:FlexEvent):void
   {
    btnBar.dispatchEvent(new IndexChangeEvent(IndexChangeEvent.CHANGE));
   }
   
  ]]>
 </fx:Script>
 <s:VGroup width="100%"
     height="100%" 
     verticalAlign="middle" 
     horizontalAlign="center">
  <s:Label text="Click on the following to disable the respective buttons."/>
  <s:HGroup width="100%" >
   <s:Spacer width="100%"/>
   <s:CheckBox id="chkOdd"
      label="Disable Odd Buttons"
      click="clickEvent(event)"/>
   <s:CheckBox id="chkEven"
      label="Disable Even Buttons"
      click="clickEvent(event)"/>
   <s:Spacer width="100%"/>
  </s:HGroup>
  <s:ButtonBar id="btnBar" 
      dataProvider="{dummyData}" 
      requireSelection="true" 
      labelField="label"
      change="changeEvent(event)"/>
  <s:Label id="lblResult" text="Result:"/>
 </s:VGroup>
</s:Application>
* Click here for the demo shown in this post.
^ Click here for the source files for the demo.

No comments:

Post a Comment