Hi,
The reason it doesn't work is because TypeSelectors order in inheritance.
Tab {
cornerRadius: 20;
}
Solves your Problem. This is not a bug.
Since you are setting a firstButtonStyleName on an actual selector,
TabNavigator will not pick it up since it is undefined to begin with and now
defined on the super class TypeSelector of TabBar.
If you set
.mytoggleButtonBarFirstButtonStyle {color: #FF0000;cornerRadius: 0;}
You will see that changes the radius of the first tab button.
Peace, Mike
On 5/31/07, Derek Vadneau <[EMAIL PROTECTED]> wrote:
Code follows...
Setting styles for ToggleButtonBar overrides styles set for buttons of
TabNavigator.
The TabNavigator uses the ToggleButtonBar (actually, TabBar, which
extends ToggleButtonBar) for the "tabs".
What happens is if I set styles for the TabNavigator tabs, they are
ignored if I also set styles for the ToggleButtonBar.
Here is the code:
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"; xmlns="*"
layout="absolute">
<mx:Style>
TabNavigator {
cornerRadius: 0;
tabStyleName: "myTabButtonStyle";
firstTabStyleName: "myTabFirstButtonStyle";
lastTabStyleName: "myTabLastButtonStyle";
selectedTabTextStyleName: "myTabSelectedButtonStyle";
}
.myTabButtonStyle {cornerRadius: 20;}
.myTabFirstButtonStyle {cornerRadius: 20;}
.myTabLastButtonStyle {cornerRadius: 20;}
.myTabSelectedButtonStyle {cornerRadius: 20;}
ToggleButtonBar {
buttonStyleName: "mytoggleButtonBarButtonStyle";
firstButtonStyleName: "mytoggleButtonBarFirstButtonStyle";
lastButtonStyleName: "mytoggleButtonBarLastButtonStyle";
selectedButtonTextStyleName: "mytoggleButtonBarSelectedButtonStyle";
}
.mytoggleButtonBarButtonStyle {color: #FF0000;}
.mytoggleButtonBarFirstButtonStyle {color: #FF0000;}
.mytoggleButtonBarLastButtonStyle {color: #FF0000;}
.mytoggleButtonBarSelectedButtonStyle {color: #FF0000;}
</mx:Style>
<mx:TabNavigator left="10" top="10" bottom="10" right="10">
<mx:Canvas label="[No Subject]" width="100%" height="100%">
<mx:TabNavigator x="10" y="10" width="353" height="349">
<mx:Canvas label="Identities" width="352" height="323">
</mx:Canvas>
<mx:Canvas label="Contacts" width="100%" height="100%">
</mx:Canvas>
<mx:Canvas label="Other" width="100%" height="100%">
</mx:Canvas>
</mx:TabNavigator>
</mx:Canvas>
</mx:TabNavigator>
</mx:Application>
All I'm trying to do is set the cornerRadius of the tabs to be some
value - I've exagerrated the value here and left out style properties
for the ToggleButtonBar buttons just so it's obvious what's going on.
The outside TabNavigator only has one tab and that takes on the style
of the TabNavigator selectedTab style. The inner TabNavigator shows
that the first and last buttons take on the ToggleButtonBar styles but
the middle button takes on the TabNavigator style.
If you comment out the ToggleButtonBar styles the TabNavigator styles
are applied properly.
As a workaround I can specify the styleName of the ToggleButtonBar I'm
using so that the style is specific to that instance rather than
global to all components.
I would classify this as a bug, unless someone can convince me why
this is expected behaviour.
--
Derek Vadneau
--
Teoti Graphix
http://www.teotigraphix.com
Blog - Flex2Components
http://www.flex2components.com
You can find more by solving the problem then by 'asking the question'.
