This content requires Flash To view this content, JavaScript must be enabled, and you need the latest version of the Adobe Flash Player. To view this content, JavaScript must be enabled, and you need the latest version of the Adobe Flash Player.

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

Code

        <?xml version="1.0" encoding="utf-8"?>
<s:Application …>
   <fx:Script>
      <![CDATA[
         (…)
         import spark.events.GridSelectionEvent;
                  
         protected function deptBtn_clickHandler(event:MouseEvent):void
         {
            currentState="Departments";
         }
         protected function empBtn_clickHandler(event:MouseEvent):void
         {
            currentState="Employees";
         }
         protected function empDg_selectionChangeHandler(event:GridSelectionEvent):void
         {
            currentState="EmployeeDetails";         
         }
         protected function searchBtn_clickHandler(event:MouseEvent):void
         {
            if(searchTxt.text!="")
            {
               getEmployeesResult.token = employeeService.getEmployeesByName(searchTxt.text);
            }
            else
            {
               getEmployeesResult.token = employeeService.getEmployees();
            }
         currentState="Employees";
         }
         protected function toggleBtn_clickHandler(event:MouseEvent):void
         {
             if(toggleBtn.selected){
                 deptDg.setStyle("fontSize",14);
             toggleBtn.label="Smaller Text";
             }
             else{
                deptDg.setStyle("fontSize",12);
             toggleBtn.label="Bigger Text";
             }
         }
      ]]>
   </fx:Script>
   (…)
   <s:Button id="empBtn" click.Departments="empBtn_clickHandler(event)" …/>
   <s:Button id="deptBtn" click="deptBtn_clickHandler(event)" …/>
   <s:DataGrid id="empDg" selectionChange="empDg_selectionChangeHandler(event)" …>
   (…)
   <s:Button id="searchBtn" click="searchBtn_clickHandler(event)" …/>
   <s:TextInput id="searchTxt" enter="searchBtn_clickHandler(event)" .../>
   <s:Button id="toggleBtn" includeIn="Departments" x="600" y="100" label="Bigger Text" width="100"
                      click="toggleBtn_clickHandler(event)"/>
</s:Application>
    

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:

        protected function deptBtn_clickHandler(event:MouseEvent):void
{
// TODO Auto-generated method stub
}
    

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

        <s:Button id="deptBtn" x="140" y="100" label="Departments"
enabled.Departments="false"
click.EmployeeDetails="deptBtn_clickHandler(event)"/>
    

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:

        <s:Button  id="deptBtn" x="140" y="100"
label="Departments"
    enabled.Departments="false" click ="deptBtn_clickHandler(event)"/>
    

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:

        protected function deptBtn_clickHandler(event:MouseEvent):void
{
   currentState="Departments";
}
    

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.

Figure 1. In a browser, switch to the Departments state.

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:

        protected function empBtn_clickHandler(event:MouseEvent):void
{
   currentState = "Employees";
}
    

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.

Figure 2. Generate a DataGrid change event handler.

The DataGrid selectionChange event handler should appear as shown here:

        protected function empDg_selectionChangeHandler(event:GridSelectionEvent):void
               
{
    currentState="EmployeeDetails";
}
    

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).

Figure 3. In a browser, select an employee to view the EmployeeDetails state.

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:

<s:CallResponder id="getEmployeesByNameResult"/>

... and used for the service call:

        protected function searchBtn_clickHandler(event:MouseEvent):void
{
   getEmployeesByNameResult.token =
   employeeService.getEmployeesByName(searchTxt.text);
}
    

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.

        protected function searchBtn_clickHandler(event:MouseEvent):void
{
   getEmployeesResult.token = employeeService.getEmployeesByName(searchTxt.text);
currentState="Employees";
}
    

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

<s:CallResponder id="getEmployeesByNameResult"/>

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[].

Figure 4. View details.

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:

        protected function searchBtn_clickHandler(event:MouseEvent):void
{
    if(searchTxt.text!=""){
       getEmployeesResult.token = employeeService.getEmployeesByName(searchTxt.text);
    }
    else{
       getEmployeesResult.token = employeeService.getEmployees();
    }
    currentState="Employees";
}
    

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:

        <s:TextInput id="searchTxt" includeIn="EmployeeDetails,Employees" x="494" y="100" prompt="Last Name" enter="searchBtn_clickHandler(event)"/>
    

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.

        protected function searchBtn_clickHandler(event:Event):void
{
   (...)
}
    

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.

Figure 5. Add a Bigger Text ToggleButton to the Departments view.

The click handler should appear as shown here:

        protected function toggleBtn_clickHandler(event:MouseEvent):void
{
    deptDg.setStyle("fontSize",14);
}
    

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:

        protected function toggleBtn_clickHandler(event:MouseEvent):void
{
   if(toggleBtn.selected){
      deptDg.setStyle("fontSize",14);
	 toggleBtn.label="Smaller Text";
   }
   else{
      deptDg.setStyle("fontSize",12);
	 toggleBtn.label="Bigger Text";
   }
}
    

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

        <s:ToggleButton id="toggleBtn" includeIn="Departments" x="600" y="100" width="100"
label="Bigger Text" click="toggleBtn_clickHandler(event)"/>
    

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 LiveCycle Data Services 3.1

Documentation: Using LiveAdobe ColdFusion 9

Flex and AIR integration in ColdFusion

Flex Developer Center

Handling events

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.

Tutorials and samples

Tutorials

Samples

Flex user forum

08/04/2011	Disabling auto-complete on Spark ComboBox
01/24/2013	Flash Builder 4.7 and design view question
05/16/2013	Generating a SWF from a .AS file?
05/15/2013	XSS Cross Site Scripting Issue in Flex messagebroker amfsecure URLs

Flex Test Drive: Build an application in an hour

by Adobe

Modified

Page tools

Code your interactions

Code

Tutorial

Step 1: Generate an event handler.

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

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

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

Step 5: Load new data on a click event.

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

Step 6: Search employees on an enter event.

Step 8: Modify object styles on a click event.

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

Learn more

Documentation: Using Flash Builder 4.5

Documentation: Using Flex 4.5

ActionScript 3 Reference

Documentation: Using LiveCycle Data Services 3.1

Documentation: Using LiveAdobe ColdFusion 9

Flex Developer Center

More Like This

Tutorials and samples

Tutorials

Samples

Flex user forum

Flex Cookbook

Products

Download

Support & Learning

Buy

Company