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)" 

该解决方案似乎有点超载，但正如我所说的，我很新的弯曲。我希望这是有帮助的一些人:)