Home Tutorials Forums Articles Blogs Movies Library Employment Press

Go Back   ActionScript.org Forums > Flex > Flex 2, 3 & 4

Reply
 
Thread Tools Rate Thread Display Modes
Old 08-02-2011, 03:11 PM   #1
lkelly
Member
 
Join Date: Dec 2004
Posts: 96
Default Setting a chromeColor within a skin?

I created a skin that is a copy of the TabBarButtonSkin and I see where there's
a property set: useChromeColor = true;

I have some CSS that uses a different chromeColor for the selected tab vs the
unselected tab and I'm wondering how that value gets integrated into the skin.
I don't see chrome used anywhere else in that skin file other than that one
line. There's no <fill> or anything that uses the chromeColor.

Since I'm not sure how to access the compound CSS rule (the selected tab's
chromeColor) from setStyle(), I figured that maybe I would set the chromeColor
in the skin for the specific states I want.

I guess I should have indicated upfront that I need this chromeColor to change
at runtime, so I can't hardcode it into the CSS.
lkelly is offline   Reply With Quote
Old 08-03-2011, 04:17 PM   #2
drkstr
Flexpert
 
drkstr's Avatar
 
Join Date: Sep 2006
Location: Seattle, WA: USA
Posts: 1,587
Default

The chromColor is used in the base SparkSkin class to apply color transforms to any skin elements not included in the "exclusions" array for that skin. To be honest, I'm not sure if changing the chromColor is the way to go about it. My understanding is that chromeColor is is used to define a "base" color for the skin, then you modify specific graphic elements using a specific style color. This is probably just a matter of opinion however.

FYI. you can access any style set on the parent component in the skin simply by using getStyle("someCustomStyle"). If you look at the source to PanelSkin, you will see they access various styles in the updateDisplayList function to control the visual appearance of the skin. I think something along those lines would be a better solution, IMHO.
drkstr is offline   Reply With Quote
Old 08-03-2011, 04:29 PM   #3
lkelly
Member
 
Join Date: Dec 2004
Posts: 96
Default

Yes, I'd ideally like to use the getStyle() and setStyle() functions when I initialize my app so I can set the runtime chrome colors. The problem is that I want different colors for a selected tab on a TabBar vs. an unselected tab. I'm using the following in my CSS:

Code:
.myTabBar s|ButtonBarButton:upAndSelected,
.myTabBar s|ButtonBarButton:overAndSelected,
.myTabBar s|ButtonBarButton:downAndSelected,
.myTabBar s|ButtonBarButton:disabledAndSelected {
	chromeColor: #ff9c00; /*want to change this at runtime*/
	color: #ffffff;
	font-weight: bold;
}
.myTabBar { 
	chromeColor: #0054a4; /*want to change this at runtime*/
	color: #ffffff;
	font-weight: bold;
}
I have programmatically changed the .myTabBar chromeColor property using setStyle(), but I don't know how to get to a compound CSS style like this:

.myTabBar s|ButtonBarButton:upAndSelected

Alternatively, is there a way to use a different CSS class for the selected tabs? Something to the effect of:

Code:
.myTabBar s|ButtonBarButton:upAndSelected,
.myTabBar s|ButtonBarButton:overAndSelected,
.myTabBar s|ButtonBarButton:downAndSelected,
.myTabBar s|ButtonBarButton:disabledAndSelected {
	/* use CSS class mySelectedTabStyle */
}

.mySelectedTabStyle {
     chromeColor: #ff9c00; /*want to change this at runtime*/
     color: #ffffff;
     font-weight: bold;
}
lkelly is offline   Reply With Quote
Old 08-03-2011, 04:38 PM   #4
lkelly
Member
 
Join Date: Dec 2004
Posts: 96
Default

Specifically I'm using the following to get the style during initialization (in order to change the chromeColor):

Code:
var tabDeclaration:CSSStyleDeclaration = FlexGlobals.topLevelApplication.styleManager.getStyleDeclaration(".myTabBar");
tabDeclaration.setStyle("chromeColor", "#ff0000");
So the missing piece for me is how to access the complex style rule for the selected tab using getStyleDeclaration().
lkelly is offline   Reply With Quote
Old 08-03-2011, 10:28 PM   #5
drkstr
Flexpert
 
drkstr's Avatar
 
Join Date: Sep 2006
Location: Seattle, WA: USA
Posts: 1,587
Default

ActionScript Code:
trace(ObjectUtil.toString(FlexGlobals.topLevelApplication.styleManager.selectors));

If you run that trace you will get a list of strings that can be passed to the getStyleDeclaration method. There should be a unique string there for every style you declared in the CSS.
drkstr is offline   Reply With Quote
Old 08-03-2011, 10:44 PM   #6
lkelly
Member
 
Join Date: Dec 2004
Posts: 96
Default

That was it. Thanks.
lkelly is offline   Reply With Quote
Reply


Thread Tools
Display Modes Rate This Thread
Rate This Thread:

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off

Forum Jump


All times are GMT. The time now is 12:44 AM.

///
Follow actionscriptorg on Twitter

 


Powered by vBulletin® Version 3.8.5
Copyright ©2000 - 2014, Jelsoft Enterprises Ltd.
Ad Management plugin by RedTyger
Copyright 2000-2013 ActionScript.org. All Rights Reserved.
Your use of this site is subject to our Privacy Policy and Terms of Use.