Flex Code Behind issue

[firdosh]

Hey guys,
so I have created a simple flex proj

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" themeColor="#0EFF02">
<mx:Script>
<![CDATA[
private function onOver(evt:Event):void{
trace("onOver : " +evt.currentTarget );
test.setStyle("backgroundColor",0xff00ff);
}

private function onOut(evt:Event):void{
trace("onOut : " +evt.currentTarget );
test.setStyle("backgroundColor",0xffff00);
}
]]>
</mx:Script>
<mx:Canvas id="test" x="118" y="136" width="443" height="133" themeColor="#099FFF" backgroundColor="#D70000" rollOver="onOver(event);" rollOut="onOut(event);">
<mx:Button x="39" y="35" label="Button"/>
</mx:Canvas>
</mx:Application>


So basically all the code above does is changes the backgroundColor of the Canvas. It works fine

Now if I make a MXML Component using the Code Behind Method


<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" themeColor="#0EFF02" xmlns:ns1="item.*">
<ns1:ListItem x="80" y="48"/>
</mx:Application>




<item:CListItem xmlns:mx="http://www.adobe.com/2006/mxml" width="400" height="300" xmlns:item="item.*">
<mx:Button x="65" y="61" label="Button"/>
</item:CListItem>



package item
{
import flash.events.MouseEvent;
import mx.containers.Canvas;
import mx.events.FlexEvent;

public class CListItem extends Canvas
{
public function CListItem()
{
super();
this.addEventListener(FlexEvent.CREATION_COMPLETE, onComponentLoaded);
}

private function onMouseOver(evt:MouseEvent):void{
trace("CListItem.onMouseOver :");
this.setStyle("backgroundColor",0xff00ff);
}

private function onMouseOut(evt:MouseEvent):void{
trace("CListItem.onMouseOut");
this.setStyle("backgroundColor",0xffff00);
}

private function onComponentLoaded(evt:FlexEvent):void{
this.addEventListener(MouseEvent.MOUSE_OVER, onMouseOver);
this.addEventListener(MouseEvent.MOUSE_OUT, onMouseOut);
}
}
}


Now when I mouse over the Button component the onMouseOut function gets called and there is a flicker in the backgroundColor.

If I dont use the Code Behind Method then the onMouseOut function does not get called when I rollOver the button.

Can anyone explain this strange behavior? I have attached the example source if anyone wants to test it.

Thanks
Cheers
Firdosh

[kifah]

Hello firdosh,

here is the thing:
in CListItem Class
replace this:

this.addEventListener(MouseEvent.MOUSE_OVER, onMouseOver);
this.addEventListener(MouseEvent.MOUSE_OUT, onMouseOut);

with:

this.addEventListener(MouseEvent.ROLL_OVER, onMouseOver);
this.addEventListener(MouseEvent.ROLL_OUT, onMouseOut);


the problem with the flicker code that the events:
MOUSE_OVER
MOUSE_OUT

they are executed when the mouse is totally over/out the target object,
i.e if you have a child on this target the the event out will be dispatched
when mouse over the child,
then the over event will dispatched again that's what causes Flicking...

anyway the code above is the solution, and there is another solution:
It's to set the mouseChildren property to false in the target object (but this will disaple any MOUSE event in the children ok?...

Regards
Kifah ...;)