2010-10-05 7 views
0

J'ai créé un Viewstack et en utilisant un composant Tile et en répétant LinkButtons, j'ai pu faire une navigation multi-colonnes avec le viewstack comme fournisseur de données. Ma question est: est-ce que cela peut être mieux fait? Mon code est ci-dessous et je me demande si j'ai pris le long chemin de cette approche.Flex: création d'une barre de navigation multi-colonnes pour viewstack

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

Répondre

0

Me semble que vous avez des liens de navigation qui exposent différents et que ces liens changent de couleur en fonction de celui qui est sélectionné. En supposant que c'est le cas, cela ressemble énormément à un modèle de navigation basé sur un onglet. Mon approche serait d'utiliser l'étincelle TabBar et de peau les onglets pour ressembler à des liens. De cette façon, vous pouvez vous débarrasser de la majeure partie de votre code et laisser la peau de l'onglet gérer les couleurs en fonction de leur état actuel. De plus, vous n'auriez pas besoin du code que vous avez pour changer la pile d'affichage puisque le TabBar gérera cela pour vous. J'espère que cela pourra aider.

Questions connexes