Search code examples
actionscript-3apache-flexflex4

Linkbar is not hilighting the selected index


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.


Solution

  • 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>