[flexcoders] TabNavigator/ToggleButtonBar Style conflict

[Derek Vadneau]

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