Problem
You need to present the user with a set of buttons that allow a single option to be selected at a time.
Solution
Use the s:ButtonBar control and an ArrayCollection to create the series of buttons.
Detailed explanation
To build a series of buttons, create an application with an instance of the
s:ButtonBar control. This control defines a group of buttons that maintain their selected or deselected state. Here's one approach:
<?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">
<fx:Script>
<![CDATA[
import spark.events.IndexChangeEvent;
protected function btnBar_changeHandler(event:IndexChangeEvent):void {
var selectedItem:Object = btnBarData.getItemAt(event.newIndex) as Object;
switch (selectedItem.mode) {
case "labels":
trace('Leif, Zach, Stacey');
break;
case "titles":
trace('Evangelist, Director, Information Architect');
break;
default:
break;
}
}
]]>
</fx:Script>
<fx:Declarations>
<s:ArrayCollection id="btnBarData">
<fx:Object label="Show Labels" mode="labels"/>
<fx:Object label="Show Titles" mode="titles"/>
</s:ArrayCollection>
</fx:Declarations>
<s:ButtonBar id="btnBar" dataProvider="{btnBarData}" change="btnBar_changeHandler(event)"/>
</s:Application>
The application contains only one component that is visible to the user: an instance of
s:ButtonBar with its id property set to
btnBar. Bound to the
dataProvider property of
btnBar is an
s:ArrayCollection with an
id of
btnBarData. Because
btnBarData is a non- visual MXML element, it is declared in
<fx:Declarations>.
By default, the label property values of the items in the
ArrayCollection show up as the labels of the buttons in the
<s:ButtonBar> instance. To set any other property (for example,
mode) to be used as the button's label, use the
labelField property of the s:ButtonBar as follows:
<s:ButtonBar id="btnBar" dataProvider="{btnBarData}"
labelField="mode" change="btnBar_changeHandler(event)"/>
The
change event of the
s:ButtonBar instance is set to call the method
btnBar_change Handler() when the
selectedIndex property of
btnBar is changed. Note that this event will fire regardless of whether the value is changed by the user clicking a different button than the current selected item, or programmatically. When the change event calls the
btnBar_changeHandler() method, it passes an instance of
IndexChangeEvent through as the event. Using the
newIndex property of event, the handler can determine the index of the button the user selected and trace the corresponding string.
Although this is an effective method for creating a set of buttons, the practice of de- claring the
dataProvider in MXML is really only effective when the instance of
s:ButtonBar will be mainly static. In most cases, it is beneficial to bind the
dataProvider property of
s:ButtonBar to an
ArrayCollection declared in ActionScript. This will enable the
dataProvider, and in turn the
s:ButtonBar, to be updated more easily:
<?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">
<fx:Script>
<![CDATA[
import mx.collections.ArrayCollection;
import spark.events.IndexChangeEvent;
[Bindable]
protected var btnBarData:ArrayCollection = new ArrayCollection([{label: 'Show Labels', mode: 'labels'}, {label: 'Show Titles', mode: 'titles'}]);
protected function btnBar_changeHandler(event:IndexChangeEvent):void {
var selectedItem:Object = btnBarData.getItemAt(event.newIndex) as Object;
switch (selectedItem.mode) {
case "labels":
trace('Leif, Zach, Stacey');
break;
case "titles":
trace('Evangelist, Director, Information Architect');
break;
default:
break;
}
}
]]>
</fx:Script>
<s:ButtonBar id="btnBar" dataProvider="{btnBarData}" change="btnBar_changeHandler(event)"/>
</s:Application>
This recipe was originally contributed as part of O'Reilly's Flex 4 Cookbook.
+
This work is licensed under a Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License. Permissions beyond the scope of this license, pertaining to the examples of code included within this work are available at Adobe.
