Hacking a Buttonbar in Flex 4 – Keep a button from being activated when clicked
So we were presented with a small problem for a project (in Flex 4) i was working on and because i couldn’t find information about this i decided to make a little blog post myself altough it’s a very small thing.
The problem:
As main navigation for the project we were using a ButtonBar with four buttons. One of those buttons linked to an external file and actually had nothing to do with navigating thru the application. Logically if you click a menu item it gets ‘selected’ and is shown as the active item in your menu. We didn’t want this because the view inside the project wouldn’t change at all as you were redirected to an external file.
So we needed to achieve two things when you click that “false button”:
– Keep the current selected button active
– Keep the “false button” from being activated
So after searching for a while we found this:
You have to listen to the IndexChangeEvent.CHANGE like this:
myButtonBar_btb.addEventListener(IndexChangeEvent.CHANGE, onIndexChange);
and inside the onIndexChange handler:
private function onIndexChange(e:IndexChangeEvent):void { // The button we want to check here is the third one in the menu so the e.newIndex = 2 for this button. if( e.newIndex == 2 ){ // noActivation_btn is the button that links to en external file/webpage. var noActivation_btn:ButtonBarButton = myButtonBar_btb.dataGroup.getElementAt(myButtonBar_btb.selectedIndex) as ButtonBarButton; noActivation_btn.selected = false; // activateThis_btn is the current active button in the menu var activateThis_btn:ButtonBarButton = myButtonBar_btb.dataGroup.getElementAt(e.oldIndex) as ButtonBarButton; activateThis_btn.selected = true; } }
And thats it, there is nothing more to it.
Below is the full example code:
<?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" minWidth="955" minHeight="600" creationComplete="init(event)"> <fx:Declarations> <!-- Place non-visual elements (e.g., services, value objects) here --> </fx:Declarations> <fx:Script> <![CDATA[ import spark.components.ButtonBarButton; import spark.events.IndexChangeEvent; private function init(e:Event):void { myButtonBar_btb.addEventListener(IndexChangeEvent.CHANGE, onIndexChange); } private function onIndexChange(e:IndexChangeEvent):void { if( e.newIndex == 2 ){ var noActivation_btn:ButtonBarButton = myButtonBar_btb.dataGroup.getElementAt(myButtonBar_btb.selectedIndex) as ButtonBarButton; noActivation_btn.selected = false; var activateThis_btn:ButtonBarButton = myButtonBar_btb.dataGroup.getElementAt(e.oldIndex) as ButtonBarButton; activateThis_btn.selected = true; } } ]]> </fx:Script> <s:ButtonBar id="myButtonBar_btb" horizontalCenter="0" top="20"> <s:dataProvider> <s:ArrayCollection source="['Normal button', 'Normal button', 'You cannot activate me']" /> </s:dataProvider> </s:ButtonBar> </s:Application>