setStyle function not working in Repeater?

Hi guys!

I have a funtion that changes the background colour of a canvas to a shade of blue on rollover and displays a button to allow the user to see more details, here's the code:


private function canvasRollover(event:MouseEvent):void
{
canvas1.setStyle ("backgroundColor", 0x74FEF3);
button1.visible = true;
}
private function canvasRollout(event:MouseEvent):void
{
canvas1.setStyle ("backgroundColor", 0xFFFFFF);
button1.visible = false;
}


This works fine until i put the canvas inside a repeater, then i get a runtim error of "setStyle is not a function"

Any ideas of a workaround for this or a possible reason as to why this is happening? Maybe someone else has had this same problem? Is there a bug in Flex Builder 3?

Just for reference here's the repeater code:

<mx:Repeater id="vehicleRepeater" dataProvider="{myService.getData.lastResult}">

<mx:Canvas width="200" height="200" x="49" y="22" id="canvas1"
backgroundColor="#ffffff" backgroundAlpha="0.35" alpha="1.0"
rollOver="canvasRollover(event)" rollOut="canvasRollout(event)">
<mx:Button id="button1" x="67" y="168" label="Button" visible="false"/>
<mx:Image id="image1" x="10" y="10" source="assets/myImage.jpg" width="180" height="150" />
</mx:Canvas>
</mx:Repeater>


Any suggestions would be gratefully recieved :D

Many thanks in advance all!

I could be wrong but in giving the canvas an id (canvas1) inside a repeater..doesn't that mean that you will have multiple canvas's with the same id?

mmm, yeah i suppose i would, but i need to give it an id in order to apply the style..... :s

I have found a bit of a way around this, using name spaces to call another component within this on, and within that one was another one that contained the animation, it was all very complex and not very practical, and ended up being a little 'jumpy', so scrapped the idea! :p

But this is a dilemma i'm yet to fully resolve. I'm kinda tempted to post the 3 components worth of code here for others to see, but like i said, it's not exactly a great solution...

I'll keep playing with it and if i ever find a solution i'll post it here in all it's glory! :D

Thanks :)

I am trying to do something similar (which is how I found your thread) so I will also post when I figure it out.

It can be done with the TileList, think that auto defaults to blue anyway, but from my experiance (which isn't much so could be wrong), you haven't got much control over the styling of it, regarding borders of columns etc, that's why i was trying to use the canvas or something simular.

So you might want to give that a go if you haven't already?

:)

What about this


<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
<mx:Script>
<![CDATA[
[Bindable]
private var myArray:Array=[1,2,3,4];
private function canvasRollover(event:MouseEvent):void
{
for(var i:int=0;i<canvas1.length;i++)
{
if(canvas1[i]==event.currentTarget)
{
canvas1[i].setStyle ("backgroundColor", 0x74FEF3);
button1[i].visible = true;
}

}

}
private function canvasRollout(event:MouseEvent):void
{
for(var i:int=0;i<canvas1.length;i++)
{
if(canvas1[i]==event.currentTarget)
{
canvas1[i].setStyle ("backgroundColor", 0xFFFFFF);
button1[i].visible = false;
}

}
}
]]>
</mx:Script>

<mx:Tile direction="horizontal" borderStyle="inset"
horizontalGap="10" verticalGap="15"
paddingLeft="10" paddingTop="10" paddingBottom="10" paddingRight="10">

<mx:Repeater id="vehicleRepeater" dataProvider="{myArray}">

<mx:Canvas width="200" height="200" id="canvas1"
backgroundColor="#ffffff" backgroundAlpha="0.35" alpha="1.0"
rollOver="canvasRollover(event)" rollOut="canvasRollout(event)" borderStyle="solid" borderColor="#0E91ED">
<mx:Label text="{vehicleRepeater.currentItem}"/>
<mx:Button id="button1" x="67" y="168" label="Button" visible="false"/>

</mx:Canvas>
</mx:Repeater>
</mx:Tile>
</mx:Application>

That works lovely!

Very nice solution, thanks, i'll try incorporating that.

Great work :D