The following example shows how you can create fixed width buttons in a Flex ButtonBar component by setting the buttonWidth style. To revert back to variable width buttons, simply set the buttonWidth style to NaN (not a number).
Full code after the jump.
<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2007/09/05/creating-fixed-width-buttons-in-a-flex-buttonbar-component/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
layout="vertical"
verticalAlign="middle"
backgroundColor="white">
<mx:Script>
<![CDATA[
private function slider_change(evt:Event):void {
if (checkBox.selected) {
buttonBar.setStyle("buttonWidth", slider.value);
} else {
buttonBar.setStyle("buttonWidth", NaN);
}
}
]]>
</mx:Script>
<mx:ApplicationControlBar dock="true">
<mx:CheckBox id="checkBox"
label="fixed width:"
labelPlacement="left"
change="slider_change(event)" />
<mx:Spacer width="50" />
<mx:Label text="buttonWidth:" />
<mx:HSlider id="slider"
enabled="{checkBox.selected}"
minimum="50"
maximum="150"
value="75"
liveDragging="true"
snapInterval="5"
dataTipPrecision="0"
tickInterval="10"
change="slider_change(event)" />
</mx:ApplicationControlBar>
<mx:ButtonBar id="buttonBar">
<mx:dataProvider>
<mx:Array>
<mx:Object label="One" />
<mx:Object label="Two" />
<mx:Object label="Thirteen" />
</mx:Array>
</mx:dataProvider>
</mx:ButtonBar>
</mx:Application>
View source is enabled in the following example.





0 Responses to “Creating fixed width buttons in a Flex ButtonBar component”
Leave a Reply