A LinkBar control defines a horizontal or vertical row of LinkButton controls that designate a series of link destinations. You typically use a LinkBar control to control the active child container of a ViewStack container, or to create a standalone set of links.

The following shows an example of a LinkBar control that defines a set of links:

Creating a LinkBar control

One of the most common uses of a LinkBar control is to control the active child of aViewStack container. For an example, see ViewStack navigator container.

You can also use a LinkBar control on its own to create a set of links in your application. In the following example, you define an itemClick handler for the LinkBar control to respond to user input, and use the dataProvider property of the LinkBar to specify its label text. Use the following example code to create the LinkBar control shown in the previous image:

<?xml version="1.0"?>
<!-- controls\bar\LBarSimple.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">

    <mx:LinkBar borderStyle="solid"
        itemClick="navigateToURL(new URLRequest('http://www.adobe.com/' + 
            String(event.label).toLowerCase()), '_blank');">
        <mx:dataProvider>
            <mx:String>Flash</mx:String>
            <mx:String>Director</mx:String>
            <mx:String>Dreamweaver</mx:String>
            <mx:String>ColdFusion</mx:String>
        </mx:dataProvider>  
    </mx:LinkBar>
</mx:Application>
The executing SWF file for the previous example is shown below:

In this example, you use the <mx:dataProvider> and <mx:Array> tags to define the label text. The event object passed to the itemClick handler contains the label selected by the user. The handler for the itemClick event constructs an HTTP request to the Adobe website based on the label, and opens that page in a new browser window.

You can also bind data to the <mx:dataProvider> tag to populate the LinkBar control, as the following example shows:

<?xml version="1.0"?>
<!-- controls\bar\LBarBinding.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">

    <mx:Script>
        <![CDATA[
            import mx.collections.ArrayCollection;
        
            [Bindable]
            private var linkData:ArrayCollection = new ArrayCollection([
                "Flash", "Director", "Dreamweaver", "ColdFusion"
            ]);    
        ]]>
    </mx:Script>
    
    <mx:LinkBar 
        horizontalAlign="right" 
        borderStyle="solid" 
        itemClick="navigateToURL(new URLRequest('http://www.adobe.com/' + 
            String(event.label).toLowerCase()), '_blank');">
        <mx:dataProvider>
            {linkData}
        </mx:dataProvider>
    </mx:LinkBar>
</mx:Application>
The executing SWF file for the previous example is shown below:

In this example, you define the data for the LinkBar control as a variable in ActionScript, and then you bind that variable to the <mx:dataProvider> tag. You could also bind to the <mx:dataProvider> tag from a Flex data model, from a web service response, or from any other type of data model.

A LinkBar control creates LinkButton controls based on the value of its dataProvider property. Even though LinkBar is a subclass of Container, do not use methods such as Container.addChild() and Container.removeChild() to add or remove LinkButton controls. Instead, use methods such as addItem() and removeItem() to manipulate the dataProvider property. A LinkBar control automatically adds or removes the necessary children based on changes to the dataProvider property.