Linkbar is not hilighting the selected index

Question

I have a LinkBar that is not highlighting the selected link. Is there an issue with the LinkBar?

Here is my code:

<mx:LinkBar id="languageTypeButtons" 
            selectedIndex="0"
            itemClick="languageType_changeHandler(null)"
            dataProvider="{languageTypes}">
</mx:LinkBar>

<s:ArrayList id="languageTypes">
    <fx:String>{MXML}</fx:String>
    <fx:String>{HTML}</fx:String>
    <fx:String>{ANDROID}</fx:String>
</s:ArrayList>


public static const HTML:String = "HTML";
public static const MXML:String = "MXML";
public static const ANDROID:String = "Android";

I'm using Flex 4.6 and I have Spark components mixed with mx components. If I set the selectedIndex in the LinkBar MXML then it stays stuck on that item visually. Programmatically it is changing and the selectedIndex shows the right values.

Update:
Couldn't figure this out so I'm using ButtonBar. Unfortunately ButtonBar seems to hang the whole app if you don't set the dataProvider or set it to an ArrayList with no items.

I don't think you can set the selectedIndex of a LinkBar control if you're using an array of objects/strings as a data provider. Although you could set the selectedIndex if you were using a ViewStack as a data provider or used a ToggleButtonBar control instead of a LinkBar. — akhil_mittal
I set selected index and it returns the value I set but it does not change the button highlight. — 1.21 gigawatts

gbdcool gbdcool · Accepted Answer · 2015-08-25T17:45:56

You have to use ViewStack as a dataProvider:

 <s:VGroup>
    <mx:LinkBar id="languageTypeButtons"
                selectedIndex="0"
                itemClick="languageType_changeHandler()"
                dataProvider="{languageTypesViewStack}">
    </mx:LinkBar>
    <mx:ViewStack id="languageTypesViewStack" borderStyle="solid" width="100%" height="80%">
        <mx:Canvas id="htmlID" backgroundColor="#FFFFCC" label="{HTML}" width="100%" height="100%">
            <mx:Label text="HTML Selected" color="#000000"/>
        </mx:Canvas>
        <mx:Canvas id="mxmlID" backgroundColor="#CCFFFF" label="{MXML}" width="100%" height="100%">
            <mx:Label text="MXML Selected" color="#000000"/>
        </mx:Canvas>
        <mx:Canvas id="AndroidID" backgroundColor="#FFCCFF" label="{ANDROID}" width="100%" height="100%">
            <mx:Label text="Android Selected" color="#000000"/>
        </mx:Canvas>
    </mx:ViewStack>

</s:VGroup>

If you really want to use your string ArrayList as a dataProvider then here is a workaround:

<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"   xmlns:s="library://ns.adobe.com/flex/spark"
           xmlns:mx="library://ns.adobe.com/flex/mx" >
<fx:Script><![CDATA[
    public static const HTML:String = "HTML";
    public static const MXML:String = "MXML";
    public static const ANDROID:String = "Android";

    private function languageType_changeHandler():void
    {
        var tempSelectedIndex:Number = languageTypeButtons.selectedIndex;
        for (var i = 0; i < languageTypes.length; i++)
        {
            languageTypeButtons.selectedIndex = i
            languageTypeButtons.validateNow();
        }
        languageTypeButtons.selectedIndex = tempSelectedIndex;
    }

    ]]></fx:Script>
<fx:Declarations>
    <s:ArrayList id="languageTypes">
        <fx:String>{MXML}</fx:String>
        <fx:String>{HTML}</fx:String>
        <fx:String>{ANDROID}</fx:String>
    </s:ArrayList>
</fx:Declarations>

<mx:LinkBar id="languageTypeButtons"
            selectedIndex="0"
            itemClick="languageType_changeHandler()"
            dataProvider="{languageTypes}">
</mx:LinkBar>

</s:Application>

Linkbar is not hilighting the selected index

1 Answers