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
