Dennis Baldwin

Subscribe to Dennis Baldwin: eMailAlertsEmail Alerts
Get Dennis Baldwin: homepageHomepage mobileMobile rssRSS facebookFacebook twitterTwitter linkedinLinkedIn


Related Topics: ColdFusion on Ulitzer

CFDJ: Article

Flash Up Your Forms with Components

Flash Up Your Forms with Components

Flash MX has hit the streets, and some amazing applications are already under development.

Macromedia has gone above and beyond by providing us with this fully functional Web development tool. Now with drag-and-drop components such as scrollbars, list boxes, calendars, and much more, developers can harness the power of reusable code. This will dramatically enhance the development process as well as cut down the time it takes to maintain and debug Flash applications.

No longer "just an animation tool," as it has been labeled in the past, the new Flash has given rise to more full-blown Web applications that utilize Flash as the front end with a powerful application server like ColdFusion as the back end. Long gone (I'm hoping) are the days of useless intros, so let's make a conscious effort to start pushing Flash MX application development to its limits!

In Flash5 we were introduced to an incredible scripting environment that just keeps getting better. ActionScript allows the developer to harness the power of modular, object-oriented code that can control all aspects of a Flash movie. Reusable code is a staple in today's development projects and will save time and frustration in the long run. We'll take a look at a Flash application that utilizes components, gathers user input, and passes this information to be handled by CF. Let's get started.

Example Application
The purpose of this application is to become familiar with some new Flash MX components along with a few of their methods. Not only that, we'll see how simple it is to send information back and forth between Flash and CF. Since forms are used on practically every Web site, this will be a good example of how components can be used to enhance development. Flash MX has several built-in components that we'll get to know a little better.

The Macromedia development team has provided us with some handy form components that mimic HTML-based form elements. You'll need to download and install the Flash UI Components Set 2 from the Macromedia Exchange (http://dynamic.macromedia.com/bin/MM/exchange/main.jsp?product=flash). Installing these components requires the Extension Manager, which can also be downloaded from the exchange.

The Flash form will gather information from the user and insert it into the database. The key to handling information provided by the user resides in the ActionScript code. Almost every event has a corresponding method, or handler, that gathers the data and places it into a data object, which is then sent to CF upon submission.

Digging Into the Code
Open "form_components.fla" (this and other files referenced in this article are downloadable at www.flashcfm.com/cfdj/form_components.zip) and you'll see the code in frame one of the AS layer. This is all the code necessary to run the application. The components were dragged and dropped onto the stage and assigned the corresponding methods listed in the AS code. The init method is the key to kick-starting the application by setting focus to the "first_name" field, creating the data objects, initializing a few variables, and loading the states list from CF (see Listing 1).

The data object is simply a container that will gather data from the user and send it to the server once the form is submitted. The receive object will accept a response from the server and display whether the transfer was successful or not. The LoadVars object, new to Flash MX, adds increased functionality when sending and loading data, similar to the XML object. As with loading the states list from CF, an event handler that will fire once the data has finished loading can be specified. In our application the statesLoaded method is called and the data is handled accordingly.

function statesLoaded(success) {
if(success) {
var states = this.state.split(",");
state_mc.setDataProvider(states);
} else {
trace("error loading data");
}
}
If the load is successful, the states are split into an array and used to populate the combo box component, (see Figure 1), which has been assigned an instance name of "state_mc". The setDataProvider method is available to all combo box components and provides an efficient way of populating the combo box with data.

To learn more about the methods of Flash MX components, be sure to view the ActionScript reference panel (Window > Reference). This panel comes in very handy when using components and learning how to interact with them.

The CF code in get_states.cfm is a simple database query that pulls the states from a table and places them in a comma-delimited list. Be sure to take a look at the states table in the users.mdb database. If a problem occurs when loading the states from CF, an error message is output to the debug window. It's a good idea to use a fully qualified URL, set in the "base_href" variable, so the CF data can be parsed and loaded into Flash within the IDE. If a relative URL is used, your CF code will be loaded into Flash and won't be very helpful for testing and debugging your application. Otherwise you'll have to publish and test your movie through the browser every time, which can be an extremely monotonous process.

The application has been initialized - what next? We need to start gathering data from the user and building our data object to send to CF. The input text fields such as first_name, last_name, city, and e-mail simply sit on the stage and wait for user input. These field values will be set in our data object once the send button is pressed; we'll look into this shortly.

The calendar component is a powerful one and in our application serves as a means to let users specify their birth date. The calendar carries an instance name of birthDate_mc and is assigned a change handler of getBirthDate. Each time a selection is made on the calendar the getBirthDate handler is called (see Listing 2).

When getBirthDate is called, we grab the date value using the getSelectedItem method. This value is set in our "birth_date" variable, and we use a little ActionScript to take care of the rest. Once we have the selected date, we need to format it in a manner compatible with CF. To do this we simply take advantage of the Flash Date object and create a new date from "birth_date". Now that we've formatted "birth_date" into a valid date object, we can call different methods of this object. Once these methods are called we can build our date string in the format of YYYY-MM-DD. After it's been built we set it in our dataObj, which will be sent to the server.

We'll look at the next three components at the same time since they access a similar method. The state (combo box), gender (radio button), and notify (check box) components use the getValue method to specify what selection the user has made. The methods in Listing 3 are assigned as change handlers to set the state, gender, and notification variables in our data object. To specify a change handler, select the component on the stage and go to the parameters tab in the properties panel (see Figure 2).

The comments field, a multiline text field that is set to wrap, ia assigned an instance name of "comments". The purpose of the instance name is to provide a way for the scrollbar component to reference the text field. Once the scrollbar is dragged onto the stage it needs to be assigned a target text field. As with all components, this is specified in the properties panel. After assigning this target (in our case it's "comments"), the scrollbar is ready to perform. Any text that goes beyond the viewable area will trigger the scrollbar, which has very advanced functionality. Play around with it and see if it doesn't remind you of a typical Windows scrollbar.

So our user has completely filled out the form and clicks the send button - now what? The send button is actually a push-button component and is assigned the sendData method (see Listing 4) as its click handler.

Once the method is called, we assign our input text values to the data object. Since the data object was constructed as a LoadVars object, we have access to the sendAndLoad method, new to Flash MX. This method takes dataObj and sends it to the specified CF template, in our case "data_insert.cfm", to be handled by the server. The data is received by CF as name value pairs and by default is sent via the "POST" method. We can access these variables in CF as #form.first_name#, #form.last_name#, and so on.

The second parameter of the sendAndLoad method is a result function that can be used to handle the data sent back from CF.

The receive object was initialized at the beginning of the application when "init()" was called. This object waits for the response from CF and calls the "receiveHandler()" method when loaded (see Listing 5).

If the user's information is recorded successfully, we display the message box component (also part of the Flash UI Components Set 2) with the corresponding message. The send push button is disabled, via the setEnabled method, to prevent the user from accidentally resubmitting the form. If there's an error, we display the message clip with an error message. The user can acknowledge the error, correct the form, and submit it again.

Summing Up
Flash and ColdFusion integration may seem daunting at first, but with a little time and effort the knowledge you gain from building this basic form can be leveraged into building full-blown, integrated applications. Components are your friend, and they're here to save you time, money, and frustration. To develop this form from scratch, using components and writing the necessary code, could take from four to five hours. Without these components you'd be looking at three to four days to build a basic calendar...and you'd just be getting started! Take some time and get to know the component methods and how to access them. Learn how Flash and ColdFusion talk to each other and challenge yourself to build on this application. Try adding e-mail functionality where the user receives an e-mail after the form is submitted. The sky really is the limit when building integrated applications, so enjoy.

More Stories By Dennis Baldwin

Dennis Baldwin is a software developer for SensorLogic Inc, an M2M application service provider. He also runs and maintains an online community for Flash and ColdFusion developers at www.devmx.com.

Comments (1) View Comments

Share your thoughts on this story.

Add your comment
You must be signed in to add a comment. Sign-in | Register

In accordance with our Comment Policy, we encourage comments that are on topic, relevant and to-the-point. We will remove comments that include profanity, personal attacks, racial slurs, threats of violence, or other inappropriate material that violates our Terms and Conditions, and will block users who make repeated violations. We ask all readers to expect diversity of opinion and to treat one another with dignity and respect.


Most Recent Comments
kevin 09/24/02 07:07:00 PM EDT

try this