8 Replies Latest reply on Dec 3, 2009 10:38 AM by ellenchristine

    Multiple pages in a Flex application

    ellenchristine

      I have a Flex application that requires several steps: The user must input some info in the first panel, then the user should be directed to another "page" to fill out another panel, then directed to a page displaying only results. How do I do this? The only way I gleaned from the videos was turning visibility on and off. Is there a better way, like linking one application, or a different component of an application, to another? It seems like that could get confusing and cluttered in the design phase. Thanks!

        • 1. Re: Multiple pages in a Flex application
          Gregory Lafrance Level 6

          This sample application should answer you question.

           

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


          Greg Lafrance
          www.ChikaraDev.com

          Flex Development and Support Services

           

          ----- MainApp.mxml -----

           

           

          <?xml version="1.0" encoding="utf-8"?>
          <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
            backgroundGradientColors="[0xFFFFFF, 0xFFFFFF]" 
            backgroundColor="0xFFFFFF" width="100%" horizontalAlign="center">
            <mx:Script>
              <![CDATA[
                include "data/AddressData.as";      
              ]]>
            </mx:Script>
            <mx:LinkBar dataProvider="{vs}"/>
            <mx:ViewStack id="vs" creationPolicy="all" width="600">
              <mx:Form width="100%" label="Personal Information" backgroundColor="0xCCCCCC">
                <mx:FormItem label="First Name:">
                  <mx:TextInput id="fnameTxt" 
                    width="200" />
                </mx:FormItem>
                <mx:FormItem label="Last Name:">
                  <mx:TextInput id="lnameTxt" 
                    width="200" />
                </mx:FormItem>
                <mx:FormItem label="Address1:">
                  <mx:TextInput id="haddr1Txt"
                    width="200" />
                </mx:FormItem>
                <mx:FormItem label="Address2:">
                  <mx:TextInput id="haddr2Txt"
                    width="200" />
                </mx:FormItem>
                <mx:FormItem label="City:">
                  <mx:TextInput id="hcityTxt"
                    width="200" />
                </mx:FormItem>
                <mx:FormItem label="State:">
                  <mx:ComboBox id="hstateCbx" rowCount="20"
                    dataProvider="{statesInfo1..id}" />
                </mx:FormItem>
                <mx:FormItem label="Zip Code:">
                  <mx:TextInput id="hzipTxt" 
                    width="200" />
                </mx:FormItem>
                <mx:FormItem label="Country:">
                  <mx:TextInput id="hcountryTxt"
                    width="200" />
                </mx:FormItem>
                <mx:FormItem label="Email:">
                  <mx:TextInput id="hemailTxt" 
                    width="200" />
                </mx:FormItem>
                <mx:FormItem label="Home Phone:">
                  <mx:TextInput id="hphoneTxt" 
                    width="200" />
                </mx:FormItem>
                <mx:FormItem label="Cell Phone:">
                  <mx:TextInput id="cphoneTxt" 
                    width="200" />
                </mx:FormItem>
              </mx:Form>
              <mx:Form width="100%" label="Professional Information" backgroundColor="0xCCCCCC">
                <mx:FormItem label="Company:">
                  <mx:TextInput id="orgTxt"
                  width="200" />
                </mx:FormItem>
                <mx:FormItem label="Address1:">
                  <mx:TextInput id="waddr1Txt"
                  width="200" />
                </mx:FormItem>
                <mx:FormItem label="Address2:">
                  <mx:TextInput id="waddr2Txt"
                  width="200" />
                </mx:FormItem>
                <mx:FormItem label="City:">
                  <mx:TextInput id="wcityTxt"
                  width="200" />
                </mx:FormItem>
                <mx:FormItem label="State:">
                  <mx:ComboBox id="wstateCbx" rowCount="20"
                  dataProvider="{statesInfo1..id}" />
                </mx:FormItem>
                <mx:FormItem label="Zip Code:">
                  <mx:TextInput id="wzipTxt" 
                  width="200" />
                </mx:FormItem>
                <mx:FormItem label="Country:">
                  <mx:TextInput id="wcountryTxt"
                  width="200" />
                </mx:FormItem>
                <mx:FormItem label="Email:">
                  <mx:TextInput id="wemailTxt" 
                  width="200" />
                </mx:FormItem>
                <mx:FormItem label="Work Phone:">
                  <mx:TextInput id="wphoneTxt" 
                  width="200" />
                </mx:FormItem>
              </mx:Form>            
              <mx:HBox label="Summary Screen" width="100%" height="100%" 
                backgroundColor="0xCCCCCC" verticalAlign="middle">
                <mx:Form height="100%">
                  <mx:FormHeading label="Personal Information"/>
                  <mx:FormItem label="First Name:">
                    <mx:Label text="{fnameTxt.text}"></mx:Label>
                  </mx:FormItem>
                  <mx:FormItem label="Last Name:">      
                    <mx:Label text="{lnameTxt.text}"></mx:Label>
                  </mx:FormItem>
                  <mx:FormItem label="Address1:">
                    <mx:Label text="{haddr1Txt.text}"></mx:Label>
                  </mx:FormItem>
                  <mx:FormItem label="Address2:">
                    <mx:Label text="{haddr2Txt.text}"></mx:Label>
                  </mx:FormItem>
                  <mx:FormItem label="City:">
                    <mx:Label text="{hcityTxt.text}"></mx:Label>
                  </mx:FormItem>
                  <mx:FormItem label="State:">
                    <mx:Label text="{hstateCbx.selectedLabel}"></mx:Label>
                  </mx:FormItem>
                  <mx:FormItem label="Zip Code:">
                    <mx:Label text="{hzipTxt.text}"></mx:Label>
                  </mx:FormItem>
                  <mx:FormItem label="Country:">
                    <mx:Label text="{hcountryTxt.text}"></mx:Label>
                  </mx:FormItem>
                  <mx:FormItem label="Email:">
                    <mx:Label text="{hemailTxt.text}"></mx:Label>
                  </mx:FormItem>
                  <mx:FormItem label="Home Phone:">
                    <mx:Label text="{hphoneTxt.text}"></mx:Label>
                  </mx:FormItem>
                  <mx:FormItem label="Cell Phone:">
                    <mx:Label text="{cphoneTxt.text}"></mx:Label>        
                  </mx:FormItem>
                </mx:Form>
                <mx:VRule strokeWidth="2" height="330" width="2"
                  strokeColor="0xFFFFFF" shadowColor="0xFFFFFF"/>
                <mx:Form height="100%">
                  <mx:FormHeading label="Professional Information"/>
                  <mx:FormItem label="Company:">
                    <mx:Label text="{orgTxt.text}"></mx:Label>
                  </mx:FormItem>
                  <mx:FormItem label="Address1:">
                    <mx:Label text="{waddr1Txt.text}"></mx:Label>
                  </mx:FormItem>
                  <mx:FormItem label="Address2:">
                    <mx:Label text="{waddr2Txt.text}"></mx:Label>
                  </mx:FormItem>
                  <mx:FormItem label="City:">
                    <mx:Label text="{wcityTxt.text}"></mx:Label>
                  </mx:FormItem>
                  <mx:FormItem label="State:">
                    <mx:Label text="{wstateCbx.selectedLabel}"></mx:Label>
                  </mx:FormItem>
                  <mx:FormItem label="Zip Code:">
                    <mx:Label text="{wzipTxt.text}"></mx:Label>
                  </mx:FormItem>
                  <mx:FormItem label="Country:">
                    <mx:Label text="{wcountryTxt.text}"></mx:Label>
                  </mx:FormItem>
                  <mx:FormItem label="Email:">
                    <mx:Label text="{wemailTxt.text}"></mx:Label>
                  </mx:FormItem>
                  <mx:FormItem label="Work Phone:">
                    <mx:Label text="{wphoneTxt.text}"></mx:Label>
                  </mx:FormItem>
                </mx:Form>
              </mx:HBox>
            </mx:ViewStack>
          </mx:Application>
          


          ----- data/AddressData.as -----

           

           

          [
          Bindable] private var statesInfo1:XML = <states_info>
          <state> 
          <name>Alaska</name>
          <id>AK</id>
          </state>
          <state>
          <name>Alabama</name>
          <id>AL</id>
          </state>
          <state> 
          <name>Arkansas</name>
          <id>AR</id>
          </state>
          <state> 
          <name>American Samoa</name>
          <id>AS</id>
          </state>
          <state> 
          <name>Arizona</name> 
          <id>AZ</id>
          </state>
          <state> 
          <name>California</name> 
          <id>CA</id>
          </state>
          <state> 
          <name>Colorado</name> 
          <id>CO</id>
          </state>
          <state> 
          <name>Connecticut</name>
          <id>CT</id>
          </state>
          <state> 
          <name>District of Columbia</name>
          <id>DC</id>
          </state>
          <state> 
          <name>Delaware</name>
          <id>DE</id>
          </state>
          <state> 
          <name>Florida</name>
          <id>FL</id>
          </state>
          <state> 
          <name>Federated States of Micronesia</name>
          <id>FM</id>
          </state>
          <state> 
          <name>Georgia</name>
          <id>GA</id>
          </state>
          <state> 
          <name>Guam</name> 
          <id>GU</id>
          </state>
          <state> 
          <name>Hawaii</name>
          <id>HI</id>
          </state>
          <state> 
          <name>Iowa</name>
          <id>IA</id>
          </state>
          <state> 
          <name>Idaho</name>
          <id>ID</id>
          </state>
          <state> 
          <name>Illinois</name>
          <id>IL</id>
          </state>
          <state> 
          <name>Indiana</name>
          <id>IN</id>
          </state>
          <state> 
          <name>Kansas</name>
          <id>KS</id>
          </state>
          <state> 
          <name>Kentucky</name>
          <id>KY</id>
          </state>
          <state> 
          <name>Louisiana</name>
          <id>LA</id>
          </state>
          <state> 
          <name>Massachusetts</name>
          <id>MA</id>
          </state>
          <state> 
          <name>Maryland</name>
          <id>MD</id>
          </state>
          <state> 
          <name>Maine</name>
          <id>ME</id>
          </state>
          <state> 
          <name>Marshall Islands</name>
          <id>MH</id>
          </state>
          <state> 
          <name>Michigan</name>
          <id>MI</id>
          </state>
          <state> 
          <name>Minnesota</name>
          <id>MN</id>
          </state>
          <state> 
          <name>Missouri</name>
          <id>MO</id>
          </state>
          <state> 
          <name>Northern Mariana Islands</name>
          <id>MP</id>
          </state>
          <state> 
          <name>Mississippi</name>
          <id>MS</id>
          </state>
          <state> 
          <name>Montana</name>
          <id>MT</id>
          </state>
          <state> 
          <name>North Carolina</name>
          <id>NC</id>
          </state>
          <state> 
          <name>North Dakota</name>
          <id>ND</id>
          </state>
          <state> 
          <name>Nebraska</name>
          <id>NE</id>
          </state>
          <state> 
          <name>New Hampshire</name>
          <id>NH</id>
          </state>
          <state> 
          <name>New Jersey</name>
          <id>NJ</id>
          </state>
          <state> 
          <name>New Mexico</name>
          <id>NM</id>
          </state>
          <state> 
          <name>Nevada</name>
          <id>NV</id>
          </state>
          <state> 
          <name>New York</name>
          <id>NY</id>
          </state>
          <state> 
          <name>Ohio</name>
          <id>OH</id>
          </state>
          <state> 
          <name>Oklahoma</name>
          <id>OK</id>
          </state>
          <state> 
          <name>Oregon</name>
          <id>OR</id>
          </state>
          <state> 
          <name>Pennsylvania</name>
          <id>PA</id>
          </state>
          <state> 
          <name>Puerto Rico</name>
          <id>PR</id>
          </state>
          <state> 
          <name>Palau</name>
          <id>PW</id>
          </state>
          <state> 
          <name>Rhode Island</name>
          <id>RI</id>
          </state>
          <state> 
          <name>South Carolina</name>
          <id>SC</id>
          </state>
          <state> 
          <name>South Dakota</name>
          <id>SD</id>
          </state>
          <state> 
          <name>Tennessee</name>
          <id>TN</id>
          </state>
          <state> 
          <name>Texas</name>
          <id>TX</id>
          </state>
          <state> 
          <name>Utah</name>
          <id>UT</id>
          </state>
          <state> 
          <name>Virginia</name> 
          <id>VA</id>
          </state>
          <state> 
          <name>Virgin Islands</name>
          <id>VI</id>
          </state>
          <state> 
          <name>Vermont</name>
          <id>VT</id>
          </state>
          <state> 
          <name>Washington</name>
          <id>WA</id>
          </state>
          <state> 
          <name>Wisconsin</name>
          <id>WI</id>
          </state>
          <state> 
          <name>West Virginia</name>
          <id>WV</id>
          </state>
          <state> 
          <name>Wyoming</name>
          <id>WY</id>
          </state>
          </states_info>;
          
          
          
          
          1 person found this helpful
          • 2. Re: Multiple pages in a Flex application
            ellenchristine Level 1

            Thanks, Greg, that's definitely helpful. I think I will use that tab format for the first "page" where the customer needs to enter Project Info and Company Info.

             

            However, I still think I need a separate page entirely for the rest of the info. After entering the general info above, the user will be able to enter info about a product they need, and calculations will be performed as a result of their input. The results page will look similar to a spreadsheet and the user should be able to print it out.

             

            Is there no way to call one main application file from another? Would I just need to turn off the visibility for the forms on the first "page"? I'd like to know what my options are. Thanks!

            • 3. Re: Multiple pages in a Flex application
              Gregory Lafrance Level 6

              You can communicate between Flex apps, but it is more complex and you don't need to do that in your case.

               

              I don't fully understand your situation, but you could have a ViewStack, where one view if your TabNavigator as you describe.

               

              You could also use modules, so load the TabNavigator module, and when the user is done filling in the info they click a button, and the TabNavigator module unloads and the other module loads.

               

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


              Greg Lafrance
              www.ChikaraDev.com

              Flex Development and Support Services

              1 person found this helpful
              • 4. Re: Multiple pages in a Flex application
                ellenchristine Level 1

                Thanks for your input, I will look into using modules for this. Thanks!


                • 5. Re: Multiple pages in a Flex application
                  e2dev Level 2

                  Sounds like you want to create application states. You can create separate MXML or AS classes/components for each of your "pages" and then apply them using view states. Take a look at the "Controlling application states" video on Day 2. You can add animated transitions, too. That's also explained in Day 2 of the Flex in the Week videos (http://www.adobe.com/devnet/flex/videotraining/flex4beta/).

                  • 6. Re: Multiple pages in a Flex application
                    ellenchristine Level 1

                    Am I able to use this functionality in Flex Builder 3? I watched the Flex in a Week videos for 3 and don't recall seeing anything about states. Or I could have missed a vid or something.

                     

                    Thanks!

                    • 7. Re: Multiple pages in a Flex application
                      e2dev Level 2

                      Yes, you can do this in Flex 3, although the syntax is a little more complicated (not horribly so). Adobe streamlined it for Flex 4 to make it much more intuitive.

                       

                      For the Flex 3 videos (http://www.adobe.com/devnet/flex/videotraining/) look in Day 4 for these two videos:

                       

                      • 8. Re: Multiple pages in a Flex application
                        ellenchristine Level 1

                        Thanks a lot, I must have overlooked those later videos.