0 Replies Latest reply on Nov 11, 2006 10:27 AM by oscar12321

    Sequenced state changes

    oscar12321
      Hi,

      I am a Flex newbie and my first atempt consists in making a test launcher. Each test is a custom control representing some aspect of the Flex that want to try.

      I created an Accordion to launch each test by category. Inside the accordion canvases i placed a link to launch the test.

      Each test will be a custom control inherited from the Panel control. Each time i press a link i want the old panel test to be replaced with the new one, and want some effects on the transition.

      One effect shold be launched when the old test is removed and another effect when the new test is added. For this pourpouse i have two states "testAdded" and "testRemoved" with the effects corresponding asociated effects.

      The code is this:

      <?xml version="1.0" encoding="utf-8"?>
      <mx:Application xmlns:mx=" http://www.adobe.com/2006/mxml" layout="absolute" creationComplete="initApplication()">
      <mx:Script>
      <![CDATA[
      import mx.controls.*;
      import mx.core.*;
      import mx.states.*;

      [Bindable]
      var currentTest: Panel;

      public function initApplication(): void
      {
      }

      public function launchTest(test: Panel): void
      {
      // Change to default state (no test control)
      if(currentState == "testAdded")
      {
      currentState = "testRemoved";
      }

      // Add thew new test
      addTest(test);
      }

      public function addTest(test: Panel): void
      {
      // New test control for binding
      currentTest = test;

      // Change the state to add the new test control
      currentState = "testAdded";
      }
      ]]>
      </mx:Script>
      <mx:Panel layout="absolute" title="Tests de Flex" top="50" bottom="50" left="40" width="249">
      <mx:Accordion left="0" right="0" top="0" bottom="0">
      <mx:Canvas label="Interfaz" width="100%" height="100%">
      <mx:LinkButton x="10" y="10" label="Formulario con validaciones" id="lkbFormtest" width="208" click="launchTest(new formtest())"/>
      </mx:Canvas>
      <mx:Canvas label="Integración con el servidor" width="100%" height="100%">
      <mx:LinkButton x="10" y="10" width="208" id="lkbAfmtest" label="Test básico con OpenAFM" click="launchTest(new afmtest())"/>
      </mx:Canvas>
      <mx:Canvas label="Prototipos e-trans" width="100%" height="100%">
      </mx:Canvas>
      </mx:Accordion>
      </mx:Panel>
      <mx:Canvas id="cvTest" top="50" bottom="50" right="40" borderStyle="none" left="319">
      </mx:Canvas>
      <mx:states>
      <mx:State name="testAdded">
      <mx:AddChild relativeTo="{cvTest}" target="{currentTest}"/>
      </mx:State>
      <mx:State name="testRemoved">
      <mx:RemoveChild target="{currentTest}"/>
      </mx:State>
      </mx:states>
      <mx:transitions>
      <mx:Transition id="trTestIn" fromState="*" toState="testAdded">
      <mx:Zoom target="{currentTest}" zoomHeightFrom="0.0" zoomWidthFrom="0.0" zoomHeightTo="1.0" zoomWidthTo="1.0" duration="800"/>
      </mx:Transition>
      <mx:Transition id="trTestOut" fromState="testAdded" toState="testRemoved">
      <mx:Zoom target="{currentTest}" zoomHeightFrom="1.0" zoomWidthFrom="1.0" zoomHeightTo="0.0" zoomWidthTo="0.0" duration="800"/>
      <!--<mx:Dissolve target="{cvTest}" alphaFrom="1.0" alphaTo="0.0" duration="4000"/>-->
      </mx:Transition>
      </mx:transitions>


      </mx:Application>

      The problem is that i only get the effect when adding the test but not when reomving it. I think that the effects are not sequentially launched.

      Whats wrong? Any ideas?

      Thanks in advance.