The following example shows how you can determine which item was clicked in a LinkBar control in Flex by listening for the itemClick event.

Full code after the jump.

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/01/16/determining-which-item-was-clicked-in-a-flex-linkbar-control/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">

    <mx:Script>
        <![CDATA[
            import mx.controls.Alert;
            import mx.events.ItemClickEvent;
            import mx.utils.ObjectUtil;

            private function linkBar_itemClick(evt:ItemClickEvent):void {
                Alert.show("index: " + evt.index + "\n" +
                            "label: " + evt.label + "\n" +
                            "item: " + "\n" +
                            ObjectUtil.toString(evt.item),
                            evt.type);
            }
        ]]>
    </mx:Script>

    <mx:Array id="arr">
        <mx:Object label="One" data="1" custom="cougar" />
        <mx:Object label="Two" data="2" custom="rhino" />
        <mx:Object label="Three" data="3" custom="elephant" />
        <mx:Object label="Four" data="4" custom="penguin" />
    </mx:Array>

    <mx:LinkBar id="linkBar"
            dataProvider="{arr}"
            itemClick="linkBar_itemClick(event);" />

</mx:Application>

View source is enabled in the following example.

Or, if you wanted to build the same example, but mainly using ActionScript, you could use the following code:

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/01/16/determining-which-item-was-clicked-in-a-flex-linkbar-control/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white"
        creationComplete="init();">

    <mx:Script>
        <![CDATA[
            import mx.controls.Alert;
            import mx.controls.LinkBar;
            import mx.events.ItemClickEvent;
            import mx.utils.ObjectUtil;

            private var arr:Array;
            private var linkBar:LinkBar;

            private function init():void {
                arr = new Array();
                arr.push({label:"One", data:1, custom:"cougar"});
                arr.push({label:"Two", data:2, custom:"rhino"});
                arr.push({label:"Three", data:3, custom:"elephant"});
                arr.push({label:"Four", data:4, custom:"penguin"});

                linkBar = new LinkBar();
                linkBar.dataProvider = arr;
                linkBar.addEventListener(ItemClickEvent.ITEM_CLICK, linkBar_itemClick);
                addChild(linkBar);
            }

            private function linkBar_itemClick(evt:ItemClickEvent):void {
                Alert.show("index: " + evt.index + "\n" +
                            "label: " + evt.label + "\n" +
                            "item: " + "\n" +
                            ObjectUtil.toString(evt.item),
                            evt.type);
            }
        ]]>
    </mx:Script>

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

0 Responses to Determining which item was clicked in a Flex LinkBar control

  1. Shally Virk says:

    Nice tutorial but the thing i’m desperately trying to get at is how to determine the index of the item which has the mouse over it, lets say the mouse hoves over which item, that is the question.
    Any suggesstions will be appreciated.
    Regards,
    Virk

  2. Mike says:

    Superb! Just what I was looking for :-)

  3. Oncle dave says:

    Well, too late for ‘Shally Virk’, but someone else might find it useful:

    Linkbar button active or not:

    public function linkBar_itemClick(event:ItemClickEvent):void
    {
    var bar:LinkBar = event.target as LinkBar;
    var len:uint = bar.numChildren;
    for (var i:int = 0; i

  4. Oncle dave says:

    Well, too late for Shally Virk, but someone else might need it:

    ItemSelection active or not:

    public function linkBar_itemClick(event:ItemClickEvent):void
    {
    	var bar:LinkBar = event.target as LinkBar;
    	var len:uint = bar.numChildren;
    	for (var i:int = 0; i < len; i++)
    	{
    		Button(bar.getChildAt(i)).enabled = (i!=event.index);
    	}
    }
    

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