0 Replies Latest reply on Apr 6, 2008 2:39 PM by firdosh

    Flex Code Behind Issue

    firdosh Level 1
      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

      Main.mxml
      <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>


      ListItem.mxml
      <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>



      CListItem.as

      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?
      Thanks

      Cheers
      Firdosh