Josh's suggestion is probably the best idea.
If it was all AS then you could have a base class for all buttons in the
video controller and then extend it with a pretty much empty stub for each
one.
FForwardButton extends VideoControllerButton extends Button
RewindButton extends VideoControllerButton extends Button
Then you can do:
VideoController {
fforwardButtonSkin:ClassReference("FForwardButton");
rewindButtonSkin:ClassReference("RewindButton");
}
/* Applies to all video buttons */
VideoControllerButton{
color:#FFFFFF;
cornerRadius:3;
}
/* Just the ffwd button */
FForwardButton {
icon: Embed("/icons/ffwd.png");
}
/* Just the rewind button */
RewindButton {
icon: Embed("/icons/rewind.png");
}
This can reduce duplication in the CSS, but might be a more (unnecessarily)
complicated than Josh's suggestion.
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
