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')" />
        <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.

4 thoughts on “Adding icons to the Flex LinkBar control

  1. 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.

    1. @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

Comments are closed.