LinkBar control

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:

LinkBar container

A LinkBar control has the following default properties:

Property	Default value
Preferred size	A width wide enough to contain all label text, plus any padding and separators, and the height of the tallest child.
Control resizing rules	LinkBar controls do not resize by default. Specify percentage sizes if you want your LinkBar to resize based on the size of its parent container.
Padding	2 pixels for the `top`, `bottom`, `left`, and `right` properties.

Subtopics

Creating a LinkBar control

One of the most common uses of a LinkBar control is to control the active child of a ViewStack 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 a 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"?>
<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:Array>
                <mx:String>Flash</mx:String>
                <mx:String>Director</mx:String>
                <mx:String>Dreamweaver</mx:String>
                <mx:String>ColdFusion</mx:String>
            </mx:Array>
        </mx:dataProvider>    
    </mx:LinkBar>
</mx:Application>

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:

Revised 9/25/06: Added [Bindable] metadata tag.

<mx:Script>
        <![CDATA[
            [Bindable]			 
            private var linkData:Array = ["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>

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.




		Related Topics


		Popup



		Popup

Flex 2

Comments

juan.mendez said on Nov 10, 2006 at 11:28 AM :

I don't know how to access each child of linkBar, in order to retrieve variable assigned as "link", but anyhow I wanted to show my own example.. I miss getURL, so i included a copy in this case.

<mx:Script>
<![CDATA[
import flash.net.URLRequest;
import flash.net.navigateToURL;

private function getURL( urlAddress:String, window:String="_self"):void
{
navigateToURL( new URLRequest( urlAddress ), window );
}

]]>
</mx:Script>
<mx:ArrayCollection id="myArrayCollection">
<mx:Object label="coldfusion" link= "http://www.adobe.com/products/coldfusion/" />
<mx:Object label="flash" link="http://www.adobe.com/products/flash/" />
<mx:Object label="flash media server" link="http://www.adobe.com/products/flashmediaserver/" />
<mx:Object label="flex 2" link="http://www.adobe.com/products/flex/" />
<mx:Object label="illustrator" link="http://www.adobe.com/products/illustrator/" />
</mx:ArrayCollection>

<mx:LinkBar id="myLinkBar" dataProvider="{myArrayCollection}" itemClick="getURL( myLinkBar.dataProvider.getItemAt( event.index ).link );"/>

thx1138 said on Dec 29, 2007 at 2:17 PM :

No matter what I try I cannot change the "selected" item in the linkbar. Try this example. How do I change what item is visually "selected".

<mx:LinkBar x="10" y="19" dataProvider="['item 1', 'item 2', 'item 3']" selectedIndex="0" color="#D41010" disabledColor="#1D7AC1" disabledOverlayAlpha="1" dropShadowEnabled="true" dropShadowColor="#000000" errorColor="#AC0909">
</mx:LinkBar>

An answer forwarded from a message on Flexcoders:
Apparently the visual selection in a LinkBar only works when its dataprovider is a collection of DisplayObjects (e.g. ViewStack).

The ViewStack doesn't even have to be visually present (it has to be on the display list though), so the following will work ;-)

<mx:LinkBar id="_lbar" dataProvider="_vstack" />

<mx:ViewStack id="_vstack" includeInLayout="false" visible="false">
<mx:Canvas label="Item 1" />
<mx:Canvas label="Item 2" />
<mx:Canvas label="Item 3" />
</mx:ViewStack>

And of course you can extend LinkBar or NavBar and make it work properly with non display objects.