3 Replies Latest reply on Jan 21, 2008 1:03 PM by peterent

    Need advice on multiple view stacks

    Handycam Level 1
      In my current app, I have my main view stack displaying 2 components -- and intro and a step 1.

      In Step 1, the user will decide on 1 of 2 different projects, and then I want the view stack to "refresh" with just the steps of the chosen project.

      For example, if "make a birdhouse" and "make a table" were the choices, if the user picks the birdhouse the app will now only display the steps of the birdhouse tutorial.

      I'm sing 3 XML files, one with the intro data and one each for each of the tutorials. I load the first, and depending on the choice load the appropriate second one.

      Would this be best handled with States, or should I assign different values to the view stack, or what?

      Thanks.

        • 1. Re: Need advice on multiple view stacks
          peterent Level 2
          It looks like you are dynamically generating the children of the ViewStack, so I don't think States would be the best idea for you. I'm sure you could do it, but I would just remove the current children and then add the new children for the appropriate task.
          • 2. Re: Need advice on multiple view stacks
            Handycam Level 1
            Can you please elaborate? I've been looking in my various Flex books and can't find anything on dynamically adding and removing children of a viewStack.
            • 3. Re: Need advice on multiple view stacks
              peterent Level 2
              Sure.

              Let's say you have your initial 2 ViewStack children:

              <mx:ViewStack id="stack">
              <Step1 id="step1" />
              <Step2 id="step2" tutorial="changeTutorial(event)" />
              </mx:ViewStack>

              On Step2 you have a custom event, tutorial. When this event is triggered it will have the information about which steps should be created next.

              private function changeTutorial( event:TutorialEvent ) : void
              {
              // first remove the two original steps
              stack.removeChild(step1);
              stack.removeChild(step2);

              // now you determine which steps to add and then add them:

              var step:Step = new Step();
              stack.addChild(step);
              }

              In other words, use stack.removeChild( component ) and stack.addChild( component );