5 Replies Latest reply on Aug 27, 2007 7:25 AM by peterent

    Sliding canvases between states

    jkahn117 Level 1
      We are building an application with multiple steps (similar to a wizard). Between each step, we would like the panel from the current step to slide to the left and the new panel to slide in from the right. The tricky part is that we would like to define a single reusable transition to handle this as opposed to one per step.

      We have the effects figured out (using Move, AddChildAction, RemoveChildAction); however, the current panel simply disappears. It seems that the state change is occurring before the transition is finished. We have been trying to setup the targets for the transition effects from the currentStateChanging event...is this to late? Is there a better time in the lifecycle to do this?

      Is there a better design? We have discussed eliminating states and just adding child elements as necessary as well, but would need to find a way to trigger the change (we are using Cairngorm).

      Thanks!
        • 1. Re: Sliding canvases between states
          levancho Level 3
          have you tried enterState/exitState events?
          • 2. Re: Sliding canvases between states
            jkahn117 Level 1
            We did try, however, we still have the same problem. The state change seems to occur (i.e. the existing panel drops out) before the transition occurs. Any thoughts? Has anyone seen any samples similar to this online?
            • 3. Re: Sliding canvases between states
              peterent Level 2
              For a wizard, I'd use a ViewStack. Something like this:

              <?xml version="1.0" encoding="utf-8"?>
              <mx:Application xmlns:mx=" http://www.adobe.com/2006/mxml" layout="absolute">

              <mx:Move id="slideLeft" xFrom="0" xTo="-500" />
              <mx:Move id="slideRight" xFrom="500" xTo="0" />

              <mx:ViewStack x="78" y="123" id="viewstack1" width="404" height="349">
              <mx:Panel label="panel1" width="100%" height="100%" id="panel1" title="Panel 1"
              showEffect="slideRight" hideEffect="slideLeft">
              </mx:Panel>
              <mx:Panel label="panel2" width="100%" height="100%" id="panel2" title="Panel 2"
              showEffect="slideRight" hideEffect="slideLeft">
              </mx:Panel>
              <mx:Panel label="panel3" width="100%" height="100%" title="Panel 3" id="panel3"
              showEffect="slideRight" hideEffect="slideLeft">
              </mx:Panel>
              <mx:Panel label="panel4" width="100%" height="100%" title="Panel4"
              showEffect="slideRight" hideEffect="slideLeft">
              </mx:Panel>
              </mx:ViewStack>

              <mx:LinkBar x="78" y="80" dataProvider="{viewstack1}">
              </mx:LinkBar>

              </mx:Application>
              • 4. Sliding canvases between states
                jkahn117 Level 1
                How is memory allocation handled for a ViewStack? Are all of the components rendered at runtime or as needed? Can this become a problem?
                • 5. Re: Sliding canvases between states
                  peterent Level 2
                  The answer is both: ViewStack's creationPolicy can be set to "auto" (the default) which creates the children's UI controls when needed; set to "all" which creates all the children's UI up front.

                  The children themselves are always created, but if creationPolcy="auto" any controls (like TextInput, Button) are NOT created until the contain is requested to be visible