Flex 4.5 TabNavigator cornerRadius not working - apache-flex

Question

I'm having the hardest time finding a way to simply add rounded tabs to a TabNavigator control.
I have seen examples which seem to be really simple but they don't seem to work in Flex 4.5. Here is some sample code:
<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600">
<fx:Declarations>
<!-- Place non-visual elements (e.g., services, value objects) here -->
</fx:Declarations>
<fx:Style source="style.css"/>
<mx:TabNavigator x="93" y="90" width="571" height="293" tabStyleName="tabstyle">
<s:NavigatorContent width="100%" height="100%" label="Tab 1">
</s:NavigatorContent>
</mx:TabNavigator>
</s:Application>
and the css:
/* CSS file */
#namespace s "library://ns.adobe.com/flex/spark";
#namespace mx "library://ns.adobe.com/flex/mx";
.tabstyle
{
corner-radius: 10;
}
I have also tried cornerRadius: 10;
Any ideas why this does not work? Any easy to follow solution (I'm a beginner).
Thanks.

Answer 1

You could create a skin for your app/tab navigator, use the 'create copy of' option in Flash Builder, and in the Rect section, set the radiusX, radiusY values. Then use that skin for the component

Answer 2

This is the best and easiest workaround I know for this problem. It seems Adobe never solved this bug.
<s:VGroup width="100%" height="100%" gap="0" >
<s:Group width="100%">
<s:TabBar left="4" dataProvider="{tabNav}" cornerRadius="4" />
</s:Group>
<s:BorderContainer width="100%" height="100%" cornerRadius="4">
<mx:ViewStack id="tabNav" paddingBottom="10" width="100%" height="100%" >
<s:NavigatorContent label="Form" width="100%" height="100%">
...
</s:NavigatorContent>
<mx:Canvas id="treeNode" label="TreeNodeComponent" width="100%" height="100%">
...
</mx:Canvas>
<mx:Canvas id="melding" label="Melding" width="100%" height="100%" visible="{authorisation.moduleHasUserAutorization('melding')}" includeInLayout="{melding.visible}">
...
</mx:Canvas>
</mx:ViewStack>
</s:BorderContainer>
</s:VGroup>
It's the equivalent of this but with rounded corners in the tabs (and body):
<mx:TabNavigator id="tabNav" paddingBottom="10" width="100%" height="100%" >
<s:NavigatorContent label="Form" width="100%" height="100%">
...
</s:NavigatorContent>
<mx:Canvas id="treeNode" label="TreeNodeComponent" width="100%" height="100%">
...
</mx:Canvas>
<mx:Canvas id="melding" label="Melding" width="100%" height="100%" visible="{authorisation.moduleHasUserAutorization('melding')}" includeInLayout="{melding.visible}">
...
</mx:Canvas>
</mx:TabNavigator>

Answer 3

Try this!
<mx:TabNavigator id="tabNavigator" tabOffset="20" cornerRadius="10" height="100%" width="100%">

Answer 4

This is the sample code you can copy and run
<s:NavigatorContent id="search" label="Search" width="100%" height="100%" fontWeight="bold"
>
<s:layout>
<s:VerticalLayout horizontalAlign="center"
paddingTop="5" paddingLeft="5"
paddingRight="5" paddingBottom="5" />
</s:layout>
<s:Label text="Search Panel" />
<s:HGroup >
<s:TextInput id="Searchtxt" width="200" />
<mx:Button label="search" click="Searchtxt.text=''" />
</s:HGroup>
</s:NavigatorContent>
<s:NavigatorContent id="custInfo" label="Customer Info" backgroundColor="0xDCDCDC"
width="100%" height="100%" fontWeight="bold" >
<s:layout>
<s:VerticalLayout horizontalAlign="center"
paddingTop="5" paddingLeft="5"
paddingRight="5" paddingBottom="5" />
</s:layout>
<s:Label text="Customer Info" />
<s:HGroup>
<s:Label text="Email Address"/>
<s:TextInput id="email" width="200"/>
<s:Button label="Submit" click="email.text='';" />
</s:HGroup>
</s:NavigatorContent>
<s:NavigatorContent id="accountInfo" label="Account Info" backgroundColor="0xDCDCDC" width="100%" height="100%" fontWeight="bold" >
<s:layout>
<s:VerticalLayout horizontalAlign="center"
paddingTop="5" paddingLeft="5"
paddingRight="5" paddingBottom="5" />
</s:layout>
<s:Label text="Account Info" />
<s:HGroup>
<s:Button label="Purchases" />
<s:Button label="Sales" />
<s:Button label="Reports" />
</s:HGroup>
</s:NavigatorContent>
</mx:ViewStack>