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.

 
Tagged with:
 
About The Author

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.

10 Responses to Setting skins on the the Flex ButtonBar control

  1. Fritz Dimmel says:

    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

  2. Christina says:

    Fritz Dimmel,

    You need to use downSkin in the CSS. The button was ‘pressed’, so now it’s in the down position.

  3. JiDai says:

    Hi,

    How can I skin separatly the boutton ?
    Each button have a different skin
    Thx

  4. luigi russo says:

    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

  5. luigi russo says:

    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

  6. luigi russo says:

    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

  7. ge0ge0 says:

    Any luck with that luigi?

  8. Kiruban says:

    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….

Leave a Reply

Your email address will not be published.

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre lang="" line="" escaped="">

Anti-Spam Protection by WP-SpamFree