Home > Adobe, Flex > Hacking a Buttonbar in Flex 4 – Keep a button from being activated when clicked

Hacking a Buttonbar in Flex 4 – Keep a button from being activated when clicked

June 17th, 2010 , by Heeties - comments (0)

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>
Categories: Adobe, Flex Tags: , ,
  1. medical assistant
    June 28th, 2010 at 09:37 | #1

    Terrific work! This is the type of information that should be shared around the web. Shame on the search engines for not positioning this post higher!

  2. July 4th, 2010 at 08:08 | #2

    i just wanna thank you for sharing your this information and your site or blog this is simple but nice article I’ve ever seen i like it i learn something new today

  3. July 12th, 2010 at 18:46 | #3

    Good post and this fill someone in on helped me alot in my college assignement. Say thank you you on your information.

  4. July 26th, 2010 at 01:17 | #4

    it was very interesting to read.
    I want to quote your post in my blog. It can?
    And you et an account on Twitter?

  5. July 26th, 2010 at 13:15 | #5

    Sure you can,

    My twitter is here on my blog : @Heeties

  1. No trackbacks yet.