Setting skins on the the Flex ButtonBar control

by Peter deHaan on January 10, 2008

in ButtonBar

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.

{ 8 comments… read them below or add one }

1 Fritz Dimmel January 13, 2008 at 3:09 am

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

Reply

2 Christina July 4, 2008 at 5:42 pm

Fritz Dimmel,

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

Reply

3 JiDai June 16, 2009 at 8:11 am

Hi,

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

Reply

4 luigi russo December 21, 2009 at 4:01 am

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

Reply

5 Peter deHaan December 21, 2009 at 7:30 am

@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

Reply

6 luigi russo December 21, 2009 at 2:21 pm

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

Reply

7 Peter deHaan December 21, 2009 at 2:40 pm

I’d just use a TabBar or ButtonBar and create a custom skin.

Peter

Reply

8 luigi russo December 22, 2009 at 2:35 pm

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

Reply

Leave a Comment

Sorry, this blog is terrible at eating HTML comments.
If you're pasting any HTML/XML/MXML code, you need to convert your < characters to &lt; and your > characters to &gt; .

You can 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

Previous post:

Next post: