Flex Vertical TabBar With CornerRadius on Left or Right

On September 11, 2009, in Flex, by Anuj Gakhar

If you are using Flex and want to have a TabBar control that aligns vertically instead of the default “horizontal” behaviour , then you can simply use the “direction” property on the control and make it vertical. You can see an example of that below . Notice how the tabs are now vertically aligned but the borders are still on top, left and right. And see how the cornerradius is still on the top left and top right corners.

I think the borders of vertical tabs should not be the same as that of horizontal tabs. If a vertical tab is left aligned, it should have borders on top, bottom and left. If a vertical tab is right aligned, it should have borders on top, bottom and right.  And the same is true for the CornerRadius as well. For Left aligned vertical tabs, the CornerRadius should be on top left and bottom left. For Right aligned vertical tabs, the CornerRadius should be on top right and bottom right.

However, there is no way to do that in Flex. I thought I would give it a try. The TabBar Control in Flex uses the TabSkin.as file which can be found under {flex}/sdks/3.2.0/frameworks/projects/framework/src/mx/skins/halo/TabSkin.as . I copied that file over into my project workspace and started playing around with it. I changed a few things around in the updateDisplayList function like the cornerradius Object values and the x, y co-ordinates of the rectangel that gets drawn. And this is what I came up with.

In the above image, you see, the corner radius is now as it should be and so is the tab border.  I have given it a black border to highlight the change here.

All you have to do, in order to use this is, to change your stylesheet to use the new Skin for the TabBar instead of the default Flex skin. Here is the code that produced the above example :-

[as3 highlight=”47,62″]

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
 
 <mx:Script>
  <![CDATA[
   import mx.collections.ArrayCollection;
   [Bindable]
   private var tabData:ArrayCollection = new ArrayCollection([‘One’,’Two’,’Three’]);
  ]]>
 </mx:Script>
 
 <mx:Style>
  Tab.verticalTabLeft
  {
   disabledSkin: ClassReference("com.mm.skins.VerticalTabLeftSkin");
   downSkin: ClassReference("com.mm.skins.VerticalTabLeftSkin");
   overSkin: ClassReference("com.mm.skins.VerticalTabLeftSkin");
   selectedDisabledSkin: ClassReference("com.mm.skins.VerticalTabLeftSkin");
   selectedDownSkin: ClassReference("com.mm.skins.VerticalTabLeftSkin");
   selectedOverSkin: ClassReference("com.mm.skins.VerticalTabLeftSkin");
   selectedUpSkin: ClassReference("com.mm.skins.VerticalTabLeftSkin");
   upSkin: ClassReference("com.mm.skins.VerticalTabLeftSkin");   
   verticalTabAlignment : "left";
   cornerRadius:5;
   borderColor:"0x000000";
  }
  Tab.verticalTabRight
  {
   disabledSkin: ClassReference("com.mm.skins.VerticalTabRightSkin");
   downSkin: ClassReference("com.mm.skins.VerticalTabRightSkin");
   overSkin: ClassReference("com.mm.skins.VerticalTabRightSkin");
   selectedDisabledSkin: ClassReference("com.mm.skins.VerticalTabRightSkin");
   selectedDownSkin: ClassReference("com.mm.skins.VerticalTabRightSkin");
   selectedOverSkin: ClassReference("com.mm.skins.VerticalTabRightSkin");
   selectedUpSkin: ClassReference("com.mm.skins.VerticalTabRightSkin");
   upSkin: ClassReference("com.mm.skins.VerticalTabRightSkin");    
   verticalTabAlignment : "right";
   cornerRadius:5;
   borderColor:"0x000000";
  }  
 </mx:Style> 
 
 
<mx:VBox width="100%" height="100%" left="50" top="100">

 <mx:HBox height="80" backgroundColor="0xCCCCCC" width="300">
  <mx:TabBar backgroundColor="0xFFFFFF" verticalGap="5" tabStyleName="verticalTabLeft" id="leftTabs" dataProvider="{tabData}"
   direction="vertical"  />
  <mx:ViewStack  selectedIndex="{leftTabs.selectedIndex}" width="100%" height="100%" >
   <mx:Canvas label="One" backgroundColor="0xFFFFFF" width="100%" height="100%" />
   <mx:Canvas label="Two" backgroundColor="0xFFFFFF" width="100%" height="100%" />
   <mx:Canvas label="Three" backgroundColor="0xFFFFFF" width="100%" height="100%" />
  </mx:ViewStack> 
 </mx:HBox>
 
 <mx:HBox height="80" backgroundColor="0xCCCCCC" width="300">
  <mx:ViewStack selectedIndex="{rightTabs.selectedIndex}" width="100%" height="100%" >
   <mx:Canvas label="One" backgroundColor="white" width="100%" height="100%" />
   <mx:Canvas label="Two" backgroundColor="white" width="100%" height="100%" />
   <mx:Canvas label="Three" backgroundColor="white" width="100%" height="100%" />
  </mx:ViewStack>  
  <mx:TabBar verticalGap="5" tabStyleName="verticalTabRight" id="rightTabs" dataProvider="{tabData}" direction="vertical"
   backgroundColor="0xFFFFFF" />
 </mx:HBox>
 
</mx:VBox> 
</mx:Application>

[/as3]

This is a simple code with a TabBar and ViewStack working together as a TabNavigator. Look at the highlighted code, for the TabBar control, I have given it a tabStyleName. And look at the CSS, it uses the new skins that I wrote.

If you want to download these skins, here is the download link. VerticalTabSkins .

Tagged with:  

4 Responses to Flex Vertical TabBar With CornerRadius on Left or Right

  1. Harry says:

    Thank you very much!

  2. mitch says:

    border-top-right-radius : 0;
    border-top-left-radius : 10;
    border-bottom-left-radius : 10;

    These values seem to work. I found them by accident, they don’t seem to be in the asdoc 🙁

    I’m using Flex 4, mx:TabBar, and Halo theme. Maybe that is an unusual combination.

    • deep says:

      I am also using flex4 and trying to make a vertical tabbar, like the one in the above picture. Unfortunately, the above example dosent work. Would you mind sharing your code from flex4, so that I can have a look.
      Thanks in advance.

  3. mitch says:

    I see now that these value work because we are using Degrafa cssskin. So that’s another way to get these corner radii.
    http://www.degrafa.org/docs/com/degrafa/skins/CSSSkin.html

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.

© 2011 Anuj Gakhar
%d bloggers like this: