Creating a custom link button skin on the MX LinkBar control in Flex 4

The following example shows how you can create a custom LinkButton skin on the MX LinkBar control in Flex 4 by setting the linkButtonStyleName and skin styles.

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/08/13/creating-a-custom-link-button-skin-on-the-halo-linkbar-control-in-flex-4/ -->
<s:Application name="MX_LinkBar_linkButtonStyleName_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">
 
    <fx:Style>
        @namespace s "library://ns.adobe.com/flex/spark";
        @namespace mx "library://ns.adobe.com/flex/mx";
 
        .linkButtonStyles {
            skin: ClassReference("skins.CustomLinkButtonSkin");
        }
    </fx:Style>
 
    <mx:LinkBar id="lnkBar"
            linkButtonStyleName="linkButtonStyles"
            separatorWidth="0"
            horizontalCenter="0" verticalCenter="0">
        <mx:dataProvider>
            <fx:Array>
                <fx:Object label="Red" icon="@Embed('assets/bullet_red.png')" />
                <fx:Object label="Orange" icon="@Embed('assets/bullet_orange.png')" />
                <fx:Object label="Yellow" icon="@Embed('assets/bullet_yellow.png')" />
                <fx:Object label="Green" icon="@Embed('assets/bullet_green.png')" />
                <fx:Object label="Blue" icon="@Embed('assets/bullet_blue.png')" />
            </fx:Array>
        </mx:dataProvider>
    </mx:LinkBar>
 
</s:Application>

And the custom LinkButton skin, skins/CustomLinkButtonSkin.mxml, is as follows:

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2009/08/13/creating-a-custom-link-button-skin-on-the-halo-linkbar-control-in-flex-4/ -->
<s:Skin name="CustomLinkButtonSkin"
        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" stateGroups="upStates"/>
        <s:State name="over" stateGroups="overStates"/>
        <s:State name="down" stateGroups="downStates" />
        <s:State name="disabled" stateGroups="disabledStates"/>
        <s:State name="selectedUp" stateGroups="upStates"/>
        <s:State name="selectedOver" stateGroups="overStates"/>
        <s:State name="selectedDown" stateGroups="downStates"/>
        <s:State name="selectedDisabled" stateGroups="disabledStates"/>
    </s:states>
 
    <fx:Declarations>
        <fx:uint id="cornerRad">10</fx:uint>
    </fx:Declarations>
 
    <!-- layer 1: fill -->
    <s:Rect left="0" right="0" top="0" bottom="0"
            radiusX="{cornerRad}" radiusY="{cornerRad}"
            excludeFrom="upStates,disabledStates">
        <s:fill>
            <s:SolidColor id="fill"
                    color.overStates="haloGreen" color.downStates="haloBlue"
                    alpha.overStates="0.5" alpha.downStates="1.0" />
        </s:fill>
    </s:Rect>
 
</s:Skin>

[HaloSparkSkins]

View source is enabled in the following example.

You can also set the linkButtonStyleName style in an external .CSS file or <Style/> block, as seen in the following example:

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2009/08/13/creating-a-custom-link-button-skin-on-the-halo-linkbar-control-in-flex-4/ -->
<s:Application name="MX_LinkBar_linkButtonStyleName_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">
 
    <fx:Style>
        @namespace s "library://ns.adobe.com/flex/spark";
        @namespace mx "library://ns.adobe.com/flex/mx";
 
        mx|LinkBar {
            linkButtonStyleName: linkButtonStyles;
            separatorWidth: 0;
        }
 
        .linkButtonStyles {
            skin: ClassReference("skins.CustomLinkButtonSkin");
        }
    </fx:Style>
 
    <mx:LinkBar id="lnkBar"
            horizontalCenter="0" verticalCenter="0">
        <mx:dataProvider>
            <fx:Array>
                <fx:Object label="Red" icon="@Embed('assets/bullet_red.png')" />
                <fx:Object label="Orange" icon="@Embed('assets/bullet_orange.png')" />
                <fx:Object label="Yellow" icon="@Embed('assets/bullet_yellow.png')" />
                <fx:Object label="Green" icon="@Embed('assets/bullet_green.png')" />
                <fx:Object label="Blue" icon="@Embed('assets/bullet_blue.png')" />
            </fx:Array>
        </mx:dataProvider>
    </mx:LinkBar>
 
</s:Application>

Or, you can set the linkButtonStyleName style using ActionScript, as seen in the following example:

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2009/08/13/creating-a-custom-link-button-skin-on-the-halo-linkbar-control-in-flex-4/ -->
<s:Application name="MX_LinkBar_linkButtonStyleName_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">
 
    <fx:Style>
        @namespace s "library://ns.adobe.com/flex/spark";
        @namespace mx "library://ns.adobe.com/flex/mx";
 
        .linkButtonStyles {
            skin: ClassReference("skins.CustomLinkButtonSkin");
        }
    </fx:Style>
 
    <fx:Script>
        <![CDATA[
            protected function btn_click(evt:MouseEvent):void {
                lnkBar.setStyle("linkButtonStyleName", "linkButtonStyles");
            }
        ]]>
    </fx:Script>
 
    <s:Button id="btn"
            label="Set link button style name"
            left="10" top="10"
            click="btn_click(event);" />
 
    <mx:LinkBar id="lnkBar"
            separatorWidth="0"
            horizontalCenter="0" verticalCenter="0">
        <mx:dataProvider>
            <fx:Array>
                <fx:Object label="Red" icon="@Embed('assets/bullet_red.png')" />
                <fx:Object label="Orange" icon="@Embed('assets/bullet_orange.png')" />
                <fx:Object label="Yellow" icon="@Embed('assets/bullet_yellow.png')" />
                <fx:Object label="Green" icon="@Embed('assets/bullet_green.png')" />
                <fx:Object label="Blue" icon="@Embed('assets/bullet_blue.png')" />
            </fx:Array>
        </mx:dataProvider>
    </mx:LinkBar>
 
</s:Application>

Due to popular demand, here is the “same” example in a more ActionScript friendly format:

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2009/08/13/creating-a-custom-link-button-skin-on-the-halo-linkbar-control-in-flex-4/ -->
<s:Application name="MX_LinkBar_linkButtonStyleName_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"
        initialize="init();">
 
    <fx:Script>
        <![CDATA[
            import mx.controls.LinkBar;
            import skins.CustomLinkButtonSkin;
 
            [Embed("assets/bullet_red.png")]
            private const BULLET_RED:Class;
 
            [Embed("assets/bullet_orange.png")]
            private const BULLET_ORANGE:Class;
 
            [Embed("assets/bullet_yellow.png")]
            private const BULLET_YELLOW:Class;
 
            [Embed("assets/bullet_green.png")]
            private const BULLET_GREEN:Class;
 
            [Embed("assets/bullet_blue.png")]
            private const BULLET_BLUE:Class;
 
            private var lnkBar:LinkBar;
 
            private function init():void {
                var dp:Array = [];
                dp.push({label:"Red", icon:BULLET_RED});
                dp.push({label:"Orange", icon:BULLET_ORANGE});
                dp.push({label:"Yellow", icon:BULLET_YELLOW});
                dp.push({label:"Green", icon:BULLET_GREEN});
                dp.push({label:"Blue", icon:BULLET_BLUE});
 
                var linkButtonStyles:CSSStyleDeclaration = new CSSStyleDeclaration(".linkButtonStyles");
                linkButtonStyles.setStyle("skin", CustomLinkButtonSkin);
 
                lnkBar = new LinkBar();
                lnkBar.dataProvider = dp;
                lnkBar.setStyle("linkButtonStyleName", "linkButtonStyles");
                lnkBar.setStyle("separatorWidth", 0);
                lnkBar.horizontalCenter = 0;
                lnkBar.verticalCenter = 0;
                addElement(lnkBar);
            }
        ]]>
    </fx:Script>
 
</s:Application>

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.

5 thoughts on “Creating a custom link button skin on the MX LinkBar control in Flex 4

  1. Hi Peter

    I’m placing a linkbar inside a controlBarContent of a spark titlewindow.

    The link bar shows with a rectangular white background against the nicely skinned controlbar. In flex 3, linkbars were transparent by default. Has something changed here ? (The linkbar does not respond to setting backgroundcolor)

    Any ideas on making this linkbar blend in ??

    Thanks!
    Steve

    1. @Steve,

      Try the contentBackgroundAlpha style instead, as seen in the following example:

      <mx:LinkBar id="lBar"
              dataProvider="[One,Two,Three,Four,Five,Six,Seven]"
              contentBackgroundAlpha="0.0" />

      I’ll try posting a quick example on this later today if I get some time.

      Peter

  2. Exactly what I was looking for Peter.

    Thanks for this post *and* for this excellent blog !

    Regards,
    Steve

  3. Hi friend, i work at an Fishey with using a personal LinkBar (MyLinkbar) herited from link Bar, and it’s in the Fishey, i want to ask you how i can show all the linkbar after the zoom of the Fishey because a part of my LinkBar isn’t clear,
    so please can you help me.
    have a nice day
    sabir.

Comments are closed.