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.

Code your interactions

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

Code

Tutorial

In Flex, when a user interacts with a component in a Flex application, the component broadcasts events; for example, a click, rollOver,or rollOut event. To respond to an event, you specify an event handler function to be called when that event occurs.

In this tutorial, you write event handlers to switch between the application states when buttons are clicked, populate the details form when a DataGrid row is selected, and search the employees when a button is clicked or the Enter key pressed, and make the DataGrid text bigger when a button is clicked.

Step 1: Generate an event handler.

Right-click the Departments button and select Generate Click Handler. Make this the click handler for all states.

Flash Builder automatically switches to Source mode and you will see a new function:

... and a click event attribute in the Departments Button tag:

When the user clicks this Button in the EmployeeDetails state, that event handler function will be called. Change it, so this is the click handler for all states:

Step 2: Change to the Departments state on a Button click event.

Inside the function, switch to the Departments state by setting the currentState property of the Application to Departments. Run the application.

The Departments Button click event handler should appear like this:

When you run the application, you should now be able to click the Departments button to switch to the Departments state (see Figure 1). Note that the Employees button is now enabled and the Departments button is disabled.

Step 3: Change to the Employees state on a Button click event.

With the Departments state selected in Design mode, generate a click event handler for the Employees button and inside the function, switch to the Employees state.

The Employees Button click event handler should appear like this:

In the Employees Button tag, you can leave the attribute as click.Departments or change it to click.Either works because this Button is only enabled and clickable in the Departments state.

When you run the application, you should now be able toswitch back and forth between the Departments and Employees states. Select arow in the employee DataGrid, nothing happens.

Step 4: Change to the EmployeeDetails state on a DataGrid selectionChange event.

In Source mode, add a selectionChange attribute to empDg DataGrid and generate a selectionChange handler (see Figure 2). Inside the handler, set currentState to EmployeeDetails.

The DataGrid selectionChange event handler should appear as shown here:

When you run the application, you should now be able to select a row in the employee DataGrid and see the details for that employee (see Figure 3).

Step 5: Load new data on a click event.

Using the Data/Services view, configure the getEmployeesByName() operation to return an array of existing Employee objects, Employee[]. Drag the getEmployeesByName()operation onto the Search button. Inside the generated event handler, pass the user-entered value which is held in searchTxt.text to the operation. Change the responder to be the existing getEmployeesResult responder, and change the application to the Employees state.

By default, a new responder getEmployeesByNameResult is created:

... and used for the service call:

You want the results to be displayed in the existing empDg DataGrid, though, so change the responder to be the existing getEmployeesResult responder whose lastResult property is already bound to the dataProvider of the DataGrid through the AsyncListView object. You also want to switch the application back to the Employees state until the user selects another employee in the DataGrid.

You are not using the generated getEmployeesByNameResult responder so you can delete its definition in the Declarations block which is shown here:

Run the application and enter a last name like Smith in the search field and click Search. When the Search button is clicked, a new service call is made to the server and the responder is populated with this new data so the data displayed in the DataGrid changes. Select an employee and make sure the employee details are displayed (see Figure 4).

Note: If you do not see details for a selected employee, make sure you used the Data/Services view to configure the return type of the getEmployeesByName function to Employee[].

In this example, you are calling a method on the server to perform the employee filtering. However, because you already returned all the employee records to the client, you could have just filtered the records locally instead. This would be more efficient because unnecessary calls to the server would be avoided.

Step 6: Use conditional logic to retrieve all or only some records.

Modify the searchBtn click handler so that it calls getEmployeesByName() if searchTxt.text has a value, and getEmployees()if it does not.

Your event handler should appear as shown here:

Run the application. Search by a name and view the results. Next, remove any search string and search. You should see all the employees listed again.

Step 6: Search employees on an enter event.

Register to listen for the TextInput's enter event and set the event handler to the existing searchBtn_clickHandler() function. Change the event handlers event argument from type MouseEvent to Event.

Your TextInput should appear as shown here:

The enter event broadcasts a Flex event. The click event broadcasts a MouseEvent. In order to have the same event handler handle both events, you need to change its argument to the superclass type, Event.

Step 8: Modify object styles on a click event.

Add a ToggleButton control, toggleBtn with the label (in code font) Bigger Text, to the Departments state (see Figure 5). Generate a click handler for it that uses the setStyle() method to increase the DataGrid fontSize style.

The click handler should appear as shown here:

You cannot change styles at runtime using the object.property=value notation you use to set properties.Instead, you have to use the setStyle() method. Properties are set and are applicable to only one instance of an object whereas styles can be set in multiple places (inline, in CSS, or inherited), so setting a style on one object may also change the style of other objects. A StyleManager class has to be used to manage all the styles.

Run the application, switch to Departments, and click the Bigger Text button. The text in the DataGrid should get bigger.

Step 9: Decrease the text size when the ToggleButton is deselected.

Inside toggleBtn_clickHandler(), add conditional logic to see if the selected property of toggleBtn is true. If it is, increase the font size and set its label to Smaller Text. If it is not, decrease the text size and set the label to Bigger Text.

The event handler should appear as shown here:

Set the width of the ToggleButton to 100, so it does not change size as the label changes.

Run the application, switch to the Departments state, and make sure you can successfully increase and decrease the text size.

In this module, you built a Flex application with multiple states that can load and display data and perform database queries. To build on your knowledge, view some of the other Test Drive tutorials that cover topics such as updating your database based on user input, and debugging and deploying your application.

Learn more

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

• Learning ActionScript 3

Documentation: Using Flash Builder 4.5

• Generating event handlers

Documentation: Using Flex 4.5

• Events

ActionScript 3 Reference

• ActionScript Statements, Keywords, and Directives

Documentation: Using LiveCycle Data Services 3.1

• Using Adobe LiveCycle Data Services
• Using destinations
• System architecture

Documentation: Using LiveAdobe ColdFusion 9

• Flex and AIR integration in ColdFusion

Flex Developer Center

• Handling events