Thank you for the workaround, it will work great for my project.
Now, I can maybe understand that it's perhaps not a bug but it definitely is
a shortcoming of the style system and docs.
There is no mention of Tab in the docs. I had to go look for the class in
the SDK just to know how you got that.
Also, other than searching through the component code, the only method given
for setting the styles on the components is what I gave. In fact I got that
from the Adobe style explorer app.
And if I had a TabBar component in my project (I don't but bare with me) it
would take on the style I set with Tab, which I would expect, but not
necessarily want.
When I explicitly set a style for a component I expect that it takes on that
style. I understand what you mean by TypeSelectors and inheritance, but that
just means the style system (or code implementing it) might be flawed. When
I set a style for ToggleButtonBar, I would expect ALL instances of
ToggleButtonBar to take on that style. However, in the case of the
TabNavigator (and any other component that contains other components) when
there is a way to explicitly affect a child instance within, that should be
honoured.
Going back to my code, I would expect that the text in each TabNavigator tab
might be red (because of the ToggleButtonBar styles), but they aren't. Only
the first and last are. And I would expect that the cornerRadius set by the
TabNavigator style be honoured. If I set the cornerRadius as you mention in
mytoggleButtonBarFirstButtonStyle, I would expect the TabNavigator style to
override that style. Why? Because that style was explicitly set for the
TabNavigator's children.
A simplified example, but just to show where my head is at: Take an HTML
page with CSS. If I have a list item of an unordered list and specify a
style for li to be color:#FF0000 and font-weight:bold, the text would be red
and bold. If I set a particular list item to use a class style where the
color is #0000FF, that one list item would be blue and bold. That would be
my expectation anyhow.
Hopefully you get my meaning.
Thanks for you time!
On 5/31/07, Michael Schmalle <[EMAIL PROTECTED]> wrote:
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'.
--
Derek Vadneau
