Thanks. That worked!
Something else I tried also worked. Its based on original skin and uses
updateDisplayList()...code below
But your suggestion is more elegant and better!
Thanks for your help
code
<s:BitmapImage id="myUpImage" includeIn="up" />
<s:BitmapImage id="myOverImage" includeIn="over" />
<s:BitmapImage id="myDownImage" includeIn="down" />
override protected function updateDisplayList(unscaledWidth:Number,
unscaledHeight:Number) : void
{
if(myUpImage)
{
myUpImage.source = getStyle("upSkin");
}
if(myOverImage)
{
myOverImage.source = getStyle("overSkin");
}
if(myDownImage)
{
myDownImage.source = getStyle("downSkin");
}
super.updateDisplayList(unscaledWidth, unscaledHeight);
}
}
--- In flexcoders@yahoogroups.com, Haykel BEN JEMIA <hayke...@...> wrote:
>
> Of course! The getStyle function calls need to be set in curly braces like:
>
> source.up="{getStyle('upSkin')}"
>
> Sorry!
>
> Haykel Ben Jemia
>
> Allmas
> Web & RIA Development
> http://www.allmas-tn.com
>
>
>
>
> On Tue, Apr 27, 2010 at 3:03 PM, bhaq1972 <mbha...@...> wrote:
>
> >
> >
> > Hasn't worked.
> >
> > --- In flexcoders@yahoogroups.com <flexcoders%40yahoogroups.com>, Haykel
> > BEN JEMIA <haykelbj@> wrote:
> > >
> > > If it does not work try replacing getStyle with hostComponent.getStyle.
> > >
> > > Haykel Ben Jemia
> > >
> > > Allmas
> > > Web & RIA Development
> > > http://www.allmas-tn.com
> > >
> > >
> > >
> > >
> > > On Tue, Apr 27, 2010 at 1:43 PM, bhaq1972 <mbhaque@> wrote:
> > >
> > > >
> > > >
> > > > Its a great idea but I haven't been able to make it work.
> > > >
> > > > I will try again after lunch (need a break)
> > > >
> > > >
> > > > --- In flexcoders@yahoogroups.com
> > > > <flexcoders%40yahoogroups.com><flexcoders%
> > 40yahoogroups.com>, Haykel
> >
> > > > BEN JEMIA <haykelbj@> wrote:
> > > > >
> > > > > Try this (not etsted):
> > > > >
> > > > > <s:SparkSkin
> > > > > xmlns:fx="http://ns.adobe.com/mxml/2009";
> > > > > xmlns:s="library://ns.adobe.com/flex/spark">
> > > > >
> > > > > <fx:Metadata>
> > > > > [HostComponent("spark.components.Button")]
> > > > > </fx:Metadata>
> > > > >
> > > > > <s:states>
> > > > > <s:State name="up" />
> > > > > <s:State name="over" />
> > > > > <s:State name="down" />
> > > > > <s:State name="disabled" />
> > > > > </s:states>
> > > > >
> > > > > <s:BitmapImage
> > > > > source.up="getStyle('upSkin')"
> > > > > source.over="getStyle('overSkin')"
> > > > > source.down="getStyle('downSkin')"
> > > > > />
> > > > >
> > > > > </s:SparkSkin>
> > > > >
> > > > >
> > > > > Haykel Ben Jemia
> > > > >
> > > > > Allmas
> > > > > Web & RIA Development
> > > > > http://www.allmas-tn.com
> > > > >
> > > > >
> > > > >
> > > > >
> > > > > On Tue, Apr 27, 2010 at 12:47 PM, bhaq1972 <mbhaque@> wrote:
> > > > >
> > > > > >
> > > > > >
> > > > > > I have a set of button skins which all look like the following skin
> > > > > >
> > > > > > <s:SparkSkin
> > > > > > xmlns:fx="http://ns.adobe.com/mxml/2009";
> > > > > > xmlns:s="library://ns.adobe.com/flex/spark">
> > > > > >
> > > > > > <fx:Metadata>
> > > > > > [HostComponent("spark.components.Button")]
> > > > > > </fx:Metadata>
> > > > > >
> > > > > > <s:states>
> > > > > > <s:State name="up" />
> > > > > > <s:State name="over" />
> > > > > > <s:State name="down" />
> > > > > > <s:State name="disabled" />
> > > > > > </s:states>
> > > > > >
> > > > > > <!-- UP ICON -->
> > > > > > <s:BitmapImage source="@Embed('assets/previous_default.png')"
> > > > > > includeIn="up" />
> > > > > >
> > > > > > <!-- OVER ICON -->
> > > > > > <s:BitmapImage source="@Embed('assets/previous_hover.png')"
> > > > > > includeIn="over" />
> > > > > >
> > > > > > <!-- DOWN ICON -->
> > > > > > <s:BitmapImage source="@Embed('assets/previous_down.png')"
> > > > includeIn="down"
> > > > > > />
> > > > > >
> > > > > > </s:SparkSkin >
> > > > > > ---
> > > > > > The only difference between all the skins is the image source they
> > use.
> > > > > > Is it possible to make this generic so I can define the image
> > source in
> > > > the
> > > > > > style sheet.
> > > > > >
> > > > > > Thanks
> > > > > >
> > > > > > Btw, In Flex 3, it was very easy to change the image skin in the
> > style
> > > > > > sheets using styleName. eg
> > > > > >
> > > > > > <mx:Button styleName="LeftArrow"/>
> > > > > > <mx:Button styleName="RightArrow"/>
> > > > > > <mx:Style>
> > > > > > .LeftArrow
> > > > > > {
> > > > > > upSkin: Embed(source="assets/previous_default.png");
> > > > > > overSkin: Embed(source="assets/previous_hover.png");
> > > > > > downSkin: Embed(source="assets/previous_down.png");
> > > > > > }
> > > > > > .RightArrow
> > > > > > {
> > > > > > upSkin: Embed(source="assets/right_default.png");
> > > > > > overSkin: Embed(source="assets/right_hover.png");
> > > > > > downSkin: Embed(source="assets/right_down.png");
> > > > > > }
> > > > > > </mx:Style>
> > > > > >
> > > > > >
> > > > > >
> > > > >
> > > >
> > > >
> > > >
> > >
> >
> >
> >
>
