Flex: creating a multi column navigation bar for viewstack

Question

I have created a Viewstack and using a Tile component and repeating LinkButtons I was able to make a multi column navigation with the viewstack as the dataprovider. My question is can this be done better? My code is below and I am wondering if I took the long way around this approach.

<?xml version="1.0" encoding="utf-8"?>
<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">
    <s:layout>
        <s:BasicLayout />
    </s:layout>

    <fx:Script>
        <![CDATA[
            import mx.controls.Alert;

            private var _listItem:Object;
            private var n:int=0;
            public function get listItem():Object
            {
                return this._listItem;
            }

            public function set listItem(listItem:Object):void
            {
                try{n++;
                    this.changeSelection(this._listItem);               
                }catch(e:Error){}
                if(n==1 || n > this.viewStack.length){
                    this._listItem = listItem;
                    this.changeSelection(listItem);
                }
            }

            private function setSelection(obj:Object):void{
                this.viewStack.selectedIndex = this.viewStack.getChildIndex(this.viewStack.getChildByName(obj.target.getRepeaterItem().name));
                this.listItem = obj.target; 
            }
            private function checkSelection(obj:Object):void{               
                if(obj.target.getRepeaterItem() == this.viewStack.selectedChild){
                    if(this.listItem != obj.target){
                        this.listItem = obj.target; 
                    }
                }               
            }
            private function changeSelection(obj:Object):void{              
                if(obj.getRepeaterItem() == this.viewStack.selectedChild){
                    obj.setStyle("color","#000000");    
                }else{
                    obj.setStyle("color","#999999");
                }               
            }
        ]]>
    </fx:Script>

    <mx:Tile id="tiles" horizontalGap="20" verticalGap="0" y="210" direction="vertical">        
        <mx:Repeater id="masterList" dataProvider="{viewStack}">
            <mx:LinkButton 
                id="btn" 
                label="{masterList.currentItem.label}" 
                click="this.setSelection(event)"
                color="#999999"
                creationComplete="checkSelection(event);" />
        </mx:Repeater>
    </mx:Tile>

    <mx:ViewStack id="viewStack"  height="200" width="300" backgroundColor="#000000" >      
        <mx:VBox id="vb1" backgroundColor="#FF0000" label="Screen One"/>        
        <mx:VBox id="vb2" backgroundColor="#00FF00" label="Screen Two"/>        
        <mx:VBox id="vb3" backgroundColor="#0000FF" label="Screen Three"/>          
        <mx:VBox id="vb4" backgroundColor="#00FFFF" label="Screen Four"/>  
    </mx:ViewStack>

</s:Application>

Answer 1

Looks to me like you've got navigation links that expose different and that those links change color based on which one is selected. Assuming that's the case, it sounds an awful lot like a tab-based navigation model. My approach would be to use the spark TabBar and skin the tabs to look like links. That way you can get rid of most of your code and let the tab skin handle changing the colors based on their current state. Also, you wouldn't need any of the code you have for changing the view stack since the TabBar would handle that for you. Hope that helps.