5 Replies Latest reply on May 30, 2011 3:55 AM by RonnieCR7

    Event handler doesn't work for a Canvas inside a canvas (Possible bug in Flex 4)

    RonnieCR7

      Hi Guys,
      I have a canvas sitting inside another canvas. When i try to catch the mouseClick event in the child canvas, im not able to do it. When i change the child canvas component to a 'Panel', the event handler works perfectly fine. Any suggestions/solutions?

        • 1. Re: Event handler doesn't work for a Canvas inside a canvas (Possible bug in Flex 4)
          miguel8312 Level 3

          can you post some of you code so that i can try it?

          i love to help but im not sure i follow.

          Miguel

          • 2. Re: Event handler doesn't work for a Canvas inside a canvas (Possible bug in Flex 4)
            drkstr_1 Level 4

            I bet you are mixing spark containers (such as a Group) with halo containers (such as a Canvas). Strange things happen when you don't follow the rules.

             

            There is no way to help without seeing some code.

            • 3. Re: Event handler doesn't work for a Canvas inside a canvas (Possible bug in Flex 4)
              RonnieCR7 Level 1

              Hi Miguel & drkstr,

              Please find the code below. The problem with it is, my event listener doesnt work for the child canvas when my sdk is set to 4.0. It does work when i set it to 3.5 though.

               

              Drkstr,

              I have not mixed the spark containers with halo containers.

               

              TestProject.mxml:

               

              <?xml version="1.0" encoding="utf-8"?>

              <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" minWidth="955" minHeight="600" xmlns:local="*">

               

              <local:CanvasComp/>

               

              </mx:Application>

               

              CanvasComp.mxml:

               

              <?xml version="1.0" encoding="utf-8"?>

              <mx:Canvas xmlns:mx="http://www.adobe.com/2006/mxml" width="800" height="600"

                 creationComplete="canvas2_creationCompleteHandler(event)">

               

              <mx:Script>

              <![CDATA[

              import mx.controls.Alert;

              import mx.events.FlexEvent;

              protected function canvas1_clickHandler(event:MouseEvent):void

              {

              Alert.show("Clicked");

              }

               

              protected function canvas2_creationCompleteHandler(event:FlexEvent):void

              {

              // TODO Auto-generated method stub

              //addEventListener(MouseEvent.CLICK, canvas1_clickHandler, true);

              }

               

              ]]>

              </mx:Script>

               

               

              <mx:Canvas id="kenaCan" width="50%" height="50%" borderStyle="solid" borderColor="black" click="canvas1_clickHandler(event)" />

               

               

              </mx:Canvas>

              • 4. Re: Event handler doesn't work for a Canvas inside a canvas (Possible bug in Flex 4)
                miguel8312 Level 3

                ok a few things you should know... it is recomended to use the spark components when working with flash builder 4 thought the mx components are available spark is much litghter in weight. also if you want to use the equivalent of a canvas in spark then you want to use a "group" but ill warn you they dont support inline styles, a border container looked more appropiate for what you were trying to do below.  However. i did fix your code for flex 4.0

                look below.

                 

                 

                component:

                 

                <?xml version="1.0" encoding="utf-8"?>
                <mx:Canvas xmlns:fx="http://ns.adobe.com/mxml/2009" 
                     xmlns:s="library://ns.adobe.com/flex/spark" 
                     xmlns:mx="library://ns.adobe.com/flex/mx"
                    creationComplete ="canvas2_creationCompleteHandler(event)">
                 <fx:Declarations>
                  <!-- Place non-visual elements (e.g., services, value objects) here -->
                 </fx:Declarations>
                 
                 <fx:Script>
                  <![CDATA[
                 import mx.controls.Alert;
                 import mx.events.FlexEvent;
                 
                 public function canvas1_clickHandler(event:MouseEvent):void
                  {
                 Alert.show("Clicked");
                  }
                 
                 public function canvas2_creationCompleteHandler(event:Event):void
                 
                 {// TODO Auto-generated method stub//
                 kenaCan.addEventListener(MouseEvent.CLICK, canvas1_clickHandler);
                 }
                  
                  ]]>
                 
                 </fx:Script>  
                 <mx:Canvas id="kenaCan" 
                      width="400" 
                      height="300" 
                      borderStyle="solid"
                      borderColor="black"
                      backgroundColor="white"
                      />
                
                
                
                </mx:Canvas>
                


                application:

                 

                <?xml version="1.0" encoding="utf-8"?>
                <s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
                      xmlns:s="library://ns.adobe.com/flex/spark"
                      xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600"
                      xmlns:local1="local.*">
                <fx:Declarations>
                  <!-- Place non-visual elements (e.g., services, value objects) here -->
                </fx:Declarations>

                <local1:canvas/>

                 

                </s:Application>
                
                

                 

                 

                 

                if this post answers your question please mark it as such thanks

                1 person found this helpful
                • 5. Re: Event handler doesn't work for a Canvas inside a canvas (Possible bug in Flex 4)
                  RonnieCR7 Level 1

                  Hi Miguel,

                  Your code works. But when i remove the 'backgroundColor'  parameter from inside the Canvas tag, the event listener fails to work. The backgroundColor is somehow strangely connected to the container's event listener's working. Please do check it.