22 Replies Latest reply on Sep 26, 2008 8:53 AM by Gregory Lafrance

    Changing States or View Stack?

    Holomew Level 1
      Okay, I know this probably sounds ridiculously simple but I can't find any documentation to answer my question.

      What is the best way to design a four or five "page" project. Each of these "pages" are quite different in layout and content but I'm not sure that I should be adding and/or removing so many child aspects in different states.

      Would you do this in different states or can you just do separate mxml documents for each "page" (and if so, can it still be compiled into just one swf)?


      Thanks!
        • 1. Re: A newbie question
          MotionMaker Level 1
          You could look at ViewStack or TabBar or TabNavigator prebuild components for design ideas.

          http://examples.adobe.com/flex3/componentexplorer/explorer.html
          • 2. Re: A newbie question
            ntsiii Level 3
            First, please use a descriptive subject, you will get much better response that way than by whining about your ignorace.

            I use states for smaller changes, but they are kind of messy for bigger stuff. For major changes and navigation I advise ViewStack. Viewstack is very easy to code and use.

            Implement each view as an mxml component[Optional. You can also creeate the views in-line, but this is not best practice], and declare each as a child of ViewStack. Control the displayed view by setting the ViewStack.selectedIndex. That simple.

            Note, mxml components do not use the mx:Application as the root tag. That creates a, duh, Application. Use one of the containers as the root tag, like Canvas, or VBox, etc.

            There are other architectural options, including SWFLoader and Modules, but start with a normal component architecture until you see a reason to do otherwise.

            Tracy
            • 3. Re: Changing States or View Stack?
              Holomew Level 1
              >>>Implement each view as an mxml component[Optional. You can also creeate the views in-line, but this is not best practice], and declare each as a child of ViewStack. Control the displayed view by setting the ViewStack.selectedIndex. That simple.

              Could you provide a sample of this? I can set up the ViewStack but I'm not sure how to call the components like you mentioned.
              • 4. Re: Changing States or View Stack?
                ntsiii Level 3
                Example:
                <mx:ViewStack id="vsMain" >
                <MyComp1 ... />
                <MyComp2 ... />
                <mx:Canvas >
                <mx:Label text="This view is an in-line implemented Canvas" />
                </mx:Canvas>
                </mx:ViewStack>

                MyComp1.mxml:
                <mx:Canvas >
                <mx:Label text="This is MyComp1" />
                </mx:Canvas>
                • 5. Re: Changing States or View Stack?
                  Holomew Level 1
                  Thanks very much but I mean, more specifically, how to call the components.

                  For example, if my component is saved as MyComponent1.mxml, I can't just add it to my view stack as <MyComponent1.mxml/>. How do I call that mxml file into the view stack?

                  (Does that make sense?)
                  • 6. Re: Changing States or View Stack?
                    Holomew Level 1
                    Actually, I was able to simply drag-and-drop this from my Custom Component folder right into the stage/Canvas. Excellent!
                    • 7. Re: Changing States or View Stack?
                      ntsiii Level 3
                      Yes, you do add it almost exactly like that. That example assumes the component is in the same folder as the Application file. You also have to declare the local namespace in the Application tag, xmlns="*".

                      You do not specify the file extension. Flex compiles the mxml file into an .as component first, then compiles that into the swf. So inside your viewstack tags you would use:
                      <MyComponent1/>

                      Look at the generated code the drag/drop created.

                      Tracy
                      • 8. Re: Changing States or View Stack?
                        Holomew Level 1
                        Yup, you are correct.

                        However, I can't figure out what syntax to use to navigate to another viewstack location from a button located in another viewstack.

                        Let's say I have a button located in my "Home" canvas that the click needs to move the navigation to my "One" (pageOne) page. What do I set the "click=" to?
                        • 10. Re: Changing States or View Stack?
                          Holomew Level 1
                          There's no way to just set click equal to the viewstack page you want?

                          e.g.

                          click="mainMenu='home'"

                          I'm thinking it's just a syntax issue, not an issue of having to add a function.
                          • 11. Re: Changing States or View Stack?
                            Gregory Lafrance Level 6
                            click="myViewStack.selectedChild='home'"
                            • 12. Re: Changing States or View Stack?
                              Level 7

                              "Greg Lafrance" <webforumsuser@macromedia.com> wrote in message
                              news:gbgekl$c0a$1@forums.macromedia.com...
                              > click="myViewStack.selectedChild='home'"

                              I think the quotes around 'home' will prevent Flex from seeing it as an ID.
                              If it doesn't work with the single quotes around it, try it without.

                              HTH;

                              Amy


                              • 13. Re: Changing States or View Stack?
                                Holomew Level 1
                                Thank you both but I'm getting an "Access of undefined property" for both the "myViewStack" and the "home" part (or in my specific case, "mainMenu" and "material").

                                Is this because the ViewStack is in my application (not my components) so it's not finding the reference to it??
                                • 14. Re: Changing States or View Stack?
                                  Level 7

                                  "Holomew" <webforumsuser@macromedia.com> wrote in message
                                  news:gbgjf0$huj$1@forums.macromedia.com...
                                  > Thank you both but I'm getting an "Access of undefined property" for both
                                  > the
                                  > "myViewStack" and the "home" part (or in my specific case, "mainMenu" and
                                  > "material").
                                  >
                                  > Is this because the ViewStack is in my application (not my components) so
                                  > it's
                                  > not finding the reference to it??

                                  That's a Q3
                                  http://www.magnoliamultimedia.com/flex_examples/Amys_Flex_FAQ.pdf


                                  • 15. Re: Changing States or View Stack?
                                    Gregory Lafrance Level 6
                                    Where is the ViewStack and home? home should be the id for the component in the main app. Need more info.
                                    • 16. Changing States or View Stack?
                                      Holomew Level 1
                                      >>>Where is the ViewStack and home? home should be the id for the component in the main app. Need more info.

                                      The ViewStack is in the main application, not in a component.

                                      Also,

                                      On your example, on these three lines:

                                      <comp:Home id="home"/>
                                      <comp:ContactInfo id="contactInfo"/>
                                      <comp:RequestInfo id="requestInfo"/>

                                      There are type is not found or is not a compile-time constant.
                                      • 17. Re: Changing States or View Stack?
                                        MotionMaker Level 1
                                        I am not surprised you were able to run the application without a problems dialog for
                                        click="myViewStack.selectedChild='home'"

                                        Try

                                        click="{myViewStack.selectedChild='home'"}

                                        Also the debugger will help you zero in on lines of code that fail.
                                        • 18. Re: Changing States or View Stack?
                                          Gregory Lafrance Level 6
                                          As long as the components are in this subdirectory:

                                          components/viewstackFormChildren

                                          and as long as the main app has this in the Application tag:

                                          xmlns:comp="components.viewstackFormChildren.*"

                                          you should be all set.
                                          • 19. Re: Changing States or View Stack?
                                            Holomew Level 1
                                            quote:

                                            Originally posted by: MotionMaker
                                            I am not surprised you were able to run the application without a problems dialog for
                                            click="myViewStack.selectedChild='home'"

                                            Try

                                            click="{myViewStack.selectedChild='home'"}

                                            Also the debugger will help you zero in on lines of code that fail.


                                            I'm still getting "access of undefined property mainMenu". :( Do I need to include this in the component somehow? The mainMenu is in my main page application and this is a component:
                                            • 20. Re: Changing States or View Stack?
                                              Holomew Level 1
                                              quote:

                                              Originally posted by: Greg Lafrance
                                              As long as the components are in this subdirectory:

                                              components/viewstackFormChildren

                                              and as long as the main app has this in the Application tag:

                                              xmlns:comp="components.viewstackFormChildren.*"

                                              you should be all set.


                                              Thanks Greg. I got it to work however, what I'm asking is if you have a button that is in one of these components, how do you set that click on that button to navigate the main menu?

                                              For example, if one of your submit buttons navigated to the home page instead of displaying a message.
                                              • 21. Re: Changing States or View Stack?
                                                Level 7

                                                "Holomew" <webforumsuser@macromedia.com> wrote in message
                                                news:gbiqng$cid$1@forums.macromedia.com...
                                                >
                                                quote:

                                                Originally posted by: MotionMaker
                                                > I am not surprised you were able to run the application without a problems
                                                > dialog for
                                                > click="myViewStack.selectedChild='home'"
                                                >
                                                > Try
                                                >
                                                > click="{myViewStack.selectedChild='home'"}
                                                >
                                                > Also the debugger will help you zero in on lines of code that fail.

                                                >
                                                > I'm still getting "access of undefined property mainMenu". :( Do I need to
                                                > include this in the component somehow? The mainMenu is in my main page
                                                > application and this is a component:

                                                PLEASE look at question 3 at the FAQ link I posted. I didn't post it for
                                                my health.


                                                • 22. Re: Changing States or View Stack?
                                                  Gregory Lafrance Level 6
                                                  As Amy's FAQ mentions, you could set the main app ViewStack, like Application.application.myViewStack.myMainView

                                                  or you could dispatch a custom event to have a more loosely coupled app. It is a good practice though not always strictly necessary. It depends on your app, its size and scope, etc.