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

By Peter deHaan On August 13, 2009 · 5 Comments

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 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/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>

The default Spark skins for the MX/Halo controls/containers can be found in the Flex SDK at:
%Flex SDK%\frameworks\projects\sparkskins\src\mx\skins\spark\*.

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.

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.

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

Steve says:

May 6, 2010 at 9:24 am

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

Reply
- Peter deHaan says:
  
  May 6, 2010 at 11:05 am
  
  @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
  
  Reply
  - Peter deHaan says:
    
    May 6, 2010 at 11:15 am
    
    Done; “Setting the background alpha on the MX LinkBar control in Flex 4″
    
    Peter
Steve says:

May 6, 2010 at 1:04 pm

Exactly what I was looking for Peter.

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

Regards,
Steve

Reply
Sabir says:

January 17, 2011 at 1:58 pm

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.

Reply

M	T	W	T	F	S	S
« Jul				Sep »
					1	2
3	4	5	6	7	8	9
10	11	12	13	14	15	16
17	18	19	20	21	22	23
24	25	26	27	28	29	30
31

Just a bunch of Adobe Flex Examples

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

Peter deHaan

Add Widgets (Content Sidebar)

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

Leave a Reply Cancel reply

Categories

Articles

Calendar

Meta

Pages

The Latest

Setting the icon placement on a Spark Button control in Flex Hero

More