9 Replies Latest reply on May 31, 2007 7:55 AM by Anil_Flex

    Navigation

    rdbh
      Hello,

      I am trying to use a button click event to display a new page. I have seen examples of the tab, stack view and accordion navigators but they all use canvs or boxes. Can i go to a new page using a button click. I am having trouble using events to do that. Can anyone help please?

      Thanks,
      Rose.
        • 1. Re: Navigation
          ntsiii Level 3
          Be careful of language here: What do you mean by "page"?

          In the Flex paradigm, we do not have "pages" in the HTML sense. The navigation containers are the correct way to change the UI.

          Only in very unusual circumstances will you need to navigate to a different url.

          Tracy
          • 2. Re: Navigation
            peterent Level 2
            Hi Rose,

            The Accordion, TabNavigator, and ViewStack all require their immediate children to be a Container of some sort, such as a Canvas, VBox, HBox, etc.

            I'm not sure what you mean by a "page" since that isn't Flex concept, but let's assume you are using the ViewStack which can display one Container at a time (which is like a page). You need to figure out what goes on each of your pages and determine what container suits your needs.

            <mx:ViewStack id="stack" width="100%" height="100%">
            <mx:HBox label="First Page" width="100%" height="100%">
            <!-- you put TextInput, Labels, Buttons, etc. here -->
            <mx:Button label="Next Page" click="stack.selectedIndex=1" />
            </HBox>
            <mx:VBox label="Second Page" width="100%" height="100%">
            <!-- put the contents of your second page here -->
            </mx:VBox>
            </mx:ViewStack>

            You'll see on the HBox labeled "First Page" I put a Button labeled "Next Page". When the click event is fired by the user click on the button, it executes the code: stack.selectedIndex =1. Since "stack" is the ID of the ViewStack, its selectedIndex, which is currently 0 (zero) is changed to 1 and you go to "Second Page".

            HTH
            • 3. Re: Navigation
              rdbh Level 1
              Thank You Peter and Tracy, it helps to know that i have to use one of those navigation systems (stack, accordion, tabs). I did not quite understand the concept. The idea is to have a login "page" that allows me to go to the next "page" and i am having issues with placing the correct event in the "login" button to go to the next step. But i feel better already there are examples on how to use stack view and so on. And your answers helped me with that too. I'm going to try it out.

              Rose.
              • 4. Re: Navigation
                rdbh Level 1
                I guess what i was referring to is having the stack views in different files as i have seen it done in examples like the photoviewer.
                And instead of mx:HBox, they had the names of the files. But when i do that of course, the compiler tells me there are no such components so i know i am missing a step and i'll try again. If you have further tips on that let me know.

                Thanks,
                Rose.
                • 5. Re: Navigation
                  ntsiii Level 3
                  Remember that "files" do not mean "pages".

                  Think of a Flex app as being built of many "components". Each component will be implemented in its own file, either .mxml or .as. Your main app.mxml file can contain many "files". In fact, a tabnavigator or viewstack can be made up of many files, one for each child, and each of those can in turn contain components therefore files.

                  File structure means nothing about the application runtime structure.

                  Tracy
                  • 6. Re: Navigation
                    rdbh Level 1
                    Thank You, this helped!
                    • 7. Re: Navigation
                      Anil_Flex
                      I am unable to understand how navigation in Flex works. My situation is I have around 40 screens (flex component for each screen) in the application. I need to show each screen when the user clicks on the link on the tree component. How can I achieve this like I have HTML frames and one frame has a menu and when any item of the menu is clicked, then the corresponding page(flex component) needs to be displayed on the display frame. If I have to use a view stack as mentioned in this thread, then I will have 40 component screens waiting for the corresponding button click.

                      Thanks
                      Anil.
                      • 8. Re: Navigation
                        peterent Level 2
                        Let's assume for a moment you have just a few screens and ViewStack is the way to go. If your tree component's data has the id of the specific child of the ViewStack you want to show when that node is clicked, all you have to do is set the ViewStack's selectedChild to that value. If you don't have the id but have the index, which is probably easier in your case, then you set the ViewStack's selected index property.

                        By default the ViewStack has its creationPolicy set to "auto". This means it creates an instance of each of its children, but it only creates the *contents* of the first child. The contents of any specific child are created when the user visits that child for the first time.

                        In your case, with 40 screens, the user has to wait for the ViewStack to create 40 instances, but the user doesn't have to wait for all of the components on each of those 40 screens to be created. If they only visit one or two of these screens, this could work out.

                        Still, 40 is pushing it a bit. When you have a large number of screens or any components that a user may not visit, you should consider using Flex modules.

                        Alex Harui has an excellent PPT presentation on modules from his talk at 360Flex. Here's the link:
                        http://blogs.adobe.com/aharui/2007/03/modules.html

                        One thing Alex shows is how to use Modules with a ViewStack which, I think, fits your needs perfectly.
                        • 9. Re: Navigation
                          Anil_Flex Level 1
                          Thank you very much for a quick reply. I will read more about modules.

                          -Anil.