Flex Examples » linkButtonStyleName http://blog.flexexamples.com Just a bunch of Adobe Flex Examples Wed, 26 Jan 2011 18:09:51 +0000 en hourly 1 Setting the horizontal spacing between an item label and icon in a LinkBar control in Flex http://blog.flexexamples.com/2009/08/20/setting-the-horizontal-spacing-between-an-item-label-and-icon-in-a-linkbar-control-in-flex/ http://blog.flexexamples.com/2009/08/20/setting-the-horizontal-spacing-between-an-item-label-and-icon-in-a-linkbar-control-in-flex/#comments Thu, 20 Aug 2009 13:43:22 +0000 Peter deHaan http://blog.flexexamples.com/?p=1664 In a previous example, “Setting the horizontal spacing between items in a LinkBar control in Flex”, we saw how you could set the horizontal spacing between items in a Flex LinkBar control by setting the horizontalGap style.

The following example shows how you can control the spacing between a LinkBar control’s individual LinkButton control’s [...]]]> In a previous example, “Setting the horizontal spacing between items in a LinkBar control in Flex”, we saw how you could set the horizontal spacing between items in a Flex LinkBar control by setting the horizontalGap style.

The following example shows how you can control the spacing between a LinkBar control’s individual LinkButton control’s label and icon by setting the horizontalGap style on the LinkBar control’s linkButtonStyleName style.

Full code after the jump.

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2009/08/20/setting-the-horizontal-spacing-between-an-item-label-and-icon-in-a-linkbar-control-in-flex/ -->
<mx:Application name="LinkBar_linkButtonStyleName_horizontalGap_test"
        xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">
 
    <mx:Style>
        .linkBtnStyles {
            horizontalGap: 0;
        }
 
        LinkBar {
            linkButtonStyleName: linkBtnStyles;
        }
    </mx:Style>
 
    <mx:Script>
        <![CDATA[
            import mx.events.SliderEvent;
 
            protected function slider_change(evt:SliderEvent):void {
                var btnStyles:CSSStyleDeclaration = StyleManager.getStyleDeclaration(".linkBtnStyles");
                btnStyles.setStyle("horizontalGap", evt.value);
            }
        ]]>
    </mx:Script>
 
    <mx:ApplicationControlBar dock="true">
        <mx:Form styleName="plain">
            <mx:FormItem label="horizontalGap:" direction="horizontal">
                <mx:HSlider id="slider"
                        minimum="0"
                        maximum="20"
                        value="0"
                        snapInterval="1"
                        tickInterval="1"
                        liveDragging="true"
                        change="slider_change(event);"/>
                <mx:Label text="{slider.value}" />
            </mx:FormItem>
        </mx:Form>
    </mx:ApplicationControlBar>
 
    <mx:LinkBar id="linkBar">
        <mx:dataProvider>
            <mx:Array>
                <mx:Object label="Alert" />
                <mx:Object label="Button" icon="@Embed('assets/Button.png')" />
                <mx:Object label="ButtonBar" icon="@Embed('assets/ButtonBar.png')" />
                <mx:Object label="CheckBox" icon="@Embed('assets/CheckBox.png')" />
                <mx:Object label="ColorPicker" icon="@Embed('assets/ColorPicker.png')" />
                <mx:Object label="ComboBox" icon="@Embed('assets/ComboBox.png')" />
            </mx:Array>
        </mx:dataProvider>
    </mx:LinkBar>
 
</mx:Application>
 
]]> http://blog.flexexamples.com/2009/08/20/setting-the-horizontal-spacing-between-an-item-label-and-icon-in-a-linkbar-control-in-flex/feed/ 0 Creating a custom link button skin on the MX LinkBar control in Flex 4 http://blog.flexexamples.com/2009/08/13/creating-a-custom-link-button-skin-on-the-halo-linkbar-control-in-flex-4/ http://blog.flexexamples.com/2009/08/13/creating-a-custom-link-button-skin-on-the-halo-linkbar-control-in-flex-4/#comments Thu, 13 Aug 2009 14:46:12 +0000 Peter deHaan http://blog.flexexamples.com/?p=1578 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.

<?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>   [...]]]> 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.

 
]]> http://blog.flexexamples.com/2009/08/13/creating-a-custom-link-button-skin-on-the-halo-linkbar-control-in-flex-4/feed/ 5 Setting the button link corner radius on a Flex LinkBar control http://blog.flexexamples.com/2008/01/21/setting-the-button-link-corner-radius-on-a-flex-linkbar-control/ http://blog.flexexamples.com/2008/01/21/setting-the-button-link-corner-radius-on-a-flex-linkbar-control/#comments Tue, 22 Jan 2008 07:05:12 +0000 Peter deHaan http://blog.flexexamples.com/2008/01/21/setting-the-button-link-corner-radius-on-a-flex-linkbar-control/ The following example shows you how to set the corner radius on the link buttons in a LinkBar control in Flex by setting the linkButtonStyleName and cornerRadius styles.

Full code after the jump.

View MXML

<?xml version="1.0" encoding="utf-8"?> <!-- http://blog.flexexamples.com/2008/01/21/setting-the-button-link-corner-radius-on-a-flex-linkbar-control/ --> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" verticalAlign="middle" backgroundColor="white"> <mx:Style> LinkBar { backgroundAlpha: 1.0; backgroundColor: [...]]]> The following example shows you how to set the corner radius on the link buttons in a LinkBar control in Flex by setting the linkButtonStyleName and cornerRadius styles.

Full code after the jump.

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/01/21/setting-the-button-link-corner-radius-on-a-flex-linkbar-control/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">

    <mx:Style>
        LinkBar {
            backgroundAlpha: 1.0;
            backgroundColor: haloBlue;
            linkButtonStyleName: myCustomLinkButtonStyleName;
        }

        .myCustomLinkButtonStyleName {
            cornerRadius: 0;
        }
    </mx:Style>

    <mx:Array id="arr">
        <mx:Object label="One" />
        <mx:Object label="Two" />
        <mx:Object label="Three" />
        <mx:Object label="Four" />
    </mx:Array>

    <mx:LinkBar id="linkBar"
            dataProvider="{arr}" />

</mx:Application>

View source is enabled in the following example.

 
]]> http://blog.flexexamples.com/2008/01/21/setting-the-button-link-corner-radius-on-a-flex-linkbar-control/feed/ 1 Setting a label’s font weight on a Flex LinkBar and ToggleButtonBar control http://blog.flexexamples.com/2008/01/14/setting-a-labels-font-weight-on-a-flex-linkbar-and-togglebuttonbar-control/ http://blog.flexexamples.com/2008/01/14/setting-a-labels-font-weight-on-a-flex-linkbar-and-togglebuttonbar-control/#comments Mon, 14 Jan 2008 15:28:48 +0000 Peter deHaan http://blog.flexexamples.com/2008/01/14/setting-a-labels-font-weight-on-a-flex-linkbar-and-togglebuttonbar-control/ The following example shows how you can set the font weight of a label on LinkBar control and ToggleButton control in Flex by setting the linkButtonStyleName style and buttonStyleName style respectively.

Full code after the jump.

View MXML

<?xml version="1.0" encoding="utf-8"?> <!-- http://blog.flexexamples.com/2008/01/14/setting-a-labels-font-weight-on-a-flex-linkbar-and-togglebuttonbar-control/ --> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" verticalAlign="middle" backgroundColor="white"> <mx:Style> .myCustomLinkButtonStyleName { [...]]]> The following example shows how you can set the font weight of a label on LinkBar control and ToggleButton control in Flex by setting the linkButtonStyleName style and buttonStyleName style respectively.

Full code after the jump.

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/01/14/setting-a-labels-font-weight-on-a-flex-linkbar-and-togglebuttonbar-control/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">

    <mx:Style>
        .myCustomLinkButtonStyleName {
            fontWeight: normal;
        }

        .myCustomButtonStyleName {
            fontWeight: normal;
        }
    </mx:Style>

    <mx:Array id="arr">
        <mx:Object label="One" />
        <mx:Object label="Two" />
        <mx:Object label="Three" />
        <mx:Object label="Four" />
    </mx:Array>

    <mx:LinkBar id="linkBar"
            dataProvider="{arr}"
            linkButtonStyleName="myCustomLinkButtonStyleName" />

    <mx:ToggleButtonBar id="toggleButtonBar"
            dataProvider="{arr}"
            buttonStyleName="myCustomButtonStyleName" />

</mx:Application>

View source is enabled in the following example.

Or, you can set the styles a bit more globally by using the following snippet:

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/01/14/setting-a-labels-font-weight-on-a-flex-linkbar-and-togglebuttonbar-control/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">

    <mx:Style>
        LinkBar {
            linkButtonStyleName: regularFontWeight;
        }

        ToggleButtonBar {
            buttonStyleName: regularFontWeight;
        }

        .regularFontWeight {
            fontWeight: normal;
        }
    </mx:Style>

    <mx:Array id="arr">
        <mx:Object label="One" />
        <mx:Object label="Two" />
        <mx:Object label="Three" />
        <mx:Object label="Four" />
    </mx:Array>

    <mx:LinkBar id="linkBar"
            dataProvider="{arr}" />

    <mx:ToggleButtonBar id="toggleButtonBar"
            dataProvider="{arr}" />

</mx:Application>

View source is enabled in the following example.

 
]]> http://blog.flexexamples.com/2008/01/14/setting-a-labels-font-weight-on-a-flex-linkbar-and-togglebuttonbar-control/feed/ 3