Vertical tabs in Flex 4

Question

I would like to have vertical tabs in Flex 4. I have started implementing this by having a vertical list down one side. On list selection I am updating the selection index of a view stack. This gives the functionality of vertical tabs.

My problem is the look and feel. How do I get the list to have a similar look and feel to the horizontal tab bar? Is it a case of overriding skins?

I have found this post:

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

which does implement vertical tabs. My problem with this is that I do not get any text in the tab. I think the problem is that this was originally written for flex 2. I am using flex 4 and am trying to put this component inside a

Any pointers would be great.

Thanks

Answer 1

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

If you take a look at the ButtonBar skin, you'll see that by default it uses a special horizontal layout - ButtonBarHorizontalLayout. Depending on your demands, you might want to implement your own vertical layout, or just use the standard VerticalLayout.

Answer 2

i'm still quite new to Flex, so I thought, I might post my solution for anybody facing similar difficulties, as I did. If there are nicer ways for the same solution, I'll gladly take advices!

After a lot of research about the Skinclass from TabbedViewNavigator, I decided to make my own TabbedViewNavigator/SplitView. To help others, who are searching

I created one panel as main container including two panels (mainViewContainer - consisting of the main view for the application I am coding and a vertical TabBar on the right, and sideViewContainer - for a chat, an userlist and a toolslist, which should open on TabClick). I resized the panels depending on the current State.

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

For the behaviour of the TabBar, i wrote four handlers:

            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;
            } 
        }

And gave the component (MainView) the following events:

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

This solution might seem a bit overloaded, but as I said, I'm very new to Flex. I hope this is helpfull for some people :)

Answer 3

Using bug a lot's link I have the following which works:

<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

Have you tried rotation=90? With coordinate correction, of course - it will be rotated around top left corner.