8 Replies Latest reply on Oct 12, 2007 9:38 AM by nu2cf

    Screen to Screen - View to View??

    WestSide Level 1
      Hi,

      I could use a bit of assistance in determining how to go from view to view. I have this file called login.mxml it is basically the default application and it gets loaded when you first hit my app. Once authenticated i want to send the user to main.mxml. I raised this question on another forum and someone steered me to Cairngorm as a framework to assist but its not really an overnight framework it requires quite a bit of time and learning curve which I am ready to do but my trial for flex is ending soon so I am trying to learn much as I can in a limited timeframe.

      So can someone either post a brief code sample or explain how I would handle logging a user in and redirecting them to the main.mxml page.

      All of the tutorials I see are basically one mxml file everything is all in one file. I have yet to see any examples of authentication

      -WestSide
        • 1. Re: Screen to Screen - View to View??
          JFAM Level 1
          Hi,
          first of all, all the screens (i.e. MXML or AS files) of your Flex app will be compiled into one lone swf. That means there is no request-based browsing like you could find in standard web applications.
          To navigate inside your application, you can use navigator containers and/or view states. The container you need is ViewStack. You can select the child view that you want to display to the user using the selectedIndex / selectedItem properties. You will have 3 MXML files : main.mxml (the top-level container with ViewStack), LoginView.mxml and MainView.mxml.

          <mx:ViewStack id="vStack" width="100%" height="100%">
          <views:YourLoginView xmlns:views="com.yourpackage.views.*"/>
          <views:YourMainView xmlns:views="com.yourpackage.views.*"/>
          </mx:ViewStack>
          <mx:Button label="Show main view" click="vStack.selectedIndex=1"/>
          <mx:Button label="Show login view" click="vStack.selectedIndex=0"/>

          Hope this helps.
          • 2. Re: Screen to Screen - View to View??
            peterent Level 2
            I second JFAM's answer, but I'll throw in a twist if you feel adventurous :-)

            Flex 2 has something called "states". Each component always has a base state which is the way it normally looks. But you can add more states which change its appearance. Using your example, the "login" screen could be thought of as the application being in "login state". When the user is authenticated, then it goes into a "running state".

            Because this forum doesn't format code too well, I'll keep it brief:

            <mx:states>
            <mx:State name="runningState">
            <mx:AddChild >
            <mx:target><views:YourMainView id="mainView" /></mx:target>
            </mx:AddChild>
            <mx:RemoveChild target="{yourLoginView}" />
            </mx:State>
            </mx:states>

            <views:YourLoginView id="yourLoginView" loginOK="currentState='runningState'" />

            Assuming the yourLoginView has an loginOK event, then this changes the application's state to the "runningState". The definition of the "runningState" says to remove the login and add the main view.

            The benefit of this is that it is pretty easy to write and add more views (an error view, a registration view, etc.). Plus you can use Transitions to make the views fade out, slide away, etc.

            If you look up "AddChild" in the Flex 2 help, it has a detailed example of logging in, registering, etc.
            • 3. Re: Screen to Screen - View to View??
              ddanone Level 1
              Hi,

              We actually have the same problem, we have an Intranet with about 2000 procedures running in Internet Explorer.
              I'm exploring Flex to port the Intranet and obviously (in Flex) we can't compile the 2000 procedures each time a programmer changes one, but one possible method is to have a base procedure with one (or more) "IFrame" (take a look ExternalInterface class) and load each procedure on that IFrame. I haven't tested it fully, but some early tests looks well and works fine. With this method you have to do an extensivelly use of Javascript but i think the result will be great.

              In other way i don't understand how Flex can't handle these situations because the concept of RIA for a medium or large company is not to have 10-50 procedures even more than 100-200 and the team developer is compossed for more than one person, so it's a collaborative project where each programmer should not have to recompile the application when a procedure changes.

              Maybe i'm missing some fundamental concepts of Flex developing.

              If you want i can tell you wich tool we're using to develop our Intranet so you can see what i'm saying.

              Please correct me if i'm wrong.

              Regards
              • 4. Re: Screen to Screen - View to View??
                JFAM Level 1
                Hi ddanone,
                whether you use navigator containers or view states, your views (procedures) will be embedded inside the application swf file at compile-time.
                A way to solve your problem is to explode your application into several sets of views compiled on-the-fly by FDS. Those "children apps" could communicate with a top-level app that could handle common tasks (authentication, browsing, etc).
                To facilitate collaborative development and automate your deployments, you could also use continuous integration/build automation tools (Maven/CruiseControl for example). By the way, the approach to develop a RIA application is quite similar to the approach for a client/server development.

                Peter : any suggestions-remarks-adventures ;) ?
                • 5. Re: Screen to Screen - View to View??
                  peterent Level 2
                  I think WestSide's question and ddanone's question are at two different levels and, while similar, are about two different things.

                  Using states and transitions vs. ViewStack is coming up as a common question. States are also new for Flex 2.0 and at first appear to be complex. But they are actually quite easy. Application of transitions is a bit tricky to understand, however.

                  Using ViewStacks or states doesn't address ddanone's question and I think JFAM is giving good directions regarding large and complex applications. An app that size should be broken into smaller Flex apps and loaded dynamically - either by compiling at the web tier or precompiling them through a development process and tool such as ANT.
                  • 6. Re: Screen to Screen - View to View??
                    WestSide Level 1
                    Hi,

                    Thanks for the responses. Highly appreciated as always. I have fiddled with States a bit, not hardly enough. Based on the responses I wanted to know about the syntax: <views:YourMainView id="mainView" />

                    When you have code like <views:YourMainView id="mainView" /> does that mean there is a namespace called "views" that has been defined similar to the below code?

                    xmlns:business="com.adobe.cairngorm.samples.login.business.*"
                    xmlns:control="com.adobe.cairngorm.samples.login.control.*"

                    The above would define two namespaces? I could then do something like: <business: /> and reference ActionScript files and/or MXML files? Please correct me if I am wrong.

                    So does the default application file in a way serve like the controller file? Within this file do we have code such as :

                    <mx:states>
                    <mx:State name="runningState">
                    <mx:AddChild >
                    <mx:target><views:YourMainView id="mainView" /></mx:target>
                    </mx:AddChild>
                    <mx:RemoveChild target="{yourLoginView}" />
                    </mx:State>
                    </mx:states>

                    I guess I am getting off topic a bit but looking to see some type of flowchart of the way the code is ideally structured so there are relationships between the objects of the system. I highly desire to make the transition to working in a more object-oriented manner.

                    In any case, I will read up on "States" in the docs a bit more and see how things go.

                    Thanks again!

                    -WeStSidE

                    • 7. Re: Screen to Screen - View to View??
                      JFAM Level 1
                      quote:

                      Originally posted by: WestSide
                      When you have code like <views:YourMainView id="mainView" /> does that mean there is a namespace called "views" that has been defined similar to the below code?



                      Yes, something like xmlns:views="com.company.app.view.*"

                      quote:

                      Originally posted by: WestSide
                      xmlns:business="com.adobe.cairngorm.samples.login.business.*"
                      xmlns:control="com.adobe.cairngorm.samples.login.control.*"

                      The above would define two namespaces? I could then do something like: <business: /> and reference ActionScript files and/or MXML files? Please correct me if I am wrong.



                      You are right.

                      quote:

                      Originally posted by: WestSide
                      So does the default application file in a way serve like the controller file?



                      I think the default application file should be considered as a top-level view, rather than a controller. Assuming you store your logic code inside a separated (controller) ActionScript class, the formatting code and the logic will be lease-coupled. This concept can be used for each view of your application using ModeViewController-compliant patterns like . ViewHelper.

                      Note : That's only my point-of-view ;-)

                      • 8. Re: Screen to Screen - View to View??
                        nu2cf
                        Peter,

                        I am wrestling with this same question and I want to make sure I understand fully what you are suggestion on the site I am developing. I have a shopping comparison site that pulls xml results from an API. Their will be an initial "home page" screen view with a search box, a search results view, and a details views. The details view will be a popup panel.

                        When the search box is clicked, I want to transition the initial "home page" screen view away and transition in the search results view. Would it be best to have the search results view be a custom component based upon a box container? Or is there a better method you would suggest?

                        Thank you in advance for your help.