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
