| 
|
My DevCon 2002 session, Macromedia Flash for ColdFusion Developers,
focuses on building a Macromedia Flash interface for a ColdFusion
application. Often ColdFusion applications use a data drill-down
user interface to allow the user to drill down from general data
to more detailed data. The drawback of doing this in traditional
HTML/CFML is that every time a user clicks a link to drill down
to detailed information, she has to wait for the server (the ColdFusion
server and web server) to rebuild a new page and then reload the
new page in the browser.
In my 90-minute session, you can learn how to accomplish this
functionality on a single page with a Macromedia Flash movie (SWF).
In this way, your user will not have to wait for a page to rebuild
and reload each time the user clicks a drill-down choice.
You’ll build a Macromedia Flash application during the
session that looks and performs in this manner:
|
| |
 |
| Figure 1: The Macromedia
Flash application drill-down interface |
| |
The following scenario
describes the user experience for the drill-down interface. The
numbers below correspond to the numbers indicated in Figure 1.
- The database fills the ComboBox with data (Australia and
other countries) from one of its tables.
- Based on the user’s selection in the ComboBox, the
database populates a list box with data from another database
table.
- The user clicks an entry in the list box, and the Macromedia
Flash movie displays the detailed data for the user’s
selection in text boxes.
My session will teach you how to create a Macromedia Flash interface
that will accomplish the functionality detailed in Steps 1, 2,
and 3 above. This sneak preview focuses specifically on the process
involved in creating the user interface for Step 1: how to dynamically
fill the ComboBox with country names and display them in your
Macromedia Flash movie.
Prerequisites
To step through this sneak preview tutorial, you’ll need
Macromedia Flash MX, ColdFusion MX, and Macromedia Flash Remoting
MX. You can try or buy these products
from the Macromedia Online Store.
To use Macromedia Flash MX to create this portion of the application
interface, you should know that the ComboBox and ListBox are built-in
Macromedia Flash components that you can simply drag onto the
stage from the Components panel in the Macromedia Flash authoring
interface. The Text tool can be used to draw the text boxes on
the stage.
Filling the ComboBox
In creating Step 1 in this sneak preview, you’ll learn how
to use Macromedia Flash Remoting to call a ColdFusion component
that will fill a ComboBox with data.
Examining the ColdFusion component
You will build the application in Macromedia Flash, but ColdFusion
will supply the data from the database using a ColdFusion component,
acting as a web service. The component used appears in this code
display window. |
This component contains two functions: getCountry and getDist. The
component returns data from the database. Notice that both of the
cfreturn statements return a query page to the requesting
entity (since the web service can be consumed by different devices,
such as a web page, Flash Remoting, and so forth). Setting the access
attribute to remote in each function makes them available
as web services.
Copy the code in the display window and name it distributor.cfc.
|
Setting Up Flash Remoting
To set up Flash Remoting in your Macromedia Flash application,
you’ll put code in your ActionScript that will do the following:
- Include the ActionScript files needed to enable Flash Remoting.
- Create a connection to the server that is able to consume
the web services in the CFCs.
- Create a service that points to the CFC.
- Get the data.
The ActionScript code in this code
display window accomplishes the steps above.
|
All of the lines in this window (except the last line) showing the
ActionScript code are standard Flash Remoting setup. The last line
calls one of the functions in distributor.cfc, defined earlier.
In other words, Macromedia Flash invoked a method in distributor.cfc.
This code needs to be placed in the Actions panel for the first
frame of the Timeline. Open Macromedia Flash and be sure you have
a new document. Right click in the first frame of the Timeline,
and from the menu that appears, select Actions, as shown here. |
| |
 |
Ensure that you are in Expert mode in the Actions panel by selecting
the mode from the menu on the top right of the Actions panel, as
shown here. |
| |
 |
| |
Enter the ActionScript code for the Actions panel.
Writing the ActionScript to Populate the ComboBox
In the step above, you created code that sent a query back to
the Macromedia Flash application. Now you’ll learn how to
write a responder function. When Macromedia Flash finishes calling
a function, it then automatically calls the responder function.
The name of the responder function is simply the name of the method
invoked, followed by _result. The skeleton of the responder
function would look like this:
|
//Responder function for the GetCountry() method
function getCountry_result(result)
{
} |
|
If the function returns data, it is placed in the argument of the
function, in this case the variable named result. The name
result is a logical easy-to-remember variable name, but it
doesn't have to be the variable result—any other variable
name will work. Next, you’ll modify the responder function
to fill in the ComboBox. The ComboBox is simply a built-in component
in Macromedia Flash that you drag onto the stage, and give it
an instance name. Assume the name given in this case is country_cb.
To fill the ComboBox, you’ll use DataGlue. DataGlue has
a method called bindFormatStrings(). The method has the general
form:
|
DataGlue.bindFormatStrings(component,recordset,"#label#","#data#") |
| In this case, the component
is country_cb, the recordset is called result and, from the
CFC, you can see the label and data are CountryName and CountryID.
The statement that populates the ComboBox can be found in this
code
display window. |
You're now ready to test the movie. Save the file, and a .fla extension
will be added. To test it, choose Window > Test Movie. A SWF
file is built and displayed, and your ComboBox will be populated. |
Conclusion
Creating Step 1 in the application involved dynamically populating
the ComboBox with a ColdFusion component invoked by Flash Remoting.
This completes the sneak preview. To learn in detail how to accomplish
Step 2 (filling the list box) and Step 3 (filling the text boxes
based on the list box selection), come to my full session at DevCon
2002. I’ve given a summary of the steps required for steps
2 and 3 below. |
Step 2: Filling the list box
- Read all distributors using Flash Remoting and place them
in a recordset variable.
- Set an event handler for the ComboBox that will call a function,
as follows:
country_cb.setChangeHandler("showDistributors");
|
- Write the function, in this case named showDistributors,
to populate the list box.
|
Step 3: Filling
the text boxes based on the list box selection
The basic steps for filling the text boxes, based on a list box
selection are:
Set an event handler for the list box that will call a function.
Create a function that populates the text boxes and an event
handler that calls the function.. Assuming the text boxes are
called distName_txt and distCity_txt, the code to
fill the text boxes is displayed in this code
display window.
|
| |
| Come to DevCon
2002 to learn how build this Macromedia Flash application in
my hands-on session. Hope to see you there! |
| |
| |
|
| About the presenter
As a principal instructor for the Macromedia Educational Services
group, Matthew Boles has been using or teaching ColdFusion for
five years. Matthew has a diverse background in web development,
computer networking, and teaching, in both professional computer
classes and the public schools. He co-authored the Certified ColdFusion
Developer Study Guide, and has recently worked as a course developer
on the following official Macromedia
Training courses: The FastTrack to Macromedia Flash MX, Macromedia
Flash MX ActionScript, and Advanced ColdFusion MX Development.
|
| |
| |
| |
| |
