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