Flex Test Drive: Build an application in an hour

Video | Code | Tutorial | Links

Note: Flex Test Drive requires Flex 4.5 SDK and Flash Builder 4.5; download a 60-day trial version of Flash Builder 4.5 before continuing if you haven't already.

Create "pages"

• Download Flash Builder 4.5 Trial
• Download the Test Drive solution files (ZIP; 14 MB)

Code

Tutorial

In this tutorial, you create different "pages" in your application. HTML applications use pages as screens, but in Flex, you use a related but different concept called states. As you’ll see, unlike HTML, states do not necessarily appear in separate files.

You are going to create three states. The first is the interface you already built that appears when the application starts. The other two states will be Departments and EmployeeDetails, which will appear when a user clicks the Departments button or selects a row in the DataGrid, respectively.

Step 1: Create Employees and Departments states.

In Design mode, use the States view to create a new state called Departments based on the existing state, <State1>. In Departments, delete the existing DataGrid and add a new DataGrid called deptDg and a Button. Rename <State1> to Employees (see Figure 1).

Unlike in HTML pages, in Flex applications the same component can be part of more than one state. The XYZ Label and the Employees and Departments buttons are included in both the Employees and Departments states.

Take a look at the generated code. You will see the two states defined; the Application states property is set equal to an array of State objects for which you assign names:

The first DataGrid now has a property, includeIn, set to Employees, the only state for which it should be displayed:

Similarly, the second DataGrid is only included in the Departments state. Components without an includeIn property (or an excludeFrom property) are included in all states. Multiple states can be specified by using a comma-delimited list.

Step 2: Retrieve and display department data in the Departments DataGrid.

Bind the Departments DataGrid to the getDepartments() service operation and configure the return type to be an array of new Department objects. Use the Configure Columns wizard to customize the DataGrid (see Figure 2). Change the id property of the new DataGrid's typicalItem object from id1 (which was used for the empDg DataGrid) to id2.

Take a look at the generated code. All the code should look familiar. The generated typicalItem object though, was assigned the same id as that used in the empDg DataGrid, so give it another name, like id2.

Step 3: Change property values in different states.

In Design mode, set the Employees Button's enabled property to false in the Employees state and the Departments Button's enabled property to false in the Departments state (see Figure 3).

Switch to Source mode. The enabled property of each Button has been set to false for a single state:

Step 4: Change a property or style value in all states.

In Design mode, change the color of the Label and then switch to the other state; the color is changed for only the selected state. Apply the new color to all states by selecting Apply Current Properties to All States from the Label's context menu (see Figure 4).

When you first set the color in Design mode, some state is selected so you get the code color.somestate=somevalue. When you select to apply current properties to all states, this becomes color=somevalue instead and will be the value for all of the states that you have specified to include this component in.

Step 5: Create a new EmployeeDetails state.

Base the new EmployeeDetails state on the Employees state. In Design mode for the new state, drag out a Form container from the Layout section of the Components view and place it below the DataGrid (see Figure 5).

Step 6: Use a Form to display employee details.

From the Data/Service view, drag out the getEmployees() operation and drop it on the Form container. Using the wizard, create a noneditable form that uses the existing getEmployeesResult call (see Figure 6). Arrange the layout as shown in Figure 7 by dragging out a second Form container, dragging FormItem controls from one Form to another, and setting FormItem labels.

In Flex applications, a Form is simply a container that makes it easier to align your controls. Unlike HTML, it is not used to group data for submitting data to the server.

Here, you are not making a service call to retrieve the details for a specific employee because you already have all the details for every employee on the client. When getEmployees() is initially called to populate the DataGrid, all the employee data is retrieved. Thus, you only need to show the data for the selected employee in the form, which you will start in the next step. If you have lots of records with lots of fields, you initially may want to retrieve only the properties of the employees you are going to display in the grid and then make a service call to getEmployeesByID() to retrieve all the data for a specific employee to be displayed in the form.

Switch to Source mode and look at the generated code. You will see your new EmployeeDetails state defined in the states tag and you will see two new Form tags. Note that the text property of all the Label controls in the FormItem tags are bound to a property of an employee object:

Look in the Declarations section. You will see the employee object defined as an instance of the Employee class:

Step 7: Display the details for the selected employee.

Below the Declarations block, create a Binding tag and set its source  property to the selectedItem property of the empDg DataGrid cast as an Employee object and set the destination property to the employee object.

The as keyword must be used to cast the selectedItem to an Employee because the selectedItem property is defined as a general object but the employee must be an Employee object.

Step 8: Add objects to specific states.

Add four Buttons (updateBtn, deleteBtn, addBtn, searchBtn) and a TextInput (searchTxt) to the EmployeeDetails state (see Figure 8). Give the TextInput a prompt value of "Last Name". Switch to the Employees state; you will not see the new components. Return to the EmployeeDetails state, select the Add Button and in the Property view, specify to also include the Button in the Employees state (see Figure 9). Repeat for searchTxt and searchBtn and then run the application (see Figure 10).

Select an employee in the DataGrid; nothing happens. You have now created three states representing "pages" in your application. You will write event handlers to switch between the states, populate the details form, and search the employees in the next tutorial. You will wire up the Update, Delete, and Add Buttons in Module 2: Modify the database.

Learn more

Refer to the following resources to learn more about this topic:

Documentation: Using Flex 4.5

• Building the client application
• Adding View States and Transitions
• View states
• Transitions
• Generating a Form for an application
• Data Binding

Flex Developer Center

• Creating states