7 Replies Latest reply on Feb 22, 2010 9:41 AM by F.Bowman

    Proper Use of States

    F.Bowman Level 2

      I have a question about how to properly use states.

       

      I am developing an application that requires login.

       

      I have two primary states, Authenticated and Unauthenticated. Once the user authenticates successfully, they are taken from the Unauthenticated state to the Authenticated state.

       

      Under the Authenticated state, I have a menu bar. When a menu item on the menubar is clicked, the application switches to a sub-state of the authenticated state that contains a TitleWindow with the content that I want to display. When the user clicks the close button of the TitleWindow, the application switches back to the Authenticated state.

       

      For those of you that know, is this proper use of States in Flex?

        • 1. Re: Proper Use of States
          Gregory Lafrance Level 6

          Is the TitleWindow simply a popup that does something before the user starts the real work in the main app (authenticated state)?

           

          If so, then I wouldn't even use states after login.

           

          If it is a question of not showing the main app until after the TitleWindow has been closed, just set the Application visible property to false, and set it to true after closing the popup. You might have to have a sub-container inside the Application tag, as setting its visible property to false might make the whole app invisible.

           

          If this post answers your question or helps, please mark it as such.


          Greg Lafrance - Flex 2 and 3 ACE certified

          www.ChikaraDev.com

          Flex / AIR Development, Training, and Support Services

          • 2. Re: Proper Use of States
            F.Bowman Level 2

            No. The TitleWindows are what I use to do all the main features of the application.

             

            http://reactorsoft.ath.cx/Projects/Andromeda_v1-debug/Andromeda_v1.html

             

            You can use that link to see what I'm talking about. Click on the 'Login' button to get past the login screen there. Every item you click in the menu takes you to a new state. Each state has it's own TitleWindow with content that contains the feature of that piece of the application.

            • 3. Re: Proper Use of States
              Gregory Lafrance Level 6

              I don't think you need states for what you are doing. ViewStack would be better. States are good for smaller areas of the UI that need to change, but in this case you are switching between different views, so ViewStack would be better.

               

              If this post answers your question or helps, please mark it as such.


              Greg Lafrance - Flex 2 and 3 ACE certified

              www.ChikaraDev.com

              Flex / AIR Development, Training, and Support Services

              1 person found this helpful
              • 4. Re: Proper Use of States
                F.Bowman Level 2

                One of the problems I'm seeing with this from a first look is that it doesn't allow me to customise the main content item of the ViewStack - Panel, TitleWindow. They are stuck at being 100% of the size of the ViewStack. How do I get around that?

                • 5. Re: Proper Use of States
                  Gregory Lafrance Level 6

                  As you can see in this sample code, the big factor is the size of the first view in the ViewStack. All the other views "might" be limited based on the size of the first view.

                   

                  The first view does not have to necessarily display first, that can happen programmatically, so at startup you could set the ViewStack selectedIndex to something other than 0.

                   

                  <?xml version="1.0" encoding="utf-8"?>
                  <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
                    verticalGap="20" horizontalAlign="center">
                    <mx:LinkBar dataProvider="{vs1}"/>
                    <mx:ViewStack id="vs1">
                      <mx:VBox label="One" width="300" height="200" backgroundColor="0xFFFFFF"/>
                      <mx:VBox label="Two" width="600" height="400" backgroundColor="0x00FF00"/>
                      <mx:VBox label="Three" width="150" height="100" backgroundColor="0x0000FF"/>
                    </mx:ViewStack>
                    <mx:Spacer height="50"/>
                    <mx:LinkBar dataProvider="{vs2}"/>
                    <mx:ViewStack id="vs2">
                      <mx:VBox label="One" width="600" height="400" backgroundColor="0xFFFFFF"/>
                      <mx:VBox label="Two" width="300" height="200" backgroundColor="0x00FF00"/>
                      <mx:VBox label="Three" width="150" height="100" backgroundColor="0x0000FF"/>
                    </mx:ViewStack>
                  </mx:Application>
                  


                  If this post answers your question or helps, please mark it as such.


                  Greg Lafrance - Flex 2 and 3 ACE certified

                  www.ChikaraDev.com

                  Flex / AIR Development, Training, and Support Services

                  • 6. Re: Proper Use of States
                    F.Bowman Level 2

                    I get you. The ViewStack just seems to be centered more around navigation than what I'm trying to achieve - static content sizes and what's not.

                    • 7. Re: Proper Use of States
                      F.Bowman Level 2

                      Mr. Lafrance, is this correct use of States?

                       

                      http://blog.flexexamples.com/2007/10/05/creating-view-states-in-a-flex-application/

                       

                      as compared to this:

                       

                      http://www.adobe.com/devnet/flex/quickstart/defining_state_transitions/

                       

                      Do both count as "the right way" of using states or is only way way the proper way?