17 Replies Latest reply on Oct 18, 2007 8:26 AM by Ansury

    one MXML page for many screens?

    mark416 Level 1
      Hi,

      I plan to write a Flex application.the application have many pages(search,list result,add record etc).I want to write a mxml file for all the screens.

      I am new for Flex.I want to know how to do this.

      1.how to switch from one screen to other screen
      2.how to pass variable from one screen to other screen.

      Do you have some easy demo for this so I can understand.quickly.

      Thanks a lot

      Mark
        • 1. Re: one MXML page for many screens?
          Gregory Lafrance Level 6
          I would look at the following Flex 2.0.1 help topics:
          Adding View States and Transitions
          Use View States and Transitions

          Basically you create a "base" state, which is the initial appearance of your application when it launches. Then you define one or more additional states, where you define how the new state differs from the base state (some base state containers and controls not displaying, other containers and controls specific to the new state displaying, etc.). Then you provide a machanism for switching states. and optionally define transitions so switching between the states is even more cool.
          • 2. Re: one MXML page for many screens?
            Level 7
            mark416 wrote:
            > Hi,
            >
            > I plan to write a Flex application.the application have many pages(search,list
            > result,add record etc).I want to write a mxml file for all the screens.
            >
            > I am new for Flex.I want to know how to do this.
            >
            > 1.how to switch from one screen to other screen
            > 2.how to pass variable from one screen to other screen.
            >
            > Do you have some easy demo for this so I can understand.quickly.
            >
            > Thanks a lot
            >
            > Mark
            >


            A ViewStack is one approach to this.

            Mark
            • 3. Re: one MXML page for many screens?
              V_For_Vendetta
              What if a web application consists of a lot pages very different among them ?

              Is the ViewStack still the best approach or its better creating different mxml pages and moving from one to another with navigateToURL() ?

              Tnx

              • 4. Re: one MXML page for many screens?
                mark416 Level 1
                Yes. The pages are totally different in my application.for example search page,result page,detail page,link pages.

                Which solution is better (states or components)

                Thanks a lot

                M
                • 5. one MXML page for many screens?
                  levancho Level 3
                  I am totally against the idea of using viewStates to simulate each page, and I am even further suspicious that its also should be slower than using viewStack(if there are too many states).

                  I am going to stretch this even further and (from my own experience) say that : using states for each page is a mistake that is going to bite you bad at later time and its going to be very difficult to fix,
                  States feature in Flex is very powerful and very very handy feature, if used correctly,
                  for example if you use states to simulate each page imagine for example that in search page you want to have two different types of search basic and advanced, now since you are already using state for search page you will have to do a lot of duplication...

                  now alternative :

                  use viewStack and have search Page as regular box, panel or whatever in it., then in search page have two states for that page basic and advanced now this is the correct way of using states .(NOTE: all this is my opinion and might be completely wrong, use your own judgment :) )
                  • 6. Re: one MXML page for many screens?
                    Handycam Level 1
                    I agree with levancho, use a viewstack instead.

                    The only reason I could see to use states is I believe (could be wrong) that it's the only way to have animation or transformation transitions. Like if you have an item that, if the user clicks a button, the item "grows" to show additional content.
                    • 7. Re: one MXML page for many screens?
                      V_For_Vendetta Level 1
                      Hi to all
                      even if I have very little experience with Flex it seems to me that levancho is right

                      States should be used to implement little variations to the base structure of page and according to this
                      you have only one Base State over which develop further states ...

                      I dont know if I'm using the right approach but at the moment I'm implementing the page switch
                      with the navigateToURL() ...

                      • 8. Re: one MXML page for many screens?
                        tpawliuk
                        I would personally use a viewStack with each view being a different page then maintain the state ( or which page you are viewing in a singleton class ) when you would want to view a different page just change the state in that singleton class. I would create a seperate mxml file or component for each page and then add all of them to the viewstack. Its a clean and fairly simple way to handle your problem

                        Take a look at the cairngorm architecture which has many examples that describe what it seems you are looking for.
                        • 9. one MXML page for many screens?
                          Ansury Level 3
                          I would use a ViewStack myself as well. I started out using states but, if nothing else, it's just easier working with a ViewStack.

                          To give a more definite answer, I think we should ask the OP *why* he's interested in using only a single mxml for all views, although I'm still pretty sure that ViewStack is the way to go.

                          Yeah, the Cairngorm examples demonstrate ViewStacks and "passing variables" (if you want to call it that):

                          http://labs.adobe.com/wiki/index.php/Cairngorm
                          • 10. Re: one MXML page for many screens?
                            ntsiii Level 3
                            I'll jump on this bandwagon as well.

                            ViewStack is very easy to use. It is also efficient, as long as you do not gut it by using creationPolicy="all" (bad monkey) It is very readable, especially if you use components as the views.

                            Also, don't overlook TabNavigator, which has the benefits of ViewStack, but with built-in navigation.

                            To the OP: do not confuse the physical files (.mxml, .as) with the run-time application architecture. You can (will) have many different mxml and as files in a single app. "Screens/Views" are not necessarily associated with a single source file, but might be. A single application file will have MANY views or screens

                            You will almost NEVER use navigateToURL. You launch a different application that way.

                            Tracy
                            • 11. Re: one MXML page for many screens?
                              mark416 Level 1
                              Hi ,

                              I just want to convert a coldfusion app to Flex app.

                              Coldfusion app have a lot pages,My question is how many mxml files I need or just one mxml file with many states.

                              Thanks

                              M
                              • 12. Re: one MXML page for many screens?
                                ntsiii Level 3
                                Mark, as I just said, do not confuse the run-time architecture (screens, views, states) with the physical source code files. They are only generally related.

                                Start with a single mxml file. It will compile into a single swf, and users will access your entire application by calling an html page containing that swf loaded into the Flash Player. One application = one root mxml file.

                                Theoretically, everything could be built into this single mxml file. However, in practice, your application will be built using many other mxml or .as files.

                                Flex apps are component based. A main app can be built of many sub-components, and each of these can be built of many more sub-components, etc. Typically, a component is implemented in a single .as or .mxml file. Somewhere, there is a file for every component in Flex. there is a Text.as, an InputText.as, a Label.as,...etc.

                                You switch between "screens/views/pages" using a navigation component, like ViewStack, or TabNavigator, as discussed above.

                                Tracy
                                • 13. Re: one MXML page for many screens?
                                  mark416 Level 1
                                  Hi,

                                  My question is how to switch between screens/views/pages with ViewStack.

                                  Please give me a simple demo.for example I have a page for inputing search text and the second page is search result page that list all result.How to switch the two pages?Thanks

                                  M
                                  • 14. one MXML page for many screens?
                                    Ansury Level 3
                                    Okay, if you want a more direct link to an example, I believe if you open the room mxml file of the "Multi-view contact management example" here you'll see a ViewStack in use.

                                    http://www.cairngormdocs.org/

                                    The main section of interest looks like:

                                    <mx:HBox paddingBottom="10" paddingLeft="10" paddingRight="10" paddingTop="10" backgroundColor="#ffffff" width="700">
                                    <mx:VBox width="100%" verticalScrollPolicy="off" paddingRight="10">

                                    <mx:ViewStack width="100%" paddingBottom="10" paddingTop="10" resizeToContent="true" selectedIndex="{model.viewing}">
                                    <view:EmployeeLogin />
                                    <view:EmployeeList />
                                    <view:EmployeeDetail />
                                    </mx:ViewStack>

                                    </mx:VBox>
                                    </mx:HBox>

                                    The "view:Employee******" files map to mxml (or .as) files describing each view.

                                    In Cairngorm (or even without it) you can do the above, and change the visible page by changing the value of the [Bindable] variable "model.viewing" using predefined constants:

                                    public static const EMPLOYEE_LOGIN : Number = 0;
                                    public static const EMPLOYEE_LIST : Number = 1;
                                    public static const EMPLOYEE_DETAIL : Number = 2;
                                    // viewstack starts out on the login screen
                                    public var viewing : Number = EMPLOYEE_LOGIN;

                                    Look at the examples I posted a link to. (Don't just browse the folder structure in explorer, actually import the project into your IDE so it's easier to navigate...)

                                    Once you have an example setup, you'll see why I think it's the easiest way to "change views" I've ever seen in any development environment.
                                    • 15. Re: one MXML page for many screens?
                                      mark416 Level 1
                                      Hi,

                                      How to swith screens/views in Flex with Viewstack if I do not use cairngorm framework?

                                      Please give me a simple code demo if you can.Thanks.

                                      Mark
                                      • 16. Re: one MXML page for many screens?
                                        ntsiii Level 3
                                        MyViewStack.selectedIndex = SomeZeroBasedNumber;

                                        It is time for you to read the docs.

                                        Tracy
                                        • 17. Re: one MXML page for many screens?
                                          Ansury Level 3
                                          Yes, these questions are what documentation is written for...

                                          http://livedocs.adobe.com/labs/flex3/langref/index.html

                                          If you click on ViewStack in the bottom left list there, it even has an example for you without Cairngorm... but it's really just doing the same thing.