A couple weeks back I had to implement a vertical TabBar and it was one of the few times when Flex surprised me with it’s behavior. The fix was pretty simple but it took me some extra time looking at the source code trying to figure what was going on.
Here is a horizontal TabBar:
And here is a TabBar with direction="vertical":
Not so pretty, right? Wouldn’t it make sense to round the corners on the right side instead of the top? So I checked the source code for the TabSkin and there it was:
override protected function updateDisplayList(w:Number, h:Number):void
{
...
var cr:Object = { tl: cornerRadius, tr: cornerRadius, bl: 0, br: 0 };
var cr2:Object = { tl: cornerRadius2, tr: cornerRadius2, bl: 0, br: 0 };
...
}
cr and cr2 are used to draw the tabs and they are set to round up the top left and top right corners. All what needs to be done is to check if the direction is vertical and if so do the rounding on the right side:
var cr:Object = { tl: 0, tr: cornerRadius, bl: 0, br: cornerRadius };
var cr2:Object = { tl: 0, tr: cornerRadius2, bl: 0, br: cornerRadius2 };
Here is our new vertical TabBar:
Doesn’t this look more like what you’d expect to get if you set direction="vertical"?
4 comments so far
hi can you give me a example
August 5th, 2008 at 4:17 am
Sure.
You can make a copy of TabSkin.as inside your project and rename it to VerticalTabSkin.as (don’t forget to change the package and the class name). Then change the code that rounds the corners (see the post for the code snippets).
On your style sheet (for example style.css) tell the TabBar to use the new skin (adapt to point to your new skin package):
Tab.verticalTab
{
disabledSkin: ClassReference(”com.flexdevil.skins.VerticalTabSkin”);
downSkin: ClassReference(”com.flexdevil.skins.VerticalTabSkin”);
overSkin: ClassReference(”com.flexdevil.skins.VerticalTabSkin”);
selectedDisabledSkin: ClassReference(”com.flexdevil.skins.VerticalTabSkin”);
selectedDownSkin: ClassReference(”com.flexdevil.skins.VerticalTabSkin”);
selectedOverSkin: ClassReference(”com.flexdevil.skins.VerticalTabSkin”);
selectedUpSkin: ClassReference(”com.flexdevil.skins.VerticalTabSkin”);
upSkin: ClassReference(”com.flexdevil.skins.VerticalTabSkin”);
}
In your application make sure to reference the style sheet and then declare your TabBar:
<mx:TabBar direction=”vertical” dataProvider=”{['tab1','tab2']}” tabStyleName=”verticalTab”/>
I hope this helps.
August 5th, 2008 at 12:51 pm
Hi Darius
The vertucal tab is very cool. Just what I expect. But I can’t figure out how it works (e.g make the atbs on the right side of the page).
Can you please send me a sample mxml code?
Thanks in advance
January 22nd, 2009 at 2:35 pm
Very cool! Best example I have found of a vertical TabBar. Thank you! Also, your pictures helped me realize that I actually want to stick with the horizontal TabBar, for space issues.
October 10th, 2009 at 4:51 pm
Leave a Comment