bugger.
i tried my optimal way and it did not work (obviously i made a mistake) and
yes it does work.
:)
On 3/4/07, Peter Hall <[EMAIL PROTECTED]> wrote:
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
>
>
>
--
j:pn
http://www.lennel.org
