Flex Examples » LinkBar http://blog.flexexamples.com Just a bunch of Adobe Flex Examples Wed, 26 Jan 2011 18:09:51 +0000 en hourly 1 Setting the background alpha on the MX LinkBar control in Flex 4 http://blog.flexexamples.com/2010/05/06/setting-the-background-alpha-on-the-mx-linkbar-control-in-flex-4/ http://blog.flexexamples.com/2010/05/06/setting-the-background-alpha-on-the-mx-linkbar-control-in-flex-4/#comments Thu, 06 May 2010 18:14:23 +0000 Peter deHaan http://blog.flexexamples.com/?p=2942 The following example shows how you can set the background alpha on an MX LinkBar control in Flex 4 by setting the contentBackgroundAlpha style.

<?xml version="1.0" encoding="utf-8"?> <!-- http://blog.flexexamples.com/2010/05/06/setting-the-background-alpha-on-the-mx-linkbar-control-in-flex-4/ --> <s:Application name="MX_LinkBar_contentBackgroundAlpha_test" xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:mx="library://ns.adobe.com/flex/mx" xmlns:s="library://ns.adobe.com/flex/spark"> <s:controlBarContent> <mx:Form> <mx:FormItem label="contentBackgroundAlpha:"> <s:HSlider id="sldr" minimum="0.0" maximum="1.0" snapInterval="0.1" stepSize="0.1" change="sldr_changeHandler(event);" /> </mx:FormItem> <mx:FormItem label="contentBackgroundColor:"> <mx:ColorPicker id="clrPckr" change="clrPckr_changeHandler(event);" /> [...]]]> The following example shows how you can set the background alpha on an MX LinkBar control in Flex 4 by setting the contentBackgroundAlpha 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/2010/05/06/setting-the-background-alpha-on-the-mx-linkbar-control-in-flex-4/ -->
<s:Application name="MX_LinkBar_contentBackgroundAlpha_test"
        xmlns:fx="http://ns.adobe.com/mxml/2009"
        xmlns:mx="library://ns.adobe.com/flex/mx"
        xmlns:s="library://ns.adobe.com/flex/spark">
    <s:controlBarContent>
        <mx:Form>
            <mx:FormItem label="contentBackgroundAlpha:">
                <s:HSlider id="sldr"
                        minimum="0.0" maximum="1.0"
                        snapInterval="0.1"
                        stepSize="0.1"
                        change="sldr_changeHandler(event);" />
            </mx:FormItem>
            <mx:FormItem label="contentBackgroundColor:">
                <mx:ColorPicker id="clrPckr"
                        change="clrPckr_changeHandler(event);" />
            </mx:FormItem>
        </mx:Form>
    </s:controlBarContent>
 
    <fx:Script>
        <![CDATA[
            import mx.events.ColorPickerEvent;
            import mx.events.FlexEvent;
 
            protected function sldr_changeHandler(evt:Event):void {
                lBar.setStyle("contentBackgroundAlpha", sldr.value);
            }
 
            protected function clrPckr_changeHandler(evt:ColorPickerEvent):void {
                lBar.setStyle("contentBackgroundColor", clrPckr.selectedColor);
            }
 
            protected function lBar_creationCompleteHandler(evt:FlexEvent):void {
                sldr.value = lBar.getStyle("contentBackgroundAlpha");
                clrPckr.selectedColor = lBar.getStyle("contentBackgroundColor");
            }
        ]]>
    </fx:Script>
 
    <s:TitleWindow id="tWin"
            title="Spark TitleWindow title"
            left="40" right="40" top="40" bottom="40">
        <s:controlBarContent>
            <mx:LinkBar id="lBar"
                    dataProvider="[One,Two,Three,Four,Five,Six,Seven]"
                    creationComplete="lBar_creationCompleteHandler(event);" />
        </s:controlBarContent>
    </s:TitleWindow>
 
</s:Application>

View source is enabled in the following example.

You can also set the contentBackgroundAlpha style using MXML, as seen in the following example:

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2010/05/06/setting-the-background-alpha-on-the-mx-linkbar-control-in-flex-4/ -->
<s:Application name="MX_LinkBar_contentBackgroundAlpha_test"
        xmlns:fx="http://ns.adobe.com/mxml/2009"
        xmlns:mx="library://ns.adobe.com/flex/mx"
        xmlns:s="library://ns.adobe.com/flex/spark">
 
    <s:TitleWindow id="tWin"
            title="Spark TitleWindow title"
            left="40" right="40" top="40" bottom="40">
        <s:controlBarContent>
            <mx:LinkBar id="lBar"
                    dataProvider="[One,Two,Three,Four,Five,Six,Seven]"
                    contentBackgroundAlpha="0.0" />
        </s:controlBarContent>
    </s:TitleWindow>
 
</s:Application>

Or you can set the contentBackgroundAlpha 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/2010/05/06/setting-the-background-alpha-on-the-mx-linkbar-control-in-flex-4/ -->
<s:Application name="MX_LinkBar_contentBackgroundAlpha_test"
        xmlns:fx="http://ns.adobe.com/mxml/2009"
        xmlns:mx="library://ns.adobe.com/flex/mx"
        xmlns:s="library://ns.adobe.com/flex/spark">
 
    <fx:Style>
        @namespace mx "library://ns.adobe.com/flex/mx";
        @namespace s "library://ns.adobe.com/flex/spark";
 
        mx|LinkBar {
            contentBackgroundAlpha: 0.0;
        }
    </fx:Style>
 
    <s:TitleWindow id="tWin"
            title="Spark TitleWindow title"
            left="40" right="40" top="40" bottom="40">
        <s:controlBarContent>
            <mx:LinkBar id="lBar"
                    dataProvider="[One,Two,Three,Four,Five,Six,Seven]" />
        </s:controlBarContent>
    </s:TitleWindow>
 
</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/2010/05/06/setting-the-background-alpha-on-the-mx-linkbar-control-in-flex-4/feed/ 0 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 a label function on a LinkBar control in Flex http://blog.flexexamples.com/2008/10/08/setting-a-label-function-on-a-linkbar-control-in-flex/ http://blog.flexexamples.com/2008/10/08/setting-a-label-function-on-a-linkbar-control-in-flex/#comments Thu, 09 Oct 2008 06:42:56 +0000 Peter deHaan http://blog.flexexamples.com/2008/10/08/setting-a-label-function-on-a-linkbar-control-in-flex/ The following example shows how you can set a label function on a Flex LinkBar control to change each link’s label to uppercase by setting the labelFunction property.

Full code after the jump.

View MXML

<?xml version="1.0" encoding="utf-8"?> <!-- http://blog.flexexamples.com/2008/10/08/setting-a-label-function-on-a-linkbar-control-in-flex/ --> <mx:Application name="LinkBar_labelFunction_test" xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" verticalAlign="middle" backgroundColor="white"> <mx:Script> <![CDATA[ import mx.core.Container; private [...]]]> The following example shows how you can set a label function on a Flex LinkBar control to change each link’s label to uppercase by setting the labelFunction property.

Full code after the jump.

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/10/08/setting-a-label-function-on-a-linkbar-control-in-flex/ -->
<mx:Application name="LinkBar_labelFunction_test"
        xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">

    <mx:Script>
        <![CDATA[
            import mx.core.Container;

            private function linkBar_labelFunc(item:Container):String {
                return item[linkBar.labelField].toUpperCase();
            }
        ]]>
    </mx:Script>

    <mx:Array id="arr1">
        <mx:Object label="One fish" />
        <mx:Object label="Two fish" />
    </mx:Array>

    <mx:Array id="arr2">
        <mx:Object label="Red fish" />
        <mx:Object label="Blue fish" />
    </mx:Array>

    <mx:LinkBar id="linkBar"
            dataProvider="{viewStack}"
            labelFunction="linkBar_labelFunc" />

    <mx:ViewStack id="viewStack" width="200">
        <mx:VBox label="VBox One">
            <mx:DataGrid id="dataGrid1"
                    dataProvider="{arr1}"
                    draggableColumns="false"
                    width="100%"
                    height="100%" />
        </mx:VBox>
        <mx:VBox label="VBox Two">
            <mx:DataGrid id="dataGrid2"
                    dataProvider="{arr2}"
                    draggableColumns="false"
                    width="100%"
                    height="100%" />
        </mx:VBox>
    </mx:ViewStack>

</mx:Application>

View source is enabled in the following example.

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/10/08/setting-a-label-function-on-a-linkbar-control-in-flex/ -->
<mx:Application name="LinkBar_labelFunction_test"
        xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white"
        initialize="init();">

    <mx:Script>
        <![CDATA[
            import mx.containers.VBox;
            import mx.containers.ViewStack;
            import mx.controls.DataGrid;
            import mx.controls.LinkBar;
            import mx.core.Container;

            private var arr1:Array;
            private var arr2:Array;
            private var dataGrid1:DataGrid;
            private var dataGrid2:DataGrid;
            private var linkBar:LinkBar;
            private var vBox1:VBox;
            private var vBox2:VBox;
            private var viewStack:ViewStack;

            private function init():void {
                arr1 = [];
                arr1.push({label:"One fish"});
                arr1.push({label:"Two fish"});

                arr2 = [];
                arr2.push({label:"Red fish"});
                arr2.push({label:"Blue fish"});

                dataGrid1 = new DataGrid();
                dataGrid1.dataProvider = arr1;
                dataGrid1.draggableColumns = false;
                dataGrid1.percentWidth = 100;
                dataGrid1.percentHeight = 100;

                dataGrid2 = new DataGrid();
                dataGrid2.dataProvider = arr2;
                dataGrid2.draggableColumns = false;
                dataGrid2.percentWidth = 100;
                dataGrid2.percentHeight = 100;

                vBox1 = new VBox();
                vBox1.label = "VBox One";
                vBox1.addChild(dataGrid1);

                vBox2 = new VBox();
                vBox2.label = "VBox Two";
                vBox2.addChild(dataGrid2);

                viewStack = new ViewStack();
                viewStack.addChild(vBox1);
                viewStack.addChild(vBox2);
                viewStack.width = 200;

                linkBar = new LinkBar();
                linkBar.dataProvider = viewStack;
                linkBar.labelFunction = linkBar_labelFunc;
                addChild(linkBar);

                addChild(viewStack);
            }

            private function linkBar_labelFunc(item:Container):String {
                return item[linkBar.labelField].toUpperCase();
            }
        ]]>
    </mx:Script>

</mx:Application>
 
]]> http://blog.flexexamples.com/2008/10/08/setting-a-label-function-on-a-linkbar-control-in-flex/feed/ 0 Setting the separator width on a LinkBar control in Flex http://blog.flexexamples.com/2008/05/01/setting-the-separator-width-on-a-linkbar-control-in-flex/ http://blog.flexexamples.com/2008/05/01/setting-the-separator-width-on-a-linkbar-control-in-flex/#comments Fri, 02 May 2008 06:38:43 +0000 Peter deHaan http://blog.flexexamples.com/2008/05/01/setting-the-separator-width-on-a-linkbar-control-in-flex/ The following example shows how you can change the width of the item separators in a Flex LinkBar control by setting the separatorWidth style.

Full code after the jump.

View MXML

<?xml version="1.0" encoding="utf-8"?> <!-- http://blog.flexexamples.com/2008/05/01/setting-the-separator-width-on-a-linkbar-control-in-flex/ --> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" verticalAlign="middle" backgroundColor="white"> <mx:Array id="arr"> <mx:Object label="Alert" /> <mx:Object label="Button" /> <mx:Object label="ButtonBar" [...]]]> The following example shows how you can change the width of the item separators in a Flex LinkBar control by setting the separatorWidth style.

Full code after the jump.

View MXML

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

    <mx:Array id="arr">
        <mx:Object label="Alert" />
        <mx:Object label="Button" />
        <mx:Object label="ButtonBar" />
        <mx:Object label="CheckBox" />
        <mx:Object label="ColorPicker" />
        <mx:Object label="ComboBox" />
    </mx:Array>

    <mx:ApplicationControlBar dock="true">
        <mx:Form styleName="plain">
            <mx:FormItem label="separatorWidth:">
                <mx:HSlider id="slider"
                        minimum="0"
                        maximum="10"
                        value="1"
                        liveDragging="true"
                        snapInterval="1"
                        tickInterval="1" />
            </mx:FormItem>
        </mx:Form>
    </mx:ApplicationControlBar>

    <mx:LinkBar id="linkBar"
            dataProvider="{arr}"
            separatorWidth="{slider.value}" />

</mx:Application>

View source is enabled in the following example.

 
]]> http://blog.flexexamples.com/2008/05/01/setting-the-separator-width-on-a-linkbar-control-in-flex/feed/ 0 Setting the vertical spacing between items in a LinkBar control in Flex http://blog.flexexamples.com/2008/04/20/setting-the-vertical-spacing-between-items-in-a-linkbar-control-in-flex/ http://blog.flexexamples.com/2008/04/20/setting-the-vertical-spacing-between-items-in-a-linkbar-control-in-flex/#comments Mon, 21 Apr 2008 06:51:09 +0000 Peter deHaan http://blog.flexexamples.com/2008/04/20/setting-the-vertical-spacing-between-items-in-a-linkbar-control-in-flex/ In a previous example, “Setting the horizontal spacing between items in a LinkBar control in Flex”, we saw how to change the horizontal spacing between items in a Flex LinkBar control by setting the horizontalSpacing style.

The following example shows how you can set the vertical spacing between items in a vertical Flex LinkBar [...]]]> In a previous example, “Setting the horizontal spacing between items in a LinkBar control in Flex”, we saw how to change the horizontal spacing between items in a Flex LinkBar control by setting the horizontalSpacing style.

The following example shows how you can set the vertical spacing between items in a vertical Flex LinkBar control by setting the verticalGap style.

Full code after the jump.

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/04/20/setting-the-vertical-spacing-between-items-in-a-linkbar-control-in-flex/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">

    <mx:Script>
        <![CDATA[
            private function init():void {
                slider.value = linkBar.getStyle("verticalGap");
            }
        ]]>
    </mx:Script>

    <mx:Array id="arr">
        <mx:Object label="Alert" />
        <mx:Object label="Button" />
        <mx:Object label="ButtonBar" />
        <mx:Object label="CheckBox" />
        <mx:Object label="ColorPicker" />
        <mx:Object label="ComboBox" />
    </mx:Array>

    <mx:ApplicationControlBar dock="true">
        <mx:Form styleName="plain">
            <mx:FormItem label="verticalGap:" direction="horizontal">
                <mx:HSlider id="slider"
                        minimum="0"
                        maximum="20"
                        snapInterval="1"
                        tickInterval="1"
                        liveDragging="true" />
                <mx:Label text="{slider.value}" />
            </mx:FormItem>
        </mx:Form>
    </mx:ApplicationControlBar>

    <mx:LinkBar id="linkBar"
            dataProvider="{arr}"
            direction="vertical"
            verticalGap="{slider.value}"
            initialize="init();" />

</mx:Application>

View source is enabled in the following example.

 
]]> http://blog.flexexamples.com/2008/04/20/setting-the-vertical-spacing-between-items-in-a-linkbar-control-in-flex/feed/ 1 Setting the horizontal spacing between items in a LinkBar control in Flex http://blog.flexexamples.com/2008/04/20/setting-the-horizontal-spacing-between-items-in-a-linkbar-control-in-flex/ http://blog.flexexamples.com/2008/04/20/setting-the-horizontal-spacing-between-items-in-a-linkbar-control-in-flex/#comments Mon, 21 Apr 2008 04:26:54 +0000 Peter deHaan http://blog.flexexamples.com/2008/04/20/setting-the-horizontal-spacing-between-items-in-a-linkbar-control-in-flex/ The following example shows how you can set the horizontal spacing between items in a Flex LinkBar control by setting the horizontalGap style.

Full code after the jump.

<?xml version="1.0" encoding="utf-8"?> <!-- http://blog.flexexamples.com/2008/04/20/setting-the-horizontal-spacing-between-items-in-a-linkbar-control-in-flex/ --> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" verticalAlign="middle" backgroundColor="white">   <mx:Script> <![CDATA[ private function init():void { slider.value = linkBar.getStyle("horizontalGap"); } ]]> </mx:Script>   <mx:Array [...]]]> The following example shows how you can set the horizontal spacing between items in a Flex LinkBar control by setting the horizontalGap style.

Full code after the jump.

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/04/20/setting-the-horizontal-spacing-between-items-in-a-linkbar-control-in-flex/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">
 
    <mx:Script>
        <![CDATA[
            private function init():void {
                slider.value = linkBar.getStyle("horizontalGap");
            }
        ]]>
    </mx:Script>
 
    <mx:Array id="arr">
        <mx:Object label="Alert" />
        <mx:Object label="Button" />
        <mx:Object label="ButtonBar" />
        <mx:Object label="CheckBox" />
        <mx:Object label="ColorPicker" />
        <mx:Object label="ComboBox" />
    </mx:Array>
 
    <mx:ApplicationControlBar dock="true">
        <mx:Form styleName="plain">
            <mx:FormItem label="horizontalGap:" direction="horizontal">
                <mx:HSlider id="slider"
                        minimum="0"
                        maximum="20"
                        snapInterval="1"
                        tickInterval="1"
                        liveDragging="true" />
                <mx:Label text="{slider.value}" />
            </mx:FormItem>
        </mx:Form>
    </mx:ApplicationControlBar>
 
    <mx:LinkBar id="linkBar"
            dataProvider="{arr}"
            horizontalGap="{slider.value}"
            initialize="init();" />
 
</mx:Application>

View source is enabled in the following example.

 
]]> http://blog.flexexamples.com/2008/04/20/setting-the-horizontal-spacing-between-items-in-a-linkbar-control-in-flex/feed/ 3 Setting the separator color on a LinkBar control in Flex http://blog.flexexamples.com/2008/04/19/setting-the-separator-color-on-a-linkbar-control-in-flex/ http://blog.flexexamples.com/2008/04/19/setting-the-separator-color-on-a-linkbar-control-in-flex/#comments Sun, 20 Apr 2008 06:27:30 +0000 Peter deHaan http://blog.flexexamples.com/2008/04/19/setting-the-separator-color-on-a-linkbar-control-in-flex/ The following example shows how you can change the color of the item separators in a Flex LinkBar control by setting the separatorColor style.

Full code after the jump.

View MXML

<?xml version="1.0" encoding="utf-8"?> <!-- http://blog.flexexamples.com/2008/04/19/setting-the-separator-color-on-a-linkbar-control-in-flex/ --> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" verticalAlign="middle" backgroundColor="white"> <mx:Array id="arr"> <mx:Object label="Alert" /> <mx:Object label="Button" /> <mx:Object label="ButtonBar" [...]]]> The following example shows how you can change the color of the item separators in a Flex LinkBar control by setting the separatorColor style.

Full code after the jump.

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/04/19/setting-the-separator-color-on-a-linkbar-control-in-flex/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">

    <mx:Array id="arr">
        <mx:Object label="Alert" />
        <mx:Object label="Button" />
        <mx:Object label="ButtonBar" />
        <mx:Object label="CheckBox" />
        <mx:Object label="ColorPicker" />
        <mx:Object label="ComboBox" />
    </mx:Array>

    <mx:ApplicationControlBar dock="true">
        <mx:Form styleName="plain">
            <mx:FormItem label="separatorColor:">
                <mx:ColorPicker id="colorPicker" />
            </mx:FormItem>
        </mx:Form>
    </mx:ApplicationControlBar>

    <mx:LinkBar id="linkBar"
            dataProvider="{arr}"
            separatorColor="{colorPicker.selectedColor}" />

</mx:Application>

View source is enabled in the following example.

 
]]> http://blog.flexexamples.com/2008/04/19/setting-the-separator-color-on-a-linkbar-control-in-flex/feed/ 0 Adding icons to the Flex LinkBar control http://blog.flexexamples.com/2008/02/09/adding-icons-to-the-flex-linkbar-control/ http://blog.flexexamples.com/2008/02/09/adding-icons-to-the-flex-linkbar-control/#comments Sun, 10 Feb 2008 05:19:20 +0000 Peter deHaan http://blog.flexexamples.com/2008/02/09/adding-icons-to-the-flex-linkbar-control/ The following example shows how you can add icons to the LinkBar control in Flex by setting the iconField property.

Full code after the jump.

View MXML

<?xml version="1.0" encoding="utf-8"?> <!-- http://blog.flexexamples.com/2008/02/09/adding-icons-to-the-flex-linkbar-control/ --> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" verticalAlign="middle" backgroundColor="white"> <mx:Array id="arr"> <mx:Object label="Button" ico="@Embed('assets/Button.png')" /> <mx:Object label="ButtonBar" ico="@Embed('assets/ButtonBar.png')" /> <mx:Object label="CheckBox" ico="@Embed('assets/CheckBox.png')" /> [...]]]> The following example shows how you can add icons to the LinkBar control in Flex by setting the iconField property.

Full code after the jump.

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/02/09/adding-icons-to-the-flex-linkbar-control/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">

    <mx:Array id="arr">
        <mx:Object label="Button"
                ico="@Embed('assets/Button.png')" />
        <mx:Object label="ButtonBar"
                ico="@Embed('assets/ButtonBar.png')" />
        <mx:Object label="CheckBox"
                ico="@Embed('assets/CheckBox.png')" />
        <mx:Object label="ColorPicker"
                ico="@Embed('assets/ColorPicker.png')" />
    </mx:Array>

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

</mx:Application>

View source is enabled in the following example.

If you are using a ViewStack as a data provider for the LinkBar control, you could use the following code instead:

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/02/09/adding-icons-to-the-flex-linkbar-control/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">

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

    <mx:ViewStack id="viewStack" width="{linkBar.width}">
        <mx:VBox label="Button"
                icon="@Embed('assets/Button.png')">
            <mx:Label text="Button..." />
        </mx:VBox>
        <mx:VBox label="ButtonBar"
                icon="@Embed('assets/ButtonBar.png')">
            <mx:Label text="ButtonBar..." />
        </mx:VBox>
        <mx:VBox label="CheckBox"
                icon="@Embed('assets/CheckBox.png')">
            <mx:Label text="CheckBox..." />
        </mx:VBox>
        <mx:VBox label="ColorPicker"
                icon="@Embed('assets/ColorPicker.png')">
            <mx:Label text="ColorPicker..." />
        </mx:VBox>
    </mx:ViewStack>

</mx:Application>

View source is enabled in the following example.

 
]]> http://blog.flexexamples.com/2008/02/09/adding-icons-to-the-flex-linkbar-control/feed/ 4 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