i am currently doing it like this (which you can see if you update your code
base!!)
notice i am not creating that stylename called ffButton as you call it.
private static function createDefaultButtonStyle():CSSStyleDeclaration
{
var newStyleDeclaration:CSSStyleDeclaration = new
CSSStyleDeclaration();
newStyleDeclaration.setStyle("color", 0x786544);
newStyleDeclaration.setStyle("size",9);
newStyleDeclaration.setStyle("backgroundColor", 0xFFFFFF);
newStyleDeclaration.setStyle("backgroundAlpha",0.65);
newStyleDeclaration.setStyle("borderAlpha",0);
newStyleDeclaration.setStyle("borderThickness",0);
return newStyleDeclaration;
}
private static function classConstruct():Boolean {
var classStyle:CSSStyleDeclaration =
StyleManager.getStyleDeclaration("VideoControlBar");
if (!classStyle)
{
var newStyleDeclaration:CSSStyleDeclaration = new
CSSStyleDeclaration();
newStyleDeclaration.setStyle
("fastforwardButtonStyle",createDefaultButtonStyle());
StyleManager.setStyleDeclaration("VideoControlBar",
newStyleDeclaration, true);
}
else
{
if(!classStyle.getStyle("fastforwardButtonStyle"))
{
classStyle.setStyle
("fastforwardButtonStyle",createDefaultButtonStyle());
}
}
return true;
}
once again notice there is no call to the
StyleManager.setStyleDeclarationfunction defining the ffStyle
:)
On 08 Mar 2007 19:50:34 -0800, Peter Hall <[EMAIL PROTECTED]> wrote:
On second thoughts, how can you have default style values and do it
cleanly?
This way, your component will define a styleName called ffButton, which
will be compiled into your app even if the user of the componet chooses
another styleName to use. Apart from overhead, there is a risk that this
user may attempt to use the styleName for something else, and be surprised
by the weird default values they are seeing.
Seems like the only way around that is to use a separate class for each
sub-component, so you can associate the default styles, but allow the user
to set the styleName the same way as above.
Thoughts?
Peter
On 3/3/07, Josh Tynjala <[EMAIL PROTECTED]> wrote:
>
> Why doesn't your ideal version work? That's exactly how you should do
> it. It's clean and allows customization.
>
> VideoControlBar
> {
> fastForwardButtonStyleName: "ffButton";
> }
>
> .ffButton
> {
> fillColors: #E7E7E7, #EFEFEF, #EFEFEF, #E7E7E7;
> }
>
> You'll notice that the Flex framework allows you to style subcomponents
> like this too.
>
> In your VideoControlBar component's styleChanged, when
> fastForwardButtonStyleName changes, you'll need to assign it to the button.
> The framework will take it from there.
>
> -Josh
>
> Johannes Nel wrote:
>
> hi
>
> i am creating a video controller bar. so this controller bar consits of
> several buttons and 2 sliders.
>
> so for each of these buttons i want someone to be able to specify all
> the different skins. so my style declaration looks something like this
> /**
> * Default controller fastforward button selected disabled
> skin
> */
> [Style(name="fastforwardSelectedDisabledIcon", type="Class",
> inherit="yes")]
> /**
> * Default controller fastforward button over skin
> */
> [Style(name="fastforwardOverIcon", type="Class",
> inherit="yes")]
> /**
> * Default controller fastforward button down skin
> */
> [Style(name="fastforwardDownIcon", type="Class",
> inherit="yes")]
> /**
> * Default controller fastforward button disabled skin
> */
> [Style(name="fastforwardDisabledIcon", type="Class",
> inherit="yes")]
>
> for each button i declare each skin :(
> so my css style would look something like this
> .myVideoControlBar
> {
> fastforwardSelectedDisabledIcon:
> Embed(source="../../assets/barbuttons.swf", symbol="fastforward");
> fastforwardSelectedDownIcon:
> Embed(source="../../assets/barbuttons.swf", symbol="fastforward");
> fastforwardSelectedOverIcon:
> Embed(source="../../assets/barbuttons.swf", symbol="fastforwardOver");
> }
> and then i have to write the code to set this and flag the changes in
> styleChanged, invalidate displaylist and write default style values for each
> in the classConstruct function.
>
> this looks clumsy and requires a lot of code, time, difficult testing
> and high maintenance :(
> i could ofcourse do this
> <mx:Button id="fastforwardButton"
> styleName="forwardButton"
> buttonDown="fastforward()"
> autoRepeat="true"/>
> but now i am tying the user of this component into a naming convention
> in their stylesheet. also undesireble.
>
>
> my ideal would be doing this:
> declaring a style i want to use for the button in my style sheet
> .fastforwardStyle
> {
> fillColors: #E7E7E7, #EFEFEF, #EFEFEF, #E7E7E7;
> cornerRadius: 0;
> disabledIcon: Embed(source="../../assets/barbuttons.swf",
> symbol="fastforward");
> downIcon: Embed(source="../../assets/barbuttons.swf",
> symbol="fastforward");
> overIcon: Embed(source="../../assets/barbuttons.swf",
> symbol="fastforwardOver");
> selectedDisabledIcon: Embed(source="../../assets/barbuttons.swf",
> symbol="fastforward");
> selectedDownIcon: Embed(source="../../assets/barbuttons.swf",
> symbol="fastforward");
> selectedOverIcon: Embed(source="../../assets/barbuttons.swf",
> symbol="fastforwardOver");
> selectedUpIcon: Embed(source="../../assets/barbuttons.swf",
> symbol="fastforward");
> upIcon: Embed(source="../../assets/barbuttons.swf",
> symbol="fastforward");
> }
>
> ////////////////
> then in my videocontrol bar
> /**
> * Default controller fastforward button skin
> * @copy Button#Styles
> */
> [Style(name="fastforwardButtonStyle", type="String",
> inherit="yes")]
>
> <mx:Button id="fastforwardButton"
> buttonDown="fastforward()"
> autoRepeat="true"/>
>
> //////////////////////////
> and in the video control bar style
> .myVideoControlBar
> {
> fastforward-button-style:"fastforwardStyle";
> }
>
> and finally assinging the style in my component i would just do this
> fastforwardButton.styleName = "fastforwardStyle";
>
>
> this obviously does not work, hence me posting here.
>
> has anyone got any suggestions how i can do this with the least amount
> of code?
>
> thanks
> johan
> --
> j:pn
> http://www.lennel.org
>
>
>
--
j:pn
http://www.lennel.org
