Flex Examples
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>
Peter deHaan
Peter deHaan currently works for Adobe on the Flex SDK QA team. While not working on Flex, Flash, and ColdFusion applications, Peter enjoys making up bios and writing in 3rd person. Peter's rarely updated blog can be found at blogs.adobe.com/pdehaan/, actionscriptexamples.com, airexamples.com, and coldfusionexamples.com.
Share
