The following example shows how you can set the button height on a Flex ButtonBar control by setting the buttonHeight style.
Full code after the jump.
<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/09/30/setting-the-button-height-on-a-buttonbar-control-in-flex/ -->
<mx:Application name="ButtonBar_buttonHeight_test"
xmlns:mx="http://www.adobe.com/2006/mxml"
layout="vertical"
verticalAlign="middle"
backgroundColor="white">
<mx:Style>
.buttonBarButtonStyles {
textAlign: left;
}
</mx:Style>
<mx:Array id="arr">
<mx:Object label="Red"
icon="@Embed('assets/bullet_red.png')" />
<mx:Object label="Orange"
icon="@Embed('assets/bullet_orange.png')" />
<mx:Object label="Yellow"
icon="@Embed('assets/bullet_yellow.png')" />
<mx:Object label="Green"
icon="@Embed('assets/bullet_green.png')" />
<mx:Object label="Blue"
icon="@Embed('assets/bullet_blue.png')" />
</mx:Array>
<mx:ApplicationControlBar dock="true">
<mx:Form styleName="plain">
<mx:FormItem label="buttonHeight:">
<mx:HSlider id="slider"
minimum="16"
maximum="48"
value="24"
snapInterval="1"
tickInterval="2"
liveDragging="true" />
</mx:FormItem>
<mx:FormItem label="direction:">
<mx:ComboBox id="comboBox"
dataProvider="[horizontal,vertical]" />
</mx:FormItem>
</mx:Form>
</mx:ApplicationControlBar>
<mx:ButtonBar id="buttonBar"
dataProvider="{arr}"
buttonHeight="{slider.value}"
direction="{comboBox.selectedItem}"
buttonStyleName="buttonBarButtonStyles" />
</mx:Application>
View source is enabled in the following example.
You can also set the buttonHeight style in an external .CSS file or <mx:Style /> block, as seen in the following example:
<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/09/30/setting-the-button-height-on-a-buttonbar-control-in-flex/ -->
<mx:Application name="ButtonBar_buttonHeight_test"
xmlns:mx="http://www.adobe.com/2006/mxml"
layout="vertical"
verticalAlign="middle"
backgroundColor="white">
<mx:Style>
ButtonBar {
buttonHeight: 16;
buttonStyleName: buttonBarButtonStyles;
}
.buttonBarButtonStyles {
textAlign: left;
}
</mx:Style>
<mx:Array id="arr">
<mx:Object label="Red"
icon="@Embed('assets/bullet_red.png')" />
<mx:Object label="Orange"
icon="@Embed('assets/bullet_orange.png')" />
<mx:Object label="Yellow"
icon="@Embed('assets/bullet_yellow.png')" />
<mx:Object label="Green"
icon="@Embed('assets/bullet_green.png')" />
<mx:Object label="Blue"
icon="@Embed('assets/bullet_blue.png')" />
</mx:Array>
<mx:ApplicationControlBar dock="true">
<mx:Form styleName="plain">
<mx:FormItem label="direction:">
<mx:ComboBox id="comboBox"
dataProvider="[horizontal,vertical]" />
</mx:FormItem>
</mx:Form>
</mx:ApplicationControlBar>
<mx:ButtonBar id="buttonBar"
dataProvider="{arr}"
direction="{comboBox.selectedItem}" />
</mx:Application>
Or, you can set the buttonHeight style using ActionScript, as seen in the following example:
<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/09/30/setting-the-button-height-on-a-buttonbar-control-in-flex/ -->
<mx:Application name="ButtonBar_buttonHeight_test"
xmlns:mx="http://www.adobe.com/2006/mxml"
layout="vertical"
verticalAlign="middle"
backgroundColor="white">
<mx:Style>
ButtonBar {
buttonHeight: 24;
buttonStyleName: buttonBarButtonStyles;
}
.buttonBarButtonStyles {
textAlign: left;
}
</mx:Style>
<mx:Script>
<![CDATA[
import mx.events.ListEvent;
import mx.events.SliderEvent;
private function slider_change(evt:SliderEvent):void {
buttonBar.setStyle("buttonHeight", evt.value);
}
private function comboBox_change(evt:ListEvent):void {
buttonBar.direction = comboBox.selectedItem.toString();
}
]]>
</mx:Script>
<mx:Array id="arr">
<mx:Object label="Red"
icon="@Embed('assets/bullet_red.png')" />
<mx:Object label="Orange"
icon="@Embed('assets/bullet_orange.png')" />
<mx:Object label="Yellow"
icon="@Embed('assets/bullet_yellow.png')" />
<mx:Object label="Green"
icon="@Embed('assets/bullet_green.png')" />
<mx:Object label="Blue"
icon="@Embed('assets/bullet_blue.png')" />
</mx:Array>
<mx:ApplicationControlBar dock="true">
<mx:Form styleName="plain">
<mx:FormItem label="buttonHeight:">
<mx:HSlider id="slider"
minimum="16"
maximum="48"
value="24"
snapInterval="1"
tickInterval="2"
liveDragging="true"
change="slider_change(event);" />
</mx:FormItem>
<mx:FormItem label="direction:">
<mx:ComboBox id="comboBox"
dataProvider="[horizontal,vertical]"
change="comboBox_change(event);" />
</mx:FormItem>
</mx:Form>
</mx:ApplicationControlBar>
<mx:ButtonBar id="buttonBar"
dataProvider="{arr}" />
</mx:Application>
Due to popular demand, here is the “same” example in a more ActionScript friendly format:
<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/09/30/setting-the-button-height-on-a-buttonbar-control-in-flex/ -->
<mx:Application name="ButtonBar_buttonHeight_test"
xmlns:mx="http://www.adobe.com/2006/mxml"
layout="vertical"
verticalAlign="middle"
backgroundColor="white"
initialize="init();">
<mx:Script>
<![CDATA[
import mx.containers.ApplicationControlBar;
import mx.containers.BoxDirection;
import mx.containers.Form;
import mx.containers.FormItem;
import mx.controls.ButtonBar;
import mx.controls.ComboBox;
import mx.controls.HSlider;
import mx.events.ListEvent;
import mx.events.SliderEvent;
[Embed("assets/bullet_red.png")]
private const BulletRedIcon:Class;
[Embed("assets/bullet_orange.png")]
private const BulletOrangeIcon:Class;
[Embed("assets/bullet_yellow.png")]
private const BulletYellowIcon:Class;
[Embed("assets/bullet_green.png")]
private const BulletGreenIcon:Class;
[Embed("assets/bullet_blue.png")]
private const BulletBlueIcon:Class;
private var buttonBarButtonStyles:CSSStyleDeclaration;
private var arr:Array;
private var slider:HSlider;
private var comboBox:ComboBox;
private var buttonBar:ButtonBar;
private function init():void {
arr = [];
arr.push({label:"Red", icon:BulletRedIcon});
arr.push({label:"Orange", icon:BulletOrangeIcon});
arr.push({label:"Yellow", icon:BulletYellowIcon});
arr.push({label:"Green", icon:BulletGreenIcon});
arr.push({label:"Blue", icon:BulletBlueIcon});
buttonBarButtonStyles = new CSSStyleDeclaration(".buttonBarButtonStyles");
buttonBarButtonStyles.setStyle("textAlign", "left");
slider = new HSlider();
slider.minimum = 16;
slider.maximum = 48;
slider.value = 24;
slider.snapInterval = 1;
slider.tickInterval = 2;
slider.liveDragging = true;
slider.addEventListener(SliderEvent.CHANGE,
slider_change);
comboBox = new ComboBox();
comboBox.dataProvider = [BoxDirection.HORIZONTAL, BoxDirection.VERTICAL];
comboBox.addEventListener(ListEvent.CHANGE,
comboBox_change);
var formItem1:FormItem = new FormItem();
formItem1.label = "buttonHeight:";
formItem1.addChild(slider);
var formItem2:FormItem = new FormItem();
formItem2.label = "direction:";
formItem2.addChild(comboBox);
var form:Form = new Form();
form.styleName = "plain";
form.addChild(formItem1);
form.addChild(formItem2);
var appControlBar:ApplicationControlBar;
appControlBar = new ApplicationControlBar();
appControlBar.dock = true;
appControlBar.addChild(form);
addChildAt(appControlBar, 0);
buttonBar = new ButtonBar();
buttonBar.dataProvider = arr;
buttonBar.setStyle("buttonHeight", 24);
buttonBar.setStyle("buttonStyleName", "buttonBarButtonStyles");
addChild(buttonBar);
}
private function slider_change(evt:SliderEvent):void {
buttonBar.setStyle("buttonHeight", evt.value);
}
private function comboBox_change(evt:ListEvent):void {
buttonBar.direction = comboBox.selectedItem.toString();
}
]]>
</mx:Script>
</mx:Application>
0 Responses to “Setting the button height on a ButtonBar control in Flex”
Leave a Reply