Home > Flex 4 Examples, Flex Gotchas, Uncategorized > ButtonBar radio logic hack

ButtonBar radio logic hack

Update: Set the requireSelection property to true.

When the button bar is used as a navigation tool for a set of tabs, it doesn’t make sense for the selected button to be unselected if the user clicks on it.

It is also fairly typical for a result handler of the IndexChangeEvent.CHANGED to utilize the button bar’s selectedItem property to access a piece of data. This causes runtime errors when the selected item is no longer selected because of a re-click on the selected button.

Lets Look at a simple example:

<?xml version="1.0" encoding="utf-8"?>
<s:WindowedApplication 
	xmlns:fx="http://ns.adobe.com/mxml/2009"
	xmlns:mx="library://ns.adobe.com/flex/mx"
	xmlns:s="library://ns.adobe.com/flex/spark">
	<fx:Script>
		<![CDATA[
			import spark.events.IndexChangeEvent;

			protected function buttonbar1_changeHandler(event:IndexChangeEvent):void
			{
				//Throws an error
				bb.selectedItem.label;
			}
		]]>
	</fx:Script>
	<s:ButtonBar 
		id="bb"
		selectedIndex="0"
		change="buttonbar1_changeHandler(event)">
		<s:dataProvider>
			<s:ArrayCollection>
				<fx:Object label="1"/>
				<fx:Object label="2"/>
				<fx:Object label="3"/>
			</s:ArrayCollection>
		</s:dataProvider>
	</s:ButtonBar>
</s:WindowedApplication>

Lets say you have that type of situation all over your code and you are afraid some handlers might slip through the cracks, so you decide to override the ButtonBar to prevent the change event from occuring when the selected button is clicked. Something like this.

<?xml version="1.0" encoding="utf-8"?>
<s:WindowedApplication 
	xmlns:fx="http://ns.adobe.com/mxml/2009"
	xmlns:mx="library://ns.adobe.com/flex/mx"
	xmlns:s="library://ns.adobe.com/flex/spark">
	<fx:Script>
		<![CDATA[
			import spark.events.IndexChangeEvent;

			protected function buttonbar1_changeHandler(event:IndexChangeEvent):void
			{
				//Throw an error
				bb.selectedItem.label;
			}

			protected function bb_changingHandler(event:IndexChangeEvent):void
			{
				//Prevent the error from being thrown
				event.preventDefault();
			}
		]]>
	</fx:Script>
	<s:ButtonBar 
		id="bb"
		selectedIndex="0"
		change="buttonbar1_changeHandler(event)"
		changing="bb_changingHandler(event)">
		<s:dataProvider>
			<s:ArrayCollection>
				<fx:Object label="1"/>
				<fx:Object label="2"/>
				<fx:Object label="3"/>
			</s:ArrayCollection>
		</s:dataProvider>
	</s:ButtonBar>
</s:WindowedApplication>

All is well, right? Nope! Visually the button is no longer selected. Sadly, the only fix that I could come up with after trying loads of things including listening and hijacking other events and overriding protected and mx_internal events was the following.

<?xml version="1.0" encoding="utf-8"?>
<s:WindowedApplication 
	xmlns:fx="http://ns.adobe.com/mxml/2009"
	xmlns:mx="library://ns.adobe.com/flex/mx"
	xmlns:s="library://ns.adobe.com/flex/spark">
	<fx:Script>
		<![CDATA[
			import spark.events.IndexChangeEvent;

			protected function buttonbar1_changeHandler(event:IndexChangeEvent):void
			{
				//Throw an error
				bb.selectedItem.label;
			}

			protected function bb_changingHandler(event:IndexChangeEvent):void
			{
				//Prevent the error from being thrown
				event.preventDefault();

				//But, the button is still de-selected, even though prevent default is
				//supposed to cancel the commit of the new selection??
				try
				{
					var blah:* = bb.dataGroup.getElementAt(event.oldIndex);
					blah.selected = true;
				}
				catch (e:Error)
				{

				}
			}
		]]>
	</fx:Script>
	<s:ButtonBar 
		id="bb"
		selectedIndex="0"
		change="buttonbar1_changeHandler(event)"
		changing="bb_changingHandler(event)">
		<s:dataProvider>
			<s:ArrayCollection>
				<fx:Object label="1"/>
				<fx:Object label="2"/>
				<fx:Object label="3"/>
			</s:ArrayCollection>
		</s:dataProvider>
	</s:ButtonBar>
</s:WindowedApplication>
Advertisements
  1. No comments yet.
  1. No trackbacks yet.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: