Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 7 of 7
  1. #1
    Regular Coder
    Join Date
    Feb 2009
    Location
    Worcester
    Posts
    172
    Thanks
    13
    Thanked 6 Times in 6 Posts

    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:

    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:
    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

    Many thanks in advance all!

  • #2
    New to the CF scene
    Join Date
    Mar 2009
    Posts
    3
    Thanks
    0
    Thanked 1 Time in 1 Post
    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?

  • #3
    Regular Coder
    Join Date
    Feb 2009
    Location
    Worcester
    Posts
    172
    Thanks
    13
    Thanked 6 Times in 6 Posts
    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!

    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!

    Thanks

  • #4
    New to the CF scene
    Join Date
    Mar 2009
    Posts
    3
    Thanks
    0
    Thanked 1 Time in 1 Post
    I am trying to do something similar (which is how I found your thread) so I will also post when I figure it out.

  • #5
    Regular Coder
    Join Date
    Feb 2009
    Location
    Worcester
    Posts
    172
    Thanks
    13
    Thanked 6 Times in 6 Posts
    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?


  • #6
    New to the CF scene
    Join Date
    Mar 2009
    Posts
    3
    Thanks
    0
    Thanked 1 Time in 1 Post
    What about this

    Code:
    <?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>
    Last edited by slanton; 03-28-2009 at 03:53 AM.

  • Users who have thanked slanton for this post:

    loki421 (03-30-2009)

  • #7
    Regular Coder
    Join Date
    Feb 2009
    Location
    Worcester
    Posts
    172
    Thanks
    13
    Thanked 6 Times in 6 Posts
    That works lovely!

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

    Great work


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •