7 Replies Latest reply on Feb 19, 2007 8:38 AM by JohnLeger

    is this a stupid question?

    darrylfrith
      I'm new to flex and I'm having trouble understanding how viewstack works.

      I have three mxml files one is called main and the others are chart1 and chart2.

      All I want to do is have a couple of buttons on main.mxml that changes the view from chart1 to chart2 but I can't find any documentation on how to do this. Here is my attempt:

      <?xml version="1.0" encoding="utf-8"?>
      <mx:Application xmlns:mx=" http://www.adobe.com/2006/mxml" xmlns="*" layout="absolute" xmlns:local="*">
      <mx:Button id="Button1"
      label="Chart 1"
      click="viewstack1.selectedChild=chart;"/>

      <mx:Button id="Button2"
      label="Chart 2"
      click="viewstack1.selectedChild=charts;" x="115"/>


      <mx:ViewStack x="269" y="276" id="viewstack1" width="400" height="400">
      <mx:Canvas id="chart" label="chart">
      <local:chart2/>
      </mx:Canvas>

      <mx:Canvas id="charts" label="Charts">
      <local:chart2/>
      </mx:Canvas>

      </mx:ViewStack>
      </mx:Application>

      Can someone please help me.
        • 1. Re: is this a stupid question?
          dimival Level 1
          Try using selectedIndex instead:

          <mx:Button id="Button1"
          label="Chart 1"
          click="viewstack1.selectedIndex="0"/>

          <mx:Button id="Button2"
          label="Chart 2"
          click="viewstack1.selectedIndex="1" x="115"/>


          And no, it is not stupid :)
          • 2. Re: is this a stupid question?
            JohnLeger
            I would never use a Viewstack in that manner. A Viewstack in my understanding cannot span accross a few mxml files. Try using yourview stack ona single mxml file then your code will work. Whatever you put on each of the canvases will only show up when it is selected. You can use selectedChild or selectedIndex, either will work. Also do some research into using State management it sounds like it's something that may work well in your situation.

            May I also suggest you check out www.Lynda.com for some training using Flex 2. You can subscribe monthy or yearly. It's currently $25 a month for unlimited access to all their video tutorials. They have a massive collection of training videos for all kinds of software. Well worth the $25!

            John
            • 3. Re: is this a stupid question?
              dave cragg Level 2
              According to the docs, selectedChild can only be used from within ActionScript code and not MXML. However, I've found selectedChild can be much more friendly than selectedIndex if you're adding and removing viewstack pages during development. So you might want to have the button's click property point to a function that uses selectedChild to navigate to the viewstack page.

              I notice that in the code above, both viewstack pages contain the same external component (<local:chart2/>). Was that intentional?

              John, do you have a reason for not recommending putting viewstack components in separate mxml files. I've been doing this a lot, using the following structure;

              <mx:ViewStack ....>
              <mycomp:startpage id="startPage"/>
              <mycomp:testpage id="testPage"/>
              <mycomp:resultspage id="resultsPage"/>
              ... etc....
              </mx:ViewStack>

              I've had no problems so far, but I'd be glad to hear of any gotchas.
              • 4. Re: is this a stupid question?
                peterent Level 2
                I don't see anything wrong with your code except both Canvas children of your ViewStack are chart2 components. Maybe if one is chart1 and the other chart2??? I would also give them more unique id's than "chart" and "charts".

                Your use of ViewStack with external components is perfectly fine. If the components are of sufficient complexity then you'll want to have them defined in their own MXML or AS files. Also, if your components' root tags are containers, such as Canvas, you don't need to wrap them again in a container.

                You might also want to make the immediate children of the ViewStack have width="100%" and height="100%" so they will the ViewStack's space. Normally the Canvas will just shrink-wrap its components, which may be what you want.

                Finally, you can use selectedChild or selectedIndex, whichever makes writing the code easier.
                • 5. Re: is this a stupid question?
                  darrylfrith Level 1
                  Thanks guys,

                  It turns out it was a stupid question. The code works now the way I had it. the problem was that I had application tags in the child mxml files. I changed them to <MX:Canvas and the error messages went away.

                  I should probably post this as a separate topic but now that it's working does anyone know how to apply a transition when I call the Child canvas like a fade or a wipeup.

                  Thanks again for your help
                  • 6. Re: is this a stupid question?
                    peterent Level 2
                    This will make the items wipeUp:

                    <mx:WipeUp id="wipeUp" />
                    <mx:ViewStack ... >
                    <mx:Canvas hideEffect="wipeUp" ... >...</mx:Canvas>
                    <mx:Canvas hideEffect="wipeUp" ...>...</mx:Canvas>
                    ...
                    </mx:ViewStack>
                    • 7. is this a stupid question?
                      JohnLeger Level 1
                      dave cragg,

                      Above you stated, "According to the docs, selectedChild can only be used from within ActionScript code and not MXML."

                      It is perfectly okay to refer to the selectedChild in your click event. For example...

                      If you have three canvases with ids of:

                      <mx:ViewStack id="myViewstack">

                      <mx:Canvas id="home">
                      </mx:Canvas>

                      <mx:Canvas id="moreInfo">
                      </mx:Canvas>

                      <mx:Canvas id="contactUs">
                      </mx:Canvas>

                      </mx:ViewStack>

                      It is perfectly fine to have three buttons with click events like the following...

                      <mx:Button label="Home" click="myViewStack.selectedIndex=0"/>

                      <mx:Button label="More Info" click="myViewStack.selectedIndex=1"/>

                      <mx:Button label="Contact Us" click="myViewStack.selectedIndex=2"/>

                      OR...

                      <mx:Button label="Home" click="myViewStack.selectedChild=home"/>

                      <mx:Button label="More Info" click="myViewStack.selectedChild=moreInfo"/>

                      <mx:Button label="Contact Us" click="myViewStack.selectedChild=contactUs"/>

                      Personally I like using the selectedChild because it is easier fore me to remember the ids of my canvases than it is to remember their order.

                      Daryll, if any of these provided the solution it would be great if you could let us know. It helps those of us who enjoy helping others to know if we are on the right track. It also helps those who may have the same issue clearly determine the correct solution to their own issues. For this reason Adobe provides the "Click to mark as the answer" link with every post. When you choose a post as the solution it puts a check mark next to that post.

                      John

                      Hope this helps!