Requirements

Prerequisite knowledge Required products Exercise files User level

Flash Builder 4.7 Premium (Download trial)

Beginning
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.
 
Figure 1. Review your tasks for this exercise.
 

 
Create a 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.
     
Note that the sample application consists of multiple Panel containers, a Label control, and BitmapImage controsl.
Figure 2. Note that the sample application consists of multiple Panel containers, a Label control, and BitmapImage controsl.
 
  1. Locate the States view.
  2. Right-click on <State 1> and select New (see Figure 3).
Create a new state.
Figure  3. Create a new state.
 
  1. Name the state loginState and create it as a duplicate of the <State1> state (see Figure 4).
Create a state named loginState.
Figure 4. Create a state named loginState.
 
  1. Click OK.
  2. Switch to Source mode.
  3. Locate the states tags.
  4. Cut the states block and paste it under the layout tags below the Properties of the parent comment.
<s:states> <s:State name="State1"/> <s:State name="loginState"/> </s:states>
  1. Change the first state's name from State1 to portalState.
<s:states> <s:State name="portalState"/> <s:State name="loginState"/> </s:states>
  1. Switch to Design mode.
  2. Locate the States view.
    You should see the portalState and loginState as shown in Figure 5.
     
See State1 is now labeled portalState.
Figure 5. See State1 is now labeled portalState.
 
  1. Save the file.

 
Add state controls

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).
Select the loginState state from the State drop-down list
Figure 6. Select the loginState state from the State drop-down list
 
  1. 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.
     
Add a Panel container to the loginState.
Figure 7. Add a Panel container to the loginState.
 
  1. 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.
<s:Panel id="login" title="LOGIN" includeIn="loginState" x="24" y="95" width="390" height="200"> </s:Panel>
  1. In the Login Panel container, add a layout tag block.
  2. Within the layout block, add a VerticalLayout class instance to arrange the layout elements in a vertical sequence.
  3. To the VerticalLayout instance, add the gap property set to a value of 10 to add a 10 pixel, vertical gap between each element.
  4. Add the paddingTop, paddingBottom, paddingLeft, and paddingRight properties to the VerticalLayout class and set all of their values to 15.
<s:layout> <s:VerticalLayout gap="10" paddingTop="15" paddingBottom="15: paddingLeft="15" paddingRight="15"/> </s:layout>
  1. Save the file.
  2. Switch to Design mode.
    You should see the Panel container now has a title of Login as shown in Figure 8.
     
 See the Panel container now has a title of Login.
Figure 8. See the Panel container now has a title of Login.
 
  1. From the Components view Controls branch, drag a Label control into the Login Panel container (see Figure 9).
Add a Label control to the Login Panel container.
Figure 9. Add a Label control to the Login Panel container.
 
  1. Use the Properties view to assign the Text property a value of Username: (see Figure 10).
Assign the Label control a Text value of Username:.
Figure 10. Assign the Label control a Text value of Username:.
 
  1. 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)..
Add a TextInput control to the Login Panel container.
Figure 11. Add a TextInput control to the Login Panel container.
 
  1. Select both the Label control and the TextInput control and copy them.
  2. 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).
     
The new controls pasted under the original controls.
Figure  12. The new controls pasted under the original controls.
 
  1. With the new Label control selected, open the Properties view and change the Text value from Username: to Password:.
     
  2. From the Components view, drag a Button control and drop it below the password field within the Login Panel container (see Figure 13).

     
Add a Button control to the Login Panel container.
Figure 13. Add a Button control to the Login Panel container.
 
  1. Use the Properties panel to assign the Button control a label value of Submit.
  2. 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).
     
The Panel component is highlighted because the control was selected in Design mode.
Figure 14. The Panel component is highlighted because the control was selected in Design mode.
 
  1. 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.
     
  2. Note that the Panel container has an includeIn property set to loginState.
<s:Panel id="login" title="LOGIN" includeIn="loginState" x="24" y="95" width="390" height="200">
  1. Save the file.

 
Remove state controls

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).
Remove the three Panel containers.
Figure 15. Remove the three Panel containers.
 
  1. 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).
     
 See the controls deleted from the loginState state still remain in the portalState state.
Figure  16. See the controls deleted from the loginState state still remain in the portalState state.
 
  1. Switch to Source mode.
  2. 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.
  3. Locate the Button control with the label property set to LOGOUT.
<s:Button label="LOGOUT" x="730" y="37" fontWeight="bold"/>
  1. To the Button control, add the excludeFrom property set to the loginState state.
<s:Button label="LOGOUT" x="730" y="37" fontWeight="bold" excludeFrom="loginState"/>
  1. Save the file.
  2. Switch to Design mode.
  3. Maximize the editor by double-clicking the ex4_07_starter.mxml file tab.
  4. Switch between the loginState and the portalState.
    You should see the difference in states as shown in Figures 17 and 18.
     
This is the loginState state.
Figure 17. This is the loginState state.
 
This is the portalState state.
Figure 18. This is the portalState state.
 
  1. Double-click the ex4_07_starter.mxml file tab to minimize the view.

 
Define a start state

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).
Edit the loginState state.
Figure  19. Edit the loginState state.
 
  1. Within the Edit State Properties window, click the check box next to Set as start state (see Figure 20).
Set the loginState state as the application's start state.
Figure 20. Set the loginState state as the application's start state.
 
  1. Click OK.
    You should see the loginState state now shows the word start in parentheses as shown in Figure 21.
     
See the loginState state is now marked as the start state.
Figure 21. See the loginState state is now marked as the start state.
 
  1. Switch to Source mode.
  2. Locate the opening Application container tag and note that the currentState property has been added and set to the loginState state.
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" currentState="loginState">
  1. Locate the login Panel container.
  2. To the nested Button control, add the click event set to change the value of the currentState property to the portalState state.
<s:Button label="Submit" click="currentState='portalState'"/>
  1. Locate the Button control with a label property set to LOGOUT.
<s:Button label="LOGOUT" x="730" y="37" excludeFrom="loginState"/>
  1. To the Button control, add the click event set to the value of the currentState property to the loginState state.
<s:Button label="LOGOUT" x="730" y="37" excludeFrom="loginState" click="currentState='loginState'"/>
  1. Save the file and run the application.
    You should see the login state state shown in Figure 22.
     
The login state is shown when the application is run
Figure 22. The login state is shown when the application is run
 
  1. Click the Login button.
    You should see the application change to the portal state shown in Figure 23.
     
Change the application to the portalState state by clicking the Login button.
Figure 23. Change the application to the portalState state by clicking the Login button.
 
  1. Click the Logout button.
    You should be returned to the login state.
     
  2. Return to Flash Builder.
  3. Switch to Design mode.
  4. With the loginState state selected, select the Label control in the Employee of the Month Panel container.
  5. 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.
  6. Save the file.
  7. 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).
     
 The text in the Employee of the Month Panel container has changed.
Figure 25. The text in the Employee of the Month Panel container has changed.
 
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.
 

Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License+Adobe Commercial Rights


This work is licensed under a Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License. Permissions beyond the scope of this license, pertaining to the examples of code included within this work are available at Adobe.