Displaying icons in a Spark ButtonBar control in Flex 4

The following example shows how you can display icons in a Spark ButtonBar control in Flex 4 by creating a custom skin class and setting the skinClass style.

The following example(s) require Flash Player 10 and the Adobe Flex 4 SDK. To download the Adobe Flash Builder 4 trial, see www.adobe.com/products/flex/. To download the latest nightly build of the Flex 4 SDK, see opensource.adobe.com/wiki/display/flexsdk/Download+Flex+4.

For more information on getting started with Flex 4 and Flash Builder 4, see the official Adobe Flex Team blog.

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2009/07/28/displaying-icons-in-a-spark-buttonbar-control-in-flex-4/ -->
<s:Application name="Spark_ButtonBar_skinClass_test"
        xmlns:fx="http://ns.adobe.com/mxml/2009"
        xmlns:s="library://ns.adobe.com/flex/spark"
        xmlns:mx="library://ns.adobe.com/flex/mx">
 
    <mx:ApplicationControlBar width="100%" cornerRadius="0">
        <mx:Form styleName="plain">
            <mx:FormItem label="textAlign:">
                <s:ButtonBar id="btnBar"
                             requireSelection="true"
                             skinClass="skins.CustomButtonBarSkin"
                             width="80">
                    <s:dataProvider>
                        <s:ArrayList>
                            <fx:Object label="left"
                                       icon="@Embed('assets/icon_align_left.png')" />
                            <fx:Object label="center"
                                       icon="@Embed('assets/icon_align_center.png')" />
                            <fx:Object label="right"
                                       icon="@Embed('assets/icon_align_right.png')" />
                            <fx:Object label="justify"
                                       icon="@Embed('assets/icon_align_justify.png')" />
                        </s:ArrayList>
                    </s:dataProvider>
                </s:ButtonBar>
            </mx:FormItem>
        </mx:Form>
    </mx:ApplicationControlBar>
 
    <s:TextArea id="txtArea"
            textAlign="{btnBar.selectedItem.label}"
            horizontalCenter="0" verticalCenter="0">
        <s:text><fx:String source="lorem.txt" /></s:text>
    </s:TextArea>
 
</s:Application>

The custom Spark ButtonBar skin, skins/CustomButtonBarSkin.mxml, is as follows:

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2009/07/28/displaying-icons-in-a-spark-buttonbar-control-in-flex-4/ -->
<s:Skin name="CustomButtonBarSkin"
        xmlns:fx="http://ns.adobe.com/mxml/2009"
        xmlns:s="library://ns.adobe.com/flex/spark"
        alpha.disabled="0.5">
    <!-- states -->
    <s:states>
        <s:State name="normal" />
        <s:State name="disabled" />
    </s:states>
 
    <fx:Metadata>
    <![CDATA[
        [HostComponent("spark.components.ButtonBar")]
    ]]>
    </fx:Metadata>
 
    <fx:Declarations>
        <fx:Component id="middleButton">
            <s:ButtonBarButton skinClass="skins.CustomButtonBarButtonSkin" />
        </fx:Component>
    </fx:Declarations>
 
    <s:DataGroup id="dataGroup" width="100%" height="100%">
        <s:layout>
            <s:ButtonBarHorizontalLayout gap="-1"/>
        </s:layout>
    </s:DataGroup>
 
</s:Skin>

The custom Spark ButtonBarButton skin, skins/CustomButtonBarButtonSkin.mxml, is as follows:

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2009/07/28/displaying-icons-in-a-spark-buttonbar-control-in-flex-4/ -->
<s:SparkSkin name="CustomButtonBarButtonSkin"
        xmlns:fx="http://ns.adobe.com/mxml/2009"
        xmlns:s="library://ns.adobe.com/flex/spark"
        minWidth="21" minHeight="21"
        alpha.disabledStates="0.5">
    <!-- states -->
    <s:states>
        <s:State name="up" />
        <s:State name="over" stateGroups="overStates" />
        <s:State name="down" stateGroups="downStates" />
        <s:State name="disabled" stateGroups="disabledStates" />
        <s:State name="upAndSelected" stateGroups="selectedStates, selectedUpStates" />
        <s:State name="overAndSelected" stateGroups="overStates, selectedStates" />
        <s:State name="downAndSelected" stateGroups="downStates, selectedStates" />
        <s:State name="disabledAndSelected" stateGroups="selectedUpStates, disabledStates, selectedStates" />
    </s:states>
 
    <!-- host component -->
    <fx:Metadata>
        <![CDATA[ 
            [HostComponent("spark.components.ButtonBarButton")]
        ]]>
    </fx:Metadata>
 
    <fx:Script>
        <![CDATA[
            import spark.components.ButtonBar;
            import mx.events.FlexEvent;
            import spark.components.ButtonBarButton;
 
            protected function gr_creationComplete(evt:FlexEvent):void {
                var dataObj:Object = hostComponent.data;
                img.source = dataObj.icon;
                hostComponent.toolTip = dataObj.label;
            }
 
            /* Define the skin elements that should not be colorized. 
            For toggle button, the graphics are colorized but the label is not. */
            static private const exclusions:Array = [];
 
            override public function get colorizeExclusions():Array {return exclusions;}
        ]]>
    </fx:Script>
 
    <!-- layer 1: shadow -->
    <s:Rect left="0" right="0" bottom="-1" height="1">
        <s:fill>
            <s:SolidColor color="0x000000"
                    color.downStates="0xFFFFFF"
                    alpha="0.07"
                    alpha.downStates="0.5" />
        </s:fill>
    </s:Rect>
 
    <!-- layer 2: fill -->
    <s:Rect left="1" right="1" top="1" bottom="1">
        <s:fill>
            <s:LinearGradient rotation="90">
                <s:GradientEntry color="0xFFFFFF"
                        color.selectedUpStates="0xBBBDBD"
                        color.overStates="0xBBBDBD"
                        color.downStates="0xAAAAAA"
                        alpha="0.85" 
                        alpha.overAndSelected="1" />
                <s:GradientEntry color="0xD8D8D8"
                        color.selectedUpStates="0x9FA0A1"
                        color.over="0x9FA0A1"
                        color.overAndSelected="0x8E8F90"
                        color.downStates="0x929496"
                        alpha="0.85"
                        alpha.overAndSelected="1" />
            </s:LinearGradient>
        </s:fill>
    </s:Rect>
 
    <!-- layer 3: fill lowlight -->
    <s:Rect left="1" right="1" bottom="1" height="9">
        <s:fill>
            <s:LinearGradient rotation="90">
                <s:GradientEntry color="0x000000" alpha="0.0099" />
                <s:GradientEntry color="0x000000" alpha="0.0627" />
            </s:LinearGradient>
        </s:fill>
    </s:Rect>
 
    <!-- layer 4: fill highlight -->
    <s:Rect left="1" right="1" top="1" height="9">
        <s:fill>
            <s:SolidColor color="0xFFFFFF"
                    alpha="0.33"
                    alpha.selectedUpStates="0.22"
                    alpha.overStates="0.22"
                    alpha.downStates="0.12" />
        </s:fill>
    </s:Rect>
 
    <!-- layer 5: highlight stroke (all states except down) -->
    <s:Rect left="1" right="1" top="1" bottom="1"
            excludeFrom="downStates">
        <s:stroke>
            <s:LinearGradientStroke rotation="90" weight="1">
                <s:GradientEntry color="0xFFFFFF"
                        alpha.overStates="0.22"
                        alpha.selectedUpStates="0.33" />
                <s:GradientEntry color="0xD8D8D8"
                        alpha.overStates="0.22"
                        alpha.selectedUpStates="0.33" />
            </s:LinearGradientStroke>
        </s:stroke>
    </s:Rect>
 
    <!-- layer 6: highlight stroke (down state only) -->
    <s:Rect left="1" top="1" bottom="1" width="1"
            includeIn="downStates, selectedUpStates, overAndSelected">
        <s:fill>
            <s:SolidColor color="0x000000" alpha="0.07" />
        </s:fill>
    </s:Rect>
    <s:Rect right="1" top="1" bottom="1" width="1"
            includeIn="downStates, selectedUpStates, overAndSelected">
        <s:fill>
            <s:SolidColor color="0x000000" alpha="0.07" />
        </s:fill>
    </s:Rect>
    <s:Rect left="1" top="1" right="1" height="1"
            includeIn="downStates, selectedUpStates, overAndSelected">
        <s:fill>
            <s:SolidColor color="0x000000" alpha="0.25" />
        </s:fill>
    </s:Rect>
    <s:Rect left="1" top="2" right="1" height="1"
            includeIn="downStates, selectedUpStates, overAndSelected">
        <s:fill>
            <s:SolidColor color="0x000000" alpha="0.09" />
        </s:fill>
    </s:Rect>
 
    <!-- layer 7: border - put on top of the fill so it doesn't disappear when scale is less than 1 -->
    <s:Rect left="0" right="0" top="0" bottom="0"
            width="69" height="20">
        <s:stroke>
            <s:LinearGradientStroke rotation="90" weight="1">
                <s:GradientEntry color="0x000000"
                        alpha="0.5625"
                        alpha.down="0.6375"
                        alpha.selectedStates="0.6375" />
                <s:GradientEntry color="0x000000" 
                        alpha="0.75"
                        alpha.down="0.85"
                        alpha.selectedStates="0.85" />
            </s:LinearGradientStroke>
        </s:stroke>
    </s:Rect>
 
    <!-- layer 8: icon -->
    <s:Graphic id="gr"
            creationComplete="gr_creationComplete(event);"
            horizontalCenter="0" verticalCenter="0">
        <s:BitmapImage id="img" />
    </s:Graphic>
 
</s:SparkSkin>

[GoogleAdsWide]

View source is enabled in the following example.

This entry is based on a beta version of the Flex 4 SDK and therefore is very likely to change as development of the Flex SDK continues. The API can (and will) change causing examples to possibly not compile in newer versions of the Flex 4 SDK.

14 thoughts on “Displaying icons in a Spark ButtonBar control in Flex 4

  1. Peter,

    I have been going through a few of your examples, some of them have icons/images… are you able to provide those icons, either in a zip or URL where they can be downloaded. This will make it easier to quickly check out your examples, thanks.

    Sipho

  2. Is it just me, or is icon=”@Embed(‘assets/images/icons/information.png’)” a tad bit easier than the 100 or so lines of code you’ve had to write to produce the results above… hopefully I’m missing something, but it kinda looks like things that were simple using the Halo components, are now extraordinarily convoluted in the Spark one’s.

  3. Totally agree… Its confusing when posting icon inserts then followed by lines of skin code. I was able to just add the icon property.

    1. @Neil,

      True, it isn’t as easy/convenient as in Flex 3, but you really only need to create the custom button skin once and then you can reuse it in other places/projects. Or you could continue to use the mx:ButtonBar control if you need icon support.

      Peter

  4. First of this is a great site! You’ve saved me a heck of alot of time!! Thank you!

    Now for my question: I’m trying to do something similar to this but I have a viewstack that i use the button bar to navigate. Currently my ButtonBar’s dataprovider is set to my viewstack. I’m already using customs skins for both the buttonbar and the buttonbarbutton. How can I pass the icon all the way to the buttonBarButton?

    1. First off all you can extend NavigatorContent class and add inspectable “icon” property to hold you image source. But, NavigatorContent already has this property for you ;) It also has “toolTip” property!

      ...

      ...

  5. Peter
    Just getting started with skins. I copied your 3 files over putting the 2 skin mxmls in a skins folder but when I run the app I get the error of Undefined state ‘up’.
    Other than a changed project/main mxml name and a different icon it is the same as yours I triple checked the file names
    Any idea where I might be going wrong
    BTW Thanks for doing all these examples

  6. Peter, I’ve got a lil bit of a problem since I’ve been trying to embed icons dynamically.
    How could I embed an icon depending on a string on my DB?

    Thanks in advance.

Comments are closed.