Displaying icons in a Spark ButtonBar control in Flex 4

By Peter deHaan On July 28, 2009 · 14 Comments

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 http://www.adobe.com/products/flex/. To download the latest nightly build of the Flex 4 SDK, see http://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>

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.

Tagged with: hostComponent • skinClass

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.

Visit Authors Website →

Add Widgets (Content Sidebar)

This is your Content Sidebar. Edit this content that appears here in the widgets panel by adding or removing widgets in the Content Sidebar area.

14 Responses to Displaying icons in a Spark ButtonBar control in Flex 4

Sipho Ngwenya says:

July 29, 2009 at 2:18 pm

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

Reply
- Peter deHaan says:
  
  July 29, 2009 at 4:20 pm
  
  Sipho,
  
  I usually use icons from http://www.famfamfam.com/lab/icons/silk/, but these icons may have been from the Halo RichTextEditor control’s assets. Check the files in your local SDK at <Flex SDK>\frameworks\projects\framework\src\mx\controls\assets\
  
  But ultimately, any small-ish icon should do the trick.
  
  Peter
  
  Reply
Peter deHaan says:

July 30, 2009 at 1:13 am

SWF added (build 4.0.0.8811).

Reply
Jason Langdon says:

February 18, 2010 at 10:17 am

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.

Reply
Neil says:

May 9, 2010 at 7:10 pm

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

Reply
- Peter deHaan says:
  
  May 10, 2010 at 7:41 am
  
  @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
  
  Reply
Matt says:

July 23, 2010 at 1:16 pm

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?

Reply
- Flashrunner says:
  
  July 15, 2011 at 4:53 am
  
  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!
  
  ... ...
  
  Reply
  - Flashrunner says:
    
    July 15, 2011 at 4:57 am
  - Flashrunner says:
    
    July 15, 2011 at 4:59 am
    
    P.S: how to use the code-tag? )
Andrew Clark says:

October 26, 2010 at 8:42 am

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

Reply
GQuittner says:

March 25, 2011 at 2:25 pm

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.

Reply
Tinm King says:

April 28, 2011 at 8:32 pm

the simple method is:
s:ButtonBar —–> mx:ButtonBar

Reply
Carrie says:

August 1, 2011 at 12:00 pm

How would I set different icons for each button in the selected state?

Thanks in advance!
Carrie

Reply