Full code after the jump.

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/10/29/creating-an-mxml-based-icon-for-the-halo-linkbutton-control-in-flex-4/ -->
<s:Application name="Halo_LinkButton_icon_test"
        xmlns:fx="http://ns.adobe.com/mxml/2009"
        xmlns:s="library://ns.adobe.com/flex/spark"
        xmlns:mx="library://ns.adobe.com/flex/halo">
 
    <fx:Declarations>
        <fx:Component className="ico">
            <s:Graphic>
                <s:states>
                    <s:State name="up" />
                    <s:State name="over" />
                    <s:State name="down" />
                </s:states>
                <s:Ellipse  width="8" height="8">
                    <s:fill>
                        <s:SolidColor color="red" color.over="green" color.down="blue" />
                    </s:fill>
                </s:Ellipse>
            </s:Graphic>
        </fx:Component>
    </fx:Declarations>
 
    <mx:LinkButton id="lnkBtn"
            label="Halo LinkButton"
            icon="ico"
            horizontalCenter="0" verticalCenter="0" />
 
</s:Application>

You can also set the icon 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/10/29/creating-an-mxml-based-icon-for-the-halo-linkbutton-control-in-flex-4/ -->
<s:Application name="Halo_LinkButton_icon_test"
        xmlns:fx="http://ns.adobe.com/mxml/2009"
        xmlns:s="library://ns.adobe.com/flex/spark"
        xmlns:mx="library://ns.adobe.com/flex/halo">
 
    <fx:Style>
        @namespace s "library://ns.adobe.com/flex/spark";
        @namespace mx "library://ns.adobe.com/flex/halo";
 
        mx|LinkButton {
            icon: ClassReference("ico");
        }
    </fx:Style>
 
    <fx:Declarations>
        <fx:Component className="ico">
            <s:Graphic>
                <s:states>
                    <s:State name="up" />
                    <s:State name="over" />
                    <s:State name="down" />
                </s:states>
                <s:Ellipse  width="8" height="8">
                    <s:fill>
                        <s:SolidColor color="red" color.over="green" color.down="blue" />
                    </s:fill>
                </s:Ellipse>
            </s:Graphic>
        </fx:Component>
    </fx:Declarations>
 
    <mx:LinkButton id="lnkBtn"
            label="Halo LinkButton"
            horizontalCenter="0" verticalCenter="0" />
 
</s:Application>

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

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2009/10/29/creating-an-mxml-based-icon-for-the-halo-linkbutton-control-in-flex-4/ -->
<s:Application name="Halo_LinkButton_icon_test"
        xmlns:fx="http://ns.adobe.com/mxml/2009"
        xmlns:s="library://ns.adobe.com/flex/spark"
        xmlns:mx="library://ns.adobe.com/flex/halo">
    <s:controlBarContent>
        <s:Button id="btn"
                label="Set icon"
                click="btn_clickHandler(event);" />
    </s:controlBarContent>
 
    <fx:Script>
        <![CDATA[
            protected function btn_clickHandler(evt:MouseEvent):void {
                lnkBtn.setStyle("icon", ico);
            }
        ]]>
    </fx:Script>
 
    <fx:Declarations>
        <fx:Component className="ico">
            <s:Graphic>
                <s:states>
                    <s:State name="up" />
                    <s:State name="over" />
                    <s:State name="down" />
                </s:states>
                <s:Ellipse  width="8" height="8">
                    <s:fill>
                        <s:SolidColor color="red" color.over="green" color.down="blue" />
                    </s:fill>
                </s:Ellipse>
            </s:Graphic>
        </fx:Component>
    </fx:Declarations>
 
    <mx:LinkButton id="lnkBtn"
            label="Halo LinkButton"
            horizontalCenter="0" verticalCenter="0" />
 
</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.

 

Full code after the jump.

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/09/08/extending-the-linkbutton-control-in-flex/ -->
<mx:Application name="LinkButton_skin_test"
        xmlns:mx="http://www.adobe.com/2006/mxml"
        xmlns:comps="comps.*"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">

    <mx:ApplicationControlBar dock="true">
        <mx:Form styleName="plain">
            <mx:FormItem label="enabled:">
                <mx:CheckBox id="checkBox" selected="true" />
            </mx:FormItem>
        </mx:Form>
    </mx:ApplicationControlBar>

    <comps:CustomLinkButton1 id="linkButtonMXML"
            label="LinkButton (MXML)"
            toggle="true"
            enabled="{checkBox.selected}"
            skin="skins.CustomLinkButtonSkin1"
            rollOverColor="red"
            selectionColor="haloOrange"
            toggleBackgroundColor="yellow" />

    <comps:CustomLinkButton2 id="linkButtonAS"
            label="LinkButton (ActionScript)"
            toggle="true"
            enabled="{checkBox.selected}"
            skin="skins.CustomLinkButtonSkin1"
            rollOverColor="red"
            selectionColor="haloOrange"
            toggleBackgroundColor="yellow" />

</mx:Application>

comps/CustomLinkButton1.mxml

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/09/08/extending-the-linkbutton-control-in-flex/ -->
<mx:LinkButton xmlns:mx="http://www.adobe.com/2006/mxml">

    <mx:Metadata>
        [Style(name="toggleBackgroundColor",
                type="uint",
                format="Color",
                inherit="yes")]
    </mx:Metadata>

    <mx:Script>
        <![CDATA[
            override public function set enabled(value:Boolean):void {
                super.enabled = value;
                useHandCursor = value;
            }
        ]]>
    </mx:Script>

</mx:LinkButton>

comps/CustomLinkButton2.as

/**
 * http://blog.flexexamples.com/2008/09/08/extending-the-linkbutton-control-in-flex/
 */
package comps {
    import mx.controls.LinkButton;

    [Style(name="toggleBackgroundColor",
            type="uint",
            format="Color",
            inherit="yes")]

    public class CustomLinkButton2 extends LinkButton {
        public function CustomLinkButton2() {
            super();
        }

        override public function set enabled(value:Boolean):void {
            super.enabled = value;
            useHandCursor = value;
        }
    }
}

skins/CustomLinkButtonSkin1.as

/**
 * http://blog.flexexamples.com/2008/09/08/extending-the-linkbutton-control-in-flex/
 */
package skins {
    import mx.skins.halo.LinkButtonSkin;
    import mx.styles.StyleManager;

    public class CustomLinkButtonSkin1 extends LinkButtonSkin {
        public function CustomLinkButtonSkin1() {
            super();
        }
        override protected function updateDisplayList(w:Number, h:Number):void {
            super.updateDisplayList(w, h);

            // Inherited styles
            var cornerRadius:Number = getStyle("cornerRadius");
            var rollOverColor:uint = getStyle("rollOverColor");
            var selectionColor:uint = getStyle("selectionColor");

            // Custom styles
            var toggleBackgroundColor:uint = getStyle("toggleBackgroundColor") || getStyle("themeColor");

            graphics.clear();

            switch (name) {
                case "upSkin":
                    // Draw invisible shape so we have a hit area.
                    drawRoundRect(
                            0,                /* x */
                            0,                /* y */
                            w,                /* width */
                            h,                /* height */
                            cornerRadius,    /* cornerRadius */
                            0,                /* color */
                            0.0                /* alpha */
                        );
                    break;

                case "selectedUpSkin":
                case "selectedOverSkin":
                    drawRoundRect(0, 0, w, h, cornerRadius, toggleBackgroundColor, 1.0);
                    break;

                case "overSkin":
                    drawRoundRect(0, 0, w, h, cornerRadius, rollOverColor, 1.0);
                    break;

                case "selectedDownSkin":
                case "downSkin":
                    drawRoundRect(0, 0, w, h, cornerRadius, selectionColor, 1.0);
                    break;

                case "selectedDisabledSkin":
                    // Draw 20% alpha shape so we have a hit area.
                    drawRoundRect(0, 0, w, h, cornerRadius, toggleBackgroundColor, 0.2);
                    break;

                case "disabledSkin":
                    // Draw invisible shape so we have a hit area.
                    drawRoundRect( 0, 0, w, h, cornerRadius, 0, 0.0);
                    break;
            }
        }
    }
}

View source is enabled in the following example.

You can also specify the custom skin class in an external .CSS file or <mx:Style /> block, as seen in the following example:

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/09/08/extending-the-linkbutton-control-in-flex/ -->
<mx:Application name="LinkButton_skin_test"
        xmlns:mx="http://www.adobe.com/2006/mxml"
        xmlns:comps="comps.*"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">

    <mx:Style>
        CustomLinkButton1 {
            skin: ClassReference("skins.CustomLinkButtonSkin1");
        }
    </mx:Style>

    <mx:ApplicationControlBar dock="true">
        <mx:Form styleName="plain">
            <mx:FormItem label="enabled:">
                <mx:CheckBox id="checkBox" selected="true" />
            </mx:FormItem>
        </mx:Form>
    </mx:ApplicationControlBar>

    <comps:CustomLinkButton1 id="linkButton"
            label="LinkButton"
            toggle="true"
            enabled="{checkBox.selected}"
            rollOverColor="red"
            selectionColor="haloOrange"
            toggleBackgroundColor="yellow" />

</mx:Application>

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

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/09/08/extending-the-linkbutton-control-in-flex/ -->
<mx:Application name="LinkButton_skin_test"
        xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white"
        initialize="init();">

    <mx:Script>
        <![CDATA[
            import mx.binding.utils.BindingUtils;

            import comps.CustomLinkButton1;
            import skins.CustomLinkButtonSkin1;

            private var linkButton:CustomLinkButton1;

            private function init():void {
                linkButton = new CustomLinkButton1();
                linkButton.label = "LinkButton";
                linkButton.toggle = true;
                linkButton.setStyle("skin", CustomLinkButtonSkin1);
                linkButton.setStyle("rollOverColor", "red");
                linkButton.setStyle("selectionColor", "haloOrange");
                linkButton.setStyle("toggleBackgroundColor", "yellow");
                addChild(linkButton);

                BindingUtils.bindProperty(linkButton, "enabled",
                                            checkBox, "selected");
            }
        ]]>
    </mx:Script>

    <mx:ApplicationControlBar dock="true">
        <mx:Form styleName="plain">
            <mx:FormItem label="enabled:">
                <mx:CheckBox id="checkBox" selected="true" />
            </mx:FormItem>
        </mx:Form>
    </mx:ApplicationControlBar>

</mx:Application>

 

Full code after the jump.

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/09/07/removing-the-hand-cursor-from-a-disabled-linkbutton-control-in-flex/ -->
<mx:Application name="LinkButton_useHandCursor_test"
        xmlns:mx="http://www.adobe.com/2006/mxml"
        xmlns:comps="comps.*"
        layout="horizontal"
        verticalAlign="middle"
        backgroundColor="white">

    <mx:ApplicationControlBar dock="true">
        <mx:Form styleName="plain">
            <mx:FormItem label="enabled:">
                <mx:CheckBox id="checkBox" selected="true" />
            </mx:FormItem>
        </mx:Form>
    </mx:ApplicationControlBar>

    <mx:LinkButton id="linkButton"
            label="Default LinkButton"
            enabled="{checkBox.selected}" />

    <comps:DisabledLinkButtonMXML id="linkButton2"
            label="Custom LinkButton (MXML)"
            enabled="{checkBox.selected}" />

    <comps:DisabledLinkButtonAS id="linkButton3"
            label="Custom LinkButton (ActionScript)"
            enabled="{checkBox.selected}" />

</mx:Application>

View source is enabled in the following example.

comps/DisabledLinkButtonMXML.mxml

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/09/07/removing-the-hand-cursor-from-a-disabled-linkbutton-control-in-flex/ -->
<mx:LinkButton xmlns:mx="http://www.adobe.com/2006/mxml">

    <mx:Script>
        <![CDATA[
            override public function set enabled(value:Boolean):void {
                super.enabled = value;
                useHandCursor = value;
            }
        ]]>
    </mx:Script>

</mx:LinkButton>

comps/DisabledLinkButtonAS.as

/**
 * http://blog.flexexamples.com/2008/09/07/removing-the-hand-cursor-from-a-disabled-linkbutton-control-in-flex/
 */
package comps {
    import mx.controls.LinkButton;

    public class DisabledLinkButtonAS extends LinkButton {

        /**
         * Constructor.
         */
        public function DisabledLinkButtonAS() {
            super();
        }

        /**
         * @private
         */
        override public function set enabled(value:Boolean):void {
            super.enabled = value;
            useHandCursor = value;
        }
    }
}

 

Full code after the jump.

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/09/06/setting-the-horizontal-gap-between-an-icon-and-label-on-a-linkbutton-control-in-flex/ -->
<mx:Application name="LinkButton_horizontalSpacing_test"
        xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">

    <mx:ApplicationControlBar dock="true">
        <mx:Form styleName="plain">
            <mx:FormItem label="horizontalGap:">
                <mx:HSlider id="slider"
                        minimum="0"
                        maximum="10"
                        value="2"
                        snapInterval="1"
                        tickInterval="1"
                        liveDragging="true" />
            </mx:FormItem>
            <mx:FormItem label="labelPlacement:">
                <mx:ComboBox id="comboBox"
                        dataProvider="[left,right]"
                        selectedIndex="1" />
            </mx:FormItem>
        </mx:Form>
    </mx:ApplicationControlBar>

    <mx:LinkButton id="linkButton"
            label="LinkButton"
            icon="@Embed('assets/LinkButton.png')"
            horizontalGap="{slider.value}"
            labelPlacement="{comboBox.selectedItem}" />

</mx:Application>

View source is enabled in the following example.

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

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/09/06/setting-the-horizontal-gap-between-an-icon-and-label-on-a-linkbutton-control-in-flex/ -->
<mx:Application name="LinkButton_horizontalSpacing_test"
        xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">

    <mx:Style>
        LinkButton {
            icon: Embed("assets/LinkButton.png");
            horizontalGap: 10;
        }
    </mx:Style>

    <mx:LinkButton id="linkButton"
            label="LinkButton"
            labelPlacement="left" />

</mx:Application>

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

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/09/06/setting-the-horizontal-gap-between-an-icon-and-label-on-a-linkbutton-control-in-flex/ -->
<mx:Application name="LinkButton_horizontalSpacing_test"
        xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">

    <mx:Script>
        <![CDATA[
            import mx.events.ListEvent;
            import mx.events.SliderEvent;

            private function slider_change(evt:SliderEvent):void {
                linkButton.setStyle("horizontalGap", evt.value);
            }

            private function comboBox_change(evt:ListEvent):void {
                linkButton.labelPlacement = comboBox.selectedItem.toString();
            }
        ]]>
    </mx:Script>

    <mx:ApplicationControlBar dock="true">
        <mx:Form styleName="plain">
            <mx:FormItem label="horizontalGap:">
                <mx:HSlider id="slider"
                        minimum="0"
                        maximum="10"
                        value="2"
                        snapInterval="1"
                        tickInterval="1"
                        liveDragging="true"
                        change="slider_change(event);" />
            </mx:FormItem>
            <mx:FormItem label="labelPlacement:">
                <mx:ComboBox id="comboBox"
                        dataProvider="[left,right]"
                        selectedIndex="1"
                        change="comboBox_change(event);" />
            </mx:FormItem>
        </mx:Form>
    </mx:ApplicationControlBar>

    <mx:LinkButton id="linkButton"
            label="LinkButton"
            icon="@Embed('assets/LinkButton.png')" />

</mx:Application>

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

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/09/06/setting-the-horizontal-gap-between-an-icon-and-label-on-a-linkbutton-control-in-flex/ -->
<mx:Application name="LinkButton_horizontalSpacing_test"
        xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white"
        initialize="init();">

    <mx:Script>
        <![CDATA[
            import mx.containers.ApplicationControlBar;
            import mx.containers.Form;
            import mx.containers.FormItem;
            import mx.controls.ComboBox;
            import mx.controls.HSlider;
            import mx.controls.LinkButton;
            import mx.events.ListEvent;
            import mx.events.SliderEvent;

            [Embed("assets/LinkButton.png")]
            private const linkButtonIcon:Class;

            private var slider:HSlider;
            private var comboBox:ComboBox;
            private var linkButton:LinkButton;

            private function init():void {
                slider = new HSlider();
                slider.minimum = 0;
                slider.maximum = 10;
                slider.value = 2;
                slider.snapInterval = 1;
                slider.tickInterval = 1;
                slider.liveDragging = true;
                slider.addEventListener(SliderEvent.CHANGE,
                            slider_change);

                comboBox = new ComboBox();
                comboBox.dataProvider = ["left", "right"];
                comboBox.selectedIndex = 1;
                comboBox.addEventListener(ListEvent.CHANGE,
                            comboBox_change);

                var formItem1:FormItem = new FormItem();
                formItem1.label = "horizontalGap:";
                formItem1.addChild(slider);

                var formItem2:FormItem = new FormItem();
                formItem2.label = "labelPlacement:";
                formItem2.addChild(comboBox);

                var form:Form = new Form();
                form.styleName = "plain";
                form.addChild(formItem1);
                form.addChild(formItem2);

                var appControlBar:ApplicationControlBar;
                appControlBar = new ApplicationControlBar();
                appControlBar.dock = true;
                appControlBar.addChild(form);
                addChildAt(appControlBar, 0);

                linkButton = new LinkButton();
                linkButton.label = "LinkButton";
                linkButton.setStyle("icon", linkButtonIcon);
                addChild(linkButton);
            }

            private function slider_change(evt:SliderEvent):void {
                linkButton.setStyle("horizontalGap", evt.value);
            }

            private function comboBox_change(evt:ListEvent):void {
                var value:String = comboBox.selectedItem.toString();
                linkButton.labelPlacement = value;
            }
        ]]>
    </mx:Script>

</mx:Application>

 

Full code after the jump.

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/09/06/creating-a-toggleable-linkbutton-control-in-flex/ -->
<mx:Application name="LinkButton_toggle_test"
        xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">

    <mx:ApplicationControlBar dock="true">
        <mx:Form styleName="plain">
            <mx:FormItem label="toggle:">
                <mx:CheckBox id="toggleCheckBox" />
            </mx:FormItem>
            <mx:FormItem label="selected:">
                <mx:CheckBox id="selectedCheckBox"
                        selected="{linkButton.selected}" />
            </mx:FormItem>
        </mx:Form>
    </mx:ApplicationControlBar>

    <mx:LinkButton id="linkButton"
            label="LinkButton"
            toggle="{toggleCheckBox.selected}"
            selected="{selectedCheckBox.selected}"
            skin="skins.ToggleLinkButtonSkin" />

</mx:Application>

skins/ToggleLinkButtonSkin.as

/**
 * http://blog.flexexamples.com/2008/09/06/creating-a-toggleable-linkbutton-control-in-flex/
 */
package {
    import mx.skins.halo.LinkButtonSkin;

    public class ToggleLinkButtonSkin extends LinkButtonSkin {
        public function ToggleLinkButtonSkin() {
            super();
        }

        override protected function updateDisplayList(w:Number, h:Number):void {
            super.updateDisplayList(w, h);

            var cornerRadius:Number = getStyle("cornerRadius");
            var rollOverColor:uint = getStyle("rollOverColor");
            var selectionColor:uint = getStyle("selectionColor");

            graphics.clear();

            switch (name) {
                case "upSkin":
                    // Draw invisible shape so we have a hit area.
                    drawRoundRect(
                        0, 0, w, h, cornerRadius,
                        0, 0);
                    break;

                case "selectedUpSkin":
                case "selectedOverSkin":
                case "overSkin":
                    drawRoundRect(
                        0, 0, w, h, cornerRadius,
                        rollOverColor, 1);
                    break;

                case "selectedDownSkin":
                case "downSkin":
                    drawRoundRect(
                        0, 0, w, h, cornerRadius,
                        selectionColor, 1);
                    break;

                case "selectedDisabledSkin":
                case "disabledSkin":
                    // Draw invisible shape so we have a hit area.
                    drawRoundRect(
                        0, 0, w, h, cornerRadius,
                        0, 0);
                    break;
            }
        }
    }
}

View source is enabled in the following example.

You can also set the LinkButton control’s skin style in an external .CSS file or <mx:Style /> block, as seen in the following example:

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/09/06/creating-a-toggleable-linkbutton-control-in-flex/ -->
<mx:Application name="LinkButton_toggle_test"
        xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">

    <mx:Style>
        LinkButton {
            skin: ClassReference("skins.ToggleLinkButtonSkin");
        }
    </mx:Style>

    <mx:ApplicationControlBar dock="true">
        <mx:Form styleName="plain">
            <mx:FormItem label="toggle:">
                <mx:CheckBox id="toggleCheckBox" />
            </mx:FormItem>
            <mx:FormItem label="selected:">
                <mx:CheckBox id="selectedCheckBox"
                        selected="{linkButton.selected}" />
            </mx:FormItem>
        </mx:Form>
    </mx:ApplicationControlBar>

    <mx:LinkButton id="linkButton"
            label="LinkButton"
            toggle="{toggleCheckBox.selected}"
            selected="{selectedCheckBox.selected}" />

</mx:Application>

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

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/09/06/creating-a-toggleable-linkbutton-control-in-flex/ -->
<mx:Application name="LinkButton_toggle_test"
        xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">

    <mx:Script>
        <![CDATA[
            import skins.ToggleLinkButtonSkin;

            private function init():void {
                linkButton.setStyle("skin", ToggleLinkButtonSkin);
            }
        ]]>
    </mx:Script>

    <mx:ApplicationControlBar dock="true">
        <mx:Form styleName="plain">
            <mx:FormItem label="toggle:">
                <mx:CheckBox id="toggleCheckBox" />
            </mx:FormItem>
            <mx:FormItem label="selected:">
                <mx:CheckBox id="selectedCheckBox"
                        selected="{linkButton.selected}" />
            </mx:FormItem>
        </mx:Form>
    </mx:ApplicationControlBar>

    <mx:LinkButton id="linkButton"
            label="LinkButton"
            toggle="{toggleCheckBox.selected}"
            selected="{selectedCheckBox.selected}"
            initialize="init();" />

</mx:Application>

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

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/09/06/creating-a-toggleable-linkbutton-control-in-flex/ -->
<mx:Application name="LinkButton_toggle_test"
        xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white"
        initialize="init();">

    <mx:Script>
        <![CDATA[
            import skins.ToggleLinkButtonSkin;

            import mx.containers.ApplicationControlBar;
            import mx.containers.Form;
            import mx.containers.FormItem;
            import mx.controls.CheckBox;
            import mx.controls.LinkButton;

            private var toggleCheckBox:CheckBox;
            private var selectedCheckBox:CheckBox;
            private var linkButton:LinkButton;

            private function init():void {
                toggleCheckBox = new CheckBox();
                toggleCheckBox.addEventListener(Event.CHANGE,
                            toggleCheckBox_change);

                selectedCheckBox = new CheckBox();
                selectedCheckBox.addEventListener(Event.CHANGE,
                            selectedCheckBox_change);

                var formItem1:FormItem = new FormItem();
                formItem1.label = "toggle:";
                formItem1.addChild(toggleCheckBox);

                var formItem2:FormItem = new FormItem();
                formItem2.label = "selected:";
                formItem2.addChild(selectedCheckBox);

                var form:Form = new Form();
                form.styleName = "plain";
                form.addChild(formItem1);
                form.addChild(formItem2);

                var appControlBar:ApplicationControlBar;
                appControlBar = new ApplicationControlBar();
                appControlBar.dock = true;
                appControlBar.addChild(form);
                addChildAt(appControlBar, 0);

                linkButton = new LinkButton();
                linkButton.label = "LinkButton";
                linkButton.setStyle("skin", ToggleLinkButtonSkin);
                linkButton.addEventListener(Event.CHANGE,
                            linkButton_change);
                addChild(linkButton);
            }

            private function toggleCheckBox_change(evt:Event):void {
                linkButton.toggle = toggleCheckBox.selected;
            }

            private function selectedCheckBox_change(evt:Event):void {
                linkButton.selected = selectedCheckBox.selected;
            }

            private function linkButton_change(evt:Event):void {
                selectedCheckBox.selected = linkButton.selected;
            }
        ]]>
    </mx:Script>

</mx:Application>

 

Full code after the jump.

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/09/05/positioning-icons-on-a-linkbutton-control-in-flex/ -->
<mx:Application name="LinkButton_labelPlacement_test"
        xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">

    <mx:Script>
        <![CDATA[
            import mx.controls.ButtonLabelPlacement;
        ]]>
    </mx:Script>

    <mx:Array id="arr">
        <mx:String>{ButtonLabelPlacement.LEFT}</mx:String>
        <mx:String>{ButtonLabelPlacement.RIGHT}</mx:String>
        <mx:String>{ButtonLabelPlacement.TOP}</mx:String>
        <mx:String>{ButtonLabelPlacement.BOTTOM}</mx:String>
    </mx:Array>

    <mx:ApplicationControlBar dock="true">
        <mx:Form styleName="plain">
            <mx:FormItem label="labelPlacement:">
                <mx:ComboBox id="comboBox"
                        dataProvider="{arr}"
                        selectedIndex="1" />
            </mx:FormItem>
        </mx:Form>
    </mx:ApplicationControlBar>

    <mx:LinkButton id="linkButton"
            label="LinkButton"
            labelPlacement="{comboBox.selectedItem}"
            icon="@Embed('assets/LinkButton.png')" />

</mx:Application>

View source is enabled in the following example.

You can also set the labelPlacement property using ActionScript, as seen in the following example:

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/09/05/positioning-icons-on-a-linkbutton-control-in-flex/ -->
<mx:Application name="LinkButton_labelPlacement_test"
        xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">

    <mx:Script>
        <![CDATA[
            import mx.controls.ButtonLabelPlacement;
            import mx.events.ListEvent;

            private function comboBox_change(evt:ListEvent):void {
                var value:String = comboBox.selectedItem.toString();
                linkButton.labelPlacement = value;
            }
        ]]>
    </mx:Script>

    <mx:Array id="arr">
        <mx:String>{ButtonLabelPlacement.LEFT}</mx:String>
        <mx:String>{ButtonLabelPlacement.RIGHT}</mx:String>
        <mx:String>{ButtonLabelPlacement.TOP}</mx:String>
        <mx:String>{ButtonLabelPlacement.BOTTOM}</mx:String>
    </mx:Array>

    <mx:ApplicationControlBar dock="true">
        <mx:Form styleName="plain">
            <mx:FormItem label="labelPlacement:">
                <mx:ComboBox id="comboBox"
                        dataProvider="{arr}"
                        selectedIndex="1"
                        change="comboBox_change(event);" />
            </mx:FormItem>
        </mx:Form>
    </mx:ApplicationControlBar>

    <mx:LinkButton id="linkButton"
            label="LinkButton"
            icon="@Embed('assets/LinkButton.png')" />

</mx:Application>

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

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/09/05/positioning-icons-on-a-linkbutton-control-in-flex/ -->
<mx:Application name="LinkButton_labelPlacement_test"
        xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white"
        initialize="init();">

    <mx:Script>
        <![CDATA[
            import mx.containers.ApplicationControlBar;
            import mx.containers.Form;
            import mx.containers.FormItem;
            import mx.controls.ButtonLabelPlacement;
            import mx.controls.ComboBox;
            import mx.controls.LinkButton;
            import mx.events.ListEvent;

            [Embed("assets/LinkButton.png")]
            private const linkButtonIcon:Class;

            private var arr:Array;

            private var comboBox:ComboBox;
            private var linkButton:LinkButton;

            private function init():void {
                arr = [];
                arr.push(ButtonLabelPlacement.LEFT);
                arr.push(ButtonLabelPlacement.RIGHT);
                arr.push(ButtonLabelPlacement.TOP);
                arr.push(ButtonLabelPlacement.BOTTOM);

                comboBox = new ComboBox();
                comboBox.dataProvider = arr;
                comboBox.selectedIndex = 1;
                comboBox.addEventListener(ListEvent.CHANGE,
                            comboBox_change);

                var formItem:FormItem = new FormItem();
                formItem.label = "labelPlacement:";
                formItem.addChild(comboBox);

                var form:Form = new Form();
                form.styleName = "plain";
                form.addChild(formItem);

                var appControlBar:ApplicationControlBar;
                appControlBar = new ApplicationControlBar();
                appControlBar.dock = true;
                appControlBar.addChild(form);
                addChildAt(appControlBar, 0);

                linkButton = new LinkButton();
                linkButton.label = "LinkButton";
                linkButton.setStyle("icon", linkButtonIcon);
                addChild(linkButton);
            }

            private function comboBox_change(evt:ListEvent):void {
                var value:String = comboBox.selectedItem.toString();
                linkButton.labelPlacement = value;
            }
        ]]>
    </mx:Script>

</mx:Application>