Flex 4中的垂直製表符

Question

我想在Flex 4中有垂直製表符。我已經開始通過垂直列表來實現這一點。在列表選擇上，我正在更新視圖堆棧的選擇索引。這提供了垂直製表符的功能。

我的問題是外觀和感覺。如何讓列表具有與水平選項卡欄類似的外觀和感覺？這是否是一種壓倒性皮膚的情況？

我發現這個帖子：

Is there a way to make a <s:TabBar /> vertical?

它確實實現垂直選項卡。我的問題是，我沒有在標籤中得到任何文字。我認爲問題在於它最初是爲flex 2編寫的。我使用的是flex 4，並且試圖將此組件放入一個

任何指針都會很好。

感謝

Answer 1

在 http://blog.flexexamples.com/2009/02/13/creating-a-vertical-fxbuttonbar-control-in-flex-gumbo/

簡單的解決方案。如果你看一看的按鈕欄皮膚，你會看到，默認情況下它使用一種特殊的水平佈局 - ButtonBarHorizo​​ntalLayout。根據您的要求，您可能需要實現自己的垂直佈局，或者只使用標準VerticalLayout。

Answer 2

你試過rotation=90？當然，使用座標校正 - 它將圍繞左上角旋轉。

Answer 3

使用錯誤很多的鏈接我有工作如下：

<s:layout> 
    <s:HorizontalLayout horizontalAlign="left" paddingLeft="10"/> 
</s:layout> 
<s:ButtonBar id="btnBar" horizontalCenter="0" verticalCenter="0"> 
    <s:layout> 
     <s:VerticalLayout gap="-1"/> 
    </s:layout> 
    <s:dataProvider> 
     <s:ArrayList source="[Red,Orange,Yellow]"/> 
    </s:dataProvider> 
</s:ButtonBar> 

<mx:ViewStack id="vs" width="700" height="400" left="8" y="23" paddingTop="0"> 
    <s:NavigatorContent> 
     <s:Label text="Red"/> 
    </s:NavigatorContent> 
    <s:NavigatorContent> 
     <s:Label text="Orance"/> 
    </s:NavigatorContent> 
    <s:NavigatorContent> 
     <s:Label text="Yellow"/> 
    </s:NavigatorContent> 
</mx:ViewStack> 

Answer 4

我還是很新的Flex的，所以我想，我可能會發布我對任何人都面臨着類似的困境的解決方案，像我一樣。如果有同樣的解決方案更好的方法，我會很樂意接受建議！

經過大量有關TabbedViewNavigator的Skinclass的研究，我決定製作自己的TabbedViewNavigator/SplitView。爲了幫助其他人，我正在搜索

我創建了一個面板作爲包含兩個面板的主容器（mainViewContainer - 由我編碼的應用程序的主視圖和右側的垂直TabBar以及sideViewContainer組成 - 用於聊天，一個用戶列表和toolslist，這應該TabClick打開）。根據當前狀態調整面板大小。

 <!-- Container --> 
    <s:Panel id="mainViewContainer" width="100%" height="100%"  skinClass="skins.testPanelSkin" > 
     <s:HGroup height="100%" width="100%"> 

     <!-- mainPanel --> 
     <s:Panel id="mainPanel" 
       height="100%" 
       left="0" 
       right="0" 
       width = "{mainViewContainer.width*1.0}" 
       width.sidePanelMaximized="{mainViewContainer.width*0.8}" 
       width.sidePanelMinimized="{mainViewContainer.width*1.0}" 
       skinClass="skins.testPanelSkin" > 

      <s:TabBar id="tabBar" rotation="90" right="0" click="onTab_clickHandler(event)" 
         height="100%" requireSelection="false"> <!-- itemRendererFunction="selectRenderer" -->   
       <s:dataProvider> 
        <s:ArrayCollection> 
           <s:tab id="chat" text="Chat" /> 
           <s:tab id="userlist" text="Userlist" /> 
           <s:tab id="tools" text="Tools" /> 
        </s:ArrayCollection> 
       </s:dataProvider> 
      </s:TabBar>  
      <s:Rect width="{tabBar.height}" height="100%" right="0"> 
       <s:stroke> 
        <s:SolidColorStroke color="red" /> 
       </s:stroke> 
      </s:Rect> 
      <s:Label id="stateChangeBtn" 
         width="150" 
         height="150" 
         text="{currentState}" 
         horizontalCenter="1" 
         verticalCenter="1" 
         color="red" />  
     </s:Panel> 

     <!-- Container as sidepanel --> 
     <s:Panel id="sidePanelContainer" 
       height="100%" 
       left="0" 
       right="0" 
       width="100%" 
       width.sidePanelMinimized="{0}" 
       width.sidePanelMaximized="100%"> 
      <s:HGroup width="100%">  
       <s:Panel left="0" right="0" id="sidebarViewStackPanel" height="100%" width="100%" 
         skinClass="skins.testPanelSkin" 
         width.sidePanelMaximized="100%" 
         width.sidePanelMinimized="{0}" > 
        <s:ViewNavigator id="sidebarViewNav" firstView="views.chatView" width="100%" height="100%"    
            defaultPushTransition="{null}" defaultPopTransition="{null}" /> 
       </s:Panel>   
      </s:HGroup>    
     </s:Panel> 
     </s:HGroup> 
    </s:Panel> 

有關的TabBar的行爲，我寫了四個處理器：

  protected var viewDict : Dictionary = new Dictionary(); 

      protected function view1_creationCompleteHandler(event : FlexEvent) : void { 
      // TODO Auto-generated method stub 
      viewDict[0] = views.chatView; 
      viewDict[1] = views.userlistView; 
      viewDict[2] = views.toolsView;   
     } 

     protected function onTab_clickHandler(event : MouseEvent) : void {   
      if (event.target.hasOwnProperty("itemIndex") && 
       "sidePanelMaximized" === this.currentState && 
       tabBar.caretIndex === event.target.itemIndex) 
      { 
       sidebarViewNav.popView(); 
       this.currentState = "sidePanelMinimized";   
      } else {      
       this.currentState="sidePanelMaximized";   
       sidebarViewNav.popView(); 
       sidebarViewNav.pushView(viewDict[event.target.itemIndex].valueOf());   
      } 
     }    

     protected function view1_stateChangeCompleteHandler(event:FlexEvent):void 
     { 
      // TODO Auto-generated method stub 
      if (currentState === "sidePanelMinimized") { 
       sidePanelContainer.visible=false; 
       tabBar.selectedItem = -1; 
      } else { 
       sidePanelContainer.visible=true; 
      } 
     } 

     protected function view1_currentStateChangeHandler(event:StateChangeEvent):void 
     { 
      // TODO Auto-generated method stub 
      if (currentState == "sidePanelMaximized") { 
       sidePanelContainer.visible=true; 
      } else { 
       sidePanelContainer.visible=false; 
      } 
     } 

並給出了部分（的MainView）以下事件：

creationComplete="view1_creationCompleteHandler(event)" 
    currentStateChange="view1_currentStateChangeHandler(event)" 
    stateChangeComplete="view1_stateChangeCompleteHandler(event)" 

該解決方案似乎有點超載，但正如我所說的，我很新的彎曲。我希望這是有幫助的一些人:)