2 Replies Latest reply on May 25, 2006 12:41 PM by ur_dtrain

    More on State behaviors

    ur_dtrain Level 1
      With the following code I overwrite the click behavior and pass control to a child container, at least in theory. Problem is, it does not work:

      <?xml version="1.0" encoding="utf-8"?>
      <mx:Application xmlns:mx=" http://www.adobe.com/2006/mxml" layout="absolute" width="100%" height="100%" backgroundColor="#FFFFFF">
      <mx:states>
      <mx:State name="open1">
      <mx:SetProperty target="{cat1}" name="width" value="390"/>
      <mx:SetProperty target="{cat1}" name="height" value="390"/>
      <mx:SetStyle target="{cat1}" name="left" value="0"/>
      <mx:SetStyle target="{cat1}" name="top" value="0"/>
      <mx:SetEventHandler target="{cat1}" name="click"/>
      <mx:SetProperty target="{cat1}" name="useHandCursor" value="false"/>
      <mx:SetProperty target="{cat1}" name="mouseEnabled" value="false"/>
      <mx:SetProperty target="{cat1}" name="buttonMode" value="false"/>
      <mx:AddChild relativeTo="{cat1}" position="lastChild">
      <mx:Canvas x="95" y="100" width="200" height="200" click="{currentState='';}" backgroundColor="#ffffff" buttonMode="true" mouseEnabled="true" useHandCursor="true">
      </mx:Canvas>
      </mx:AddChild>
      </mx:State>
      </mx:states>
      <mx:Canvas id="mystage" width="390" height="390" horizontalCenter="0" resizeEffect="Resize">
      <mx:Canvas id="cat1" left="60" top="60" width="150" height="150" backgroundColor="#999999" click="{currentState='open1';}" useHandCursor="true" buttonMode="true" mouseEnabled="true" mouseChildren="true"/>
      </mx:Canvas >
      </mx:Application>
        • 1. Re: More on State behaviors
          ExMan
          You don't need to override click behavior in this case.

          The problem is, you are adding the child container to the main container and both define click event. By default, event propagates so when you click the child container, click event of parent container also fires and it reverts back the currentState.

          To fix this, you need to tell the child container to not propagate the event by setting event.stopPropagation() to false. So your code would look like:

          <mx:AddChild relativeTo="{cat1}" position="lastChild">
          <mx:Canvas x="95" y="100" width="200" height="200" click="currentState='';event.stopPropagation()" backgroundColor="#ffffff" buttonMode="true" mouseEnabled="true" useHandCursor="true">
          </mx:Canvas>
          </mx:AddChild>

          BTW, you don't have to define event handlers in curly braces.

          Thanks,
          -Ashish


          • 2. Re: More on State behaviors
            ur_dtrain Level 1
            That's exactly what I was looking for. Thanks! I've been trying to reproduce in pure mxml what I've previously done in AS only.