Adding icons to the Flex LinkBar control

By Peter deHaan On February 9, 2008 · 4 Comments

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.

 
Tagged with:
 
About The Author

Peter deHaan

Peter deHaan currently works for Adobe on the Flex SDK QA team. While not working on Flex, Flash, and ColdFusion applications, Peter enjoys making up bios and writing in 3rd person. Peter's rarely updated blog can be found at blogs.adobe.com/pdehaan/, actionscriptexamples.com, airexamples.com, and coldfusionexamples.com.

Visit Authors Website →

  • Add Widgets (Content Sidebar)

    This is your Content Sidebar. Edit this content that appears here in the widgets panel by adding or removing widgets in the Content Sidebar area.

Share
Facebook Twitter

4 Responses to Adding icons to the Flex LinkBar control

  1. greg says:
    August 7, 2008 at 2:24 am

    hi

    This is just what I was looking for. But instead having icon and label horizontaly aligned, verticaly aligned in LinkBar. Something like “labelPlacment” property button has. Any suggestion how to do that?

    many thanks in advance.

    Reply
  2. dan says:
    August 5, 2009 at 6:47 pm

    Hi Gurus,

    Is it possible to place the icon/image to the right of the label?

    Regards,
    Dan

    Reply
    • Peter deHaan says:
      August 5, 2009 at 8:16 pm

      @dan,

      How about this?

      <?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/02/09/adding-icons-to-the-flex-linkbar-control/ -->
<mx:Application name="LinkBar_dataProvider_Array_test"
        xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">
 
    <mx:Script>
        <![CDATA[
            import mx.controls.ButtonLabelPlacement;
            import mx.controls.Button;
 
            private function init():void {
                var len:uint = linkBar.numChildren;
                var idx:uint;
                for (idx = 0; idx < len; idx++) {
                    Button(linkBar.getChildAt(idx)).labelPlacement = ButtonLabelPlacement.LEFT;
                }
            }
        ]]>
    </mx:Script>
 
    <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"
            creationComplete="init();" />
 
</mx:Application>

      You may need to tweak it if you expect the data provider to change at any point.

      Peter

      Reply
  3. Adam Michalski says:
    September 11, 2009 at 6:44 am

    Thanks Peter

    Reply

Leave a Reply

Your email address will not be published.

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre lang="" line="" escaped="">

Anti-Spam Protection by WP-SpamFree