Exercise 4.7: Creating and navigating application states

In this exercise you will use Flash Builder to create the login page seen in Figure 1 and the main application page seen in Figure 2. You will create these as view states and learn how to switch between them.

In this exercise, you will learn how to:

• Create a state
• Add state controls
• Remove state controls
• Define a start state

In this section you will create an application state for the Employee Portal login page.

1. Download the ex4_07_starter.zip file if you haven't done so already and extract the file ex4_07_starter.fxp file to your computer.
2. Open Flash Builder.
3. Import the ex4_07_starter.fxp file.
4. Open ex4_07_starter.mxml.
5. Switch to Design mode.

   Note that the application is made up of a Label control, BitmapImage controls and multiple Panel containers as shown in Figure 2.

6. Locate the States view.
7. Right-click on <State 1> and select New (see Figure 3).

8. Name the state loginState and create it as a duplicate of the <State1> state (see Figure 4).

9. Click OK.
10. Switch to Source mode.
11. Locate the states tags.
12. Cut the states block and paste it under the layout tags below the Properties of the parent comment.

13. Change the first state's name from State1 to portalState.

14. Switch to Design mode.
15. Locate the States view.

    You should see the portalState and loginState as shown in Figure 5.

16. Save the file.

In this section, you will configure the controls in the loginState state.

1. In Design mode, select the loginState from the State drop-down list (see Figure 6).

2. From the Components view Layout branch, drag a Panel container and drop it in the middle of the editor, centering it above the other components (see Figure 7). Make sure you do not place the new Panel container inside any of the other Panel containers that already exist in the state.

   Note: You can double-click on the editor tab to expand the window to get a better view.

3. In Source mode, to the Panel container, add the id property set to login and the title property set to LOGIN. Change the width property to have a value of 390, the x property to have value of 24, and the y property to have value of 95.

4. In the Login Panel container, add a layout tag block.
5. Within the layout block, add a VerticalLayout class instance to arrange the layout elements in a vertical sequence.
6. To the VerticalLayout instance, add the gap property set to a value of 10 to add a 10 pixel vertical gap between each element.
7. Add the paddingTop, paddingBottom, paddingLeft, and paddingRight properties to the VerticalLayout class and set all of their values to 15.

8. Save the file.
9. Switch to Design mode.

   You should see the Panel container now has a title of Login as shown in Figure 8.

10. From the Components view Controls branch, drag a Label control into the Login Panel container (see Figure 9).

11. Use the Properties view to assign the Text property a value of Username: (see Figure 10).

12. From the Components view Controls branch, drag a TextInput control and drop it in the Login Panel container under the Label control (see Figure 11)..

13. Select both the Label control and the TextInput control and copy them.
14. Paste the copy inside the Login Panel container.

    Notice that the Label and TextInput controls are pasted directly under the other controls (see Figure 12).

15. With the new Label control selected, open the Properties view and change the Text value from Username: to Password:.

16. From the Components view, drag a Button control and drop it below the password field within the Login Panel container (see Figure 13).

    
    

17. Use the Properties panel to assign the Button control a label value of Submit.
18. With the Login button still selected, switch to Source mode.

    The Button control should be highlighted. Note that it is nested inside the login Panel instance (see Figure 14).

19. Ensure that the login Panel container is not nested inside the caffeteriaSpecial Panel container or any other container.

    Remember that when you created the Login container display, you dragged and dropped it from the Components view into the Design area. If you accidentally dropped it into another container, in this step you should un-nest it.

20. Note that the Panel container has an includeIn property set to loginState.

21. Save the file.

In this section, you will remove and exclude controls from the loginState state.

1. Switch to Design mode.
2. With the loginState selected, delete the Panel containers with the following headers: Cafeteria Special, Monthly Events, Employee Directory (see Figure 15).

3. Within the States view, select the portalState state.

   You should see the controls you deleted from the loginState state still exist in the portalState state (see Figure 16).

4. Switch to Source mode.
5. Note that all the Panel containers except for the login and the Employee of the Month Panel containers have the includeIn property set to portalState.
6. Locate the Button control with the label property set to LOGOUT.

7. To the Button control, add the excludeFrom property set to the loginState state.

8. Save the file.
9. Switch to Design mode.
10. Maximize the editor by double-clicking the ex4_07_starter.mxml file tab.
11. Switch between the loginState and the portalState.

    You should see the difference in states as shown in Figures 17 and 18.

12. Double-click the ex4_07_starter.mxml file tab to minimize the view.

In this section, you set the loginState state as the start state for the sample application.

1. Within the States view, right-click the loginState state and select Edit (see Figure 19).

2. Within the Edit State Properties window, click the check box next to Set as start state (see Figure 20).

3. Click OK.

   You should see the loginState state now shows the word start in parentheses as shown in Figure 21.

4. Switch to Source mode.
5. Locate the opening Application container tag and note that the currentState property has been added and set to the loginState state.

6. Locate the login Panel container.
7. To the nested Button control, add the click event set to change the value of the currentState property to the portalState state.

8. Locate the Button control with a label property set to LOGOUT.

9. To the Button control, add the click event set to the value of the currentState property to the loginState state.

10. Save the file and run the application.

    You should see the login state state shown in Figure 22.

11. Click the Login button.

    You should see the application change to the portal state shown in Figure 23.

12. Click the Logout button.
    You should be returned to the login state.
13. Return to Flash Builder.
14. Locate the Employee of the Month Panel container.
15. To the opening Panel tag, add an x.loginState property with a value of 434 and a y.loginState property with a value of 95. By adding loginState to the property, you are only specifying the x and y property values for the loginState.
16. Still in the opening Panel container tag, add the width.loginState property with a value of 390 and the height.loginState property with a value of 200.
17. Save the file and run the application.
    You should see that the Login panel no longer covers the Employee of the Month Panel container, but the text in the panel does not fit (see Figure 24).

18. Switch to Design mode.
19. With the loginState state selected, select the Label control in the Employee of the Month Panel container.
20. From the Properties view, change the value of the Text property to Congratulations to Athena Parker! She has been ranked #1 by our customers three months in a row.
21. Save the file.
22. Run the application.
    When you click the Submit button, you should notice that the text in the Employee of the Month Panel containers are different (see Figure 25).

In this exercise you used Flash Builder to create the login page. In the next exercise you will learn how to lay out an application by understanding the relationship between containers and their children.