Flex Examples
The following example shows how you can skin the ButtonBar control in Flex by setting the buttonStyleName style and setting one or more of the following skin styles: skin, upSkin, overSkin, downSkin, disabledSkin.
Full code after the jump.
<?xml version="1.0" encoding="utf-8"?> <!-- http://blog.flexexamples.com/2008/01/10/setting-skins-on-the-the-flex-buttonbar-control/ --> <mx:Application name="ButtonBar_buttonStyleName_skin_test " xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" verticalAlign="middle" backgroundColor="white"> <mx:Style> ButtonBar { buttonStyleName: myCustomButtonStyleName; color: #999999; } .myCustomButtonStyleName { skin: Embed(source="assets/ButtonBarSkins.swf", symbol="ButtonBarButton_skin"); } </mx:Style> <mx:Script> <![CDATA[ import mx.events.SliderEvent; private function slider_change(evt:SliderEvent):void { buttonBar.setStyle("buttonHeight", evt.value); } ]]> </mx:Script> <mx:Array id="arr"> <mx:Object label="Button" /> <mx:Object label="ButtonBar" /> <mx:Object label="ColorPicker" /> <mx:Object label="ComboBox" /> </mx:Array> <mx:ApplicationControlBar dock="true"> <mx:Form styleName="plain"> <mx:FormItem label="buttonHeight:"> <mx:HSlider id="slider" minimum="24" maximum="64" snapInterval="1" tickInterval="4" liveDragging="true" change="slider_change(event);" /> </mx:FormItem> </mx:Form> </mx:ApplicationControlBar> <mx:ButtonBar id="buttonBar" dataProvider="{arr}" /> </mx:Application>
View source is enabled in the following example.
For simplicity sake, I only set the generic “skin” style which applies to all states (up, over, down, and disabled). You will also notice that we embedded a skin from a SWF file and the skins various scale grid settings (scaleGridTop, scaleGridBottom, scaleGridLeft, and scaleGridRight) are set in the FLA/SWF file and not in the MXML file itself. This allows you to resize the ButtonBar control without distorting the 2 pixel border on the bottom of the skin.
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
Hi!
Thanks for your articles, they are great!
I have a question:
I need a ToggleButtonBar (or a ButtonBar) where I can define, that when a button is pressed that it will change its background color, so that it’s visible, which button was pressed.
But I only can change the text color or the border.
I tried it with: fillColors, backgroundColor, backgroundGradientColors, etc.
Also with two different skins on buttonStyleName and selectedButtonTextStyleName (as you showed it in this article). Didn’t work.
Do you know how I could do that?
Thanks a lot,
Fritz
Fritz Dimmel,
You need to use downSkin in the CSS. The button was ‘pressed’, so now it’s in the down position.
Hi,
How can I skin separatly the boutton ?
Each button have a different skin
Thx
Hello Peter,
how are u?
i want to ask you if i can reproduce bar button that you can see in this address
http://www.biglietteriavecchione.it/angela/matrimonizuccherodicanna.html
I am converting all the site in Flex, http://www.biglietteriavecchione.it/Flex is the actual result.
I am sure that you can help me .
This is the last thing that i must do.
Ciao grazieeeee
@luigi russo,
FlexLib has a HAccordion which is probably what you want: http://code.google.com/p/flexlib/wiki/ComponentList
Probably just need to add a custom skin to the vertical buttons and tweak the animation speeds and it’d look the same.
Peter
Peter i already make the HAccordation and you already helped me.
Now i want make the barbutton that you can see in this link http://www.biglietteriavecchione.it/angela/matrimonizuccherodicanna.html
the buttons are Catering , PArtecipazioni, ListeNozze, Bomboniere,IL Partner…..
i must make it with image map?
or there is something better
Ciaoo grazieee
I’d just use a TabBar or ButtonBar and create a custom skin.
Peter
with this way i can customize only 3 buttons in the buttonbar?
first middle and last? i need a buttonbar of 5 buttons. how i can make?
Grazie Peter ciaooo
Any luck with that luigi?
Hi,
I am battling with an extremely “simple” problem:
How do I change the color of the text on the ButtonBar? I can initially set it to any color but the rollover and down colors of the text revert to black!
Please help….