With Flash Remoting on the rise we're beginning to see a plethora of advanced Flash applications hit the Web. I'm not talking about silly Web site intros or loading screens, but full-blown Web applications such as shopping carts, e-mail clients, content management systems, and expense reporting. Flash Remoting allows developers to do so much more with applications by utilizing Flash MX as the UI while serving up dynamic content from ColdFusion MX (or any application server that supports Flash Remoting).

As Flash applications become increasingly more complex, the harder they become to maintain and debug. If it weren't for debugging, applications would produce all sorts of errors and become very unstable. Through extensive testing and debugging, applications can run as expected and generate fewer headaches for both the developer and end user.

NetConnection Debugger: An Overview
We're going to take a look into an incredible tool that Macromedia provides for Flash developers known as the NetConnection Debugger (NCD), shown in Figure 1. The NCD simplifies application development by providing an intuitive UI that displays diagnostic information of the communication process between Flash, Flash Remoting, and CF. Developers can monitor data that is sent to and from the server such as query results (recordsets), arrays, structures, strings, integers, and so on. To access the NCD, the Flash Remoting components need to be installed as well as Flash MX and ColdFusion MX. For more information on Flash Remoting and downloading the components be sure to check out www.macromedia.com/software/flash/flashremoting/. To access the NCD go to Window > NetConnection Debugger within the Flash IDE.

As pretty as the NCD may seem, it serves no purpose without the necessary code to activate it and put it to work. To view the communication process, the NetDebug.as ActionScript file needs to be included in the Flash movie. This file is installed when the Flash Remoting components are installed and can be included using the following code:

#include "NetDebug.as"

Make sure to include this file in Frame 1 of the main timeline in your movie. This provides the code to activate the NCD and the methods to trace results to the NCD window. You don't need to worry about the location of this include file if you've successfully installed the Flash Remoting components. Flash initially looks in the local directory for the include file and then in the <Flash MX Install Dir>\Configuration\Include directory. The latter directory serves as a global location for includes when compiling Flash movies.

Note: It's good practice to include this file only when debugging your applications. When releasing your application to a production environment, be sure to comment this line out or remove it completely as this include file adds about 10KB to your compiled Flash file size.

If you're at all familiar with previous versions of Flash, you'll remember there was no simple way to debug applications. The problem could exist on either the client or server, and a series of steps had to be taken to help pinpoint the error. With the NCD all activity between the client and server can be monitored. Therefore any errors generated will be displayed in the NCD, which will keep the debugging process centralized and make it that much easier.

Configuring the Debug Application
Now that I've ranted and raved about how great the NCD is, let's look at a few working examples. First we'll retrieve data from CF via Flash Remoting and view the results in the NCD. You'll need to download the source files from www.flashcfm.com/cfdj/debug.zip and unzip them on your development machine. I recommend creating a directory labeled "cfdj" directly under your wwwroot. If you intend to install the files elsewhere, change the reference to the service object in debug.fla. The ActionScript code is located in Frame 1 of the AS layer. For the directory structure mentioned above, your code would look like:

myServiceObj = gw.getService("cfdj.debug", this);

The directory cfdj is directly under the Web root and debug points to the ColdFusion component (CFC). We establish a service connection with this component and can then make calls to different methods within the component. If you'd placed the install files in a directory like \wwwroot\flashremoting\cfdj\, then your service connection would look like:

myServiceObj = gw.getService("flashremoting.cfdj.debug", this);

You should also confirm that the URL variable is set correctly. For most local development configurations this will point to localhost but your configuration may vary. Once these settings are confirmed, you're ready to test the application and see how the NCD works.

NetConnection Debugger at Work
Make sure the NCD panel is activated and then test the movie by going to Control > Test Movie or hitting CTRL-Enter. The first event you'll see listed in the NCD is the connection string made to the Flash Gateway. You should see several buttons in the Flash movie, and we'll start off by retrieving data from CF. If you click the button labeled "retrieve query from server", you'll see a few events displayed in the debugger. These events include a call to the CFC method labeled "getQuery", the time to execute the query, and the results of the query. You'll also notice a trace event, which is a call to the NetDebug.trace method. This method allows you to specify a custom ActionScript object that you want to display in the NCD.

Figure 2 shows the query results sent from CF to Flash via Flash Remoting.

All debugging events are shown in the left-hand panel; summary and details are shown on the right. Icons displayed in front of the events denote whether the event corresponds with the client (Flash) or the server (CF). There's also an icon for general information messages and errors. All property objects are listed in blue, property names in red, and property values in black. The NCD allows you to view all the recordset data passed from CF in a single window. The same applies for other data types, such as arrays and structures. Click the other buttons to see what kind of info is displayed in the NCD.

Once the service method is called, the information is sent back to a result method in Flash. Since we're calling the getQuery method of the CFC, getQuery_Result will receive the response from the server and we can handle the data accordingly.

In this example we use the NetDebug.trace method to display the query results in the NCD. This can be useful when trying to view all of the query data at once. Listing 1 shows the service objects and their result methods, which trace the data to the NCD.

Now we'll take a brief look at sending data in the other direction, from Flash to CF. The ActionScript code varies a little since we have to construct the data objects on the client side this time. We'll call an imaginary service method named "receive" just for the purpose of generating an error and seeing the results within the NCD. If you click on the button labeled "send recordset to server", you'll see the method call in the events window and then an error should display (see Figure 3). If you look at the summary of the error, there will be a property called description, which generally contains the diagnostic information for the error. In this case the service doesn't contain a method named "receive" and the NCD tells us so.

So instead of having to test for errors directly on the server, Flash Remoting allows the error messages to be pulled into the NCD. This saves time and frustration when debugging applications. Listing 2 shows the necessary ActionScript code to handle passing different data objects from Flash to CF.

Conclusion
Now you should feel a bit more comfortable with using the NetConnection Debugger and troubleshooting your applications. Try to make a habit of having this panel active when testing Flash Remoting applications; you won't regret it. I can't tell you how much time this nifty little panel has saved me during the debugging process. It helps to keep everything centralized so more of your time will be spent within the Flash IDE and less time will be spent locating errors.

This is just a basic overview of the NCD. Feel free to look into some of the more advanced features, such as Filters and Preferences. Happy debugging!

• Figure 1
• Figure 2
• Figure 3
• Source Code