22 March 2010
A basic understanding of creating applications in Flash Builder and Flex is recommended. Prior experience with ColdFusion is not necessary, since all of the ColdFusion code for this tutorial has been created for you.
Flash Builder 4 includes a new feature, the Network Monitor, whichcan be used to debug network traffic between a Flex application and anapplication server at runtime. It works with any non-encrypted HTTPrequest, including those created with the URLRequest class and the FlexSDK’s RPC components (HTTPService, WebService, and RemoteObject).
Note: TheNetwork Monitor does not work on data exchanged over a secureconnection with SSL, or with data that’s managed by the Data ManagementService (a service hosted by Adobe LiveCycle Data Services).
Developerswho’ve used Flash Remoting since its early days to communicate withColdFusion or other application servers might remember the NetConnection Debugger,a tool that allowed you to trace and inspect network traffic atruntime. The new Network Monitor brings back these capabilities andimproves on them. It’s tightly integrated into Flash Builder 4, so youno longer need to start up an extra application to get the debugginginformation you need.
You can use theNetwork Monitor to inspect the contents of requests and responses sentbetween the Flex client and the application server, and to find out howlong the server is taking to respond to a request.
In this tutorial, you’ll use Adobe ColdFusion and a set of sample Flex applications to try out the Network Monitor.
TheColdFusion code is already written and doesn’t require a database. It’scompatible with both ColdFusion 8 and the newly released ColdFusion 9,so if you already have one of these versions installed you’re all set.If not, you can download and install the Developer and Trial editions of ColdFusionfree. If you typically use another application server with Flex andFlash Builder 4 and you don’t want to install ColdFusion, you canfollow steps similar to those outlined in this article with your ownapplications to test the Network Monitor with your server.
For this tutorial, you’ll use a set of Flex applications thatcommunicate with Adobe ColdFusion using the Flex SDK’s three RPCcomponents:
Theapplications use HTTPService to retrieve and parse a static XML file,WebService to call a SOAP-based web service operation, and RemoteObjectto call a remote method. For each communication protocol, you’ll usethe Network Monitor to inspect and compare the size and structure ofthe data returned by the server.
Torun the sample applications, you must first download and install AdobeColdFusion. The code provided in the sample files works on eitherColdFusion 8 or ColdFusion 9.
If you’re installing ColdFusion for this tutorial, please refer to Adobe ColdFusion 9 Help for installation details.Be sure to select the server configuration option that includes a JavaEnterprise Edition (JEE) server during the installation process. Alsochoose the built-in development web server rather than InternetInformation Services, Apache, or any other web server.
Note:When you choose the server configuration and the development webserver, your ColdFusion server listens on port 8500 instead of thedefault HTTP port of 80.
Lastly, make sure you complete the configuration wizard that appears at the end of the installation process.
Follow these steps to import the Flex project that contains the sample applications.
Theimported project contains three applications that you’ll use to testthe Network Monitor: HTTPServiceDemo, RemoteObjectDemo, andWebServiceDemo. Each uses one of the Flex SDK’s RPC components tocommunicate with the server and retrieve data.
Nextyou’ll configure the project for use with your installation ofColdFusion. Flash Builder 4 allows you to configure an existing Flexproject for use with an application server; this is a new feature thatwasn’t available with Flex Builder 3.
You’llneed to configure your server location to tell Flash Builder 4 whereyour server is installed and how to connect with it. Follow the stepsbelow to configure the project when using ColdFusion’s serverconfiguration and development web server.
Note: The settings for your ColdFusioninstallation may vary from those shown in Figure 4. Make any necessaryadjustments for your ColdFusion version, installation location,configuration, operating system, and web server. Be sure to name theoutput folder
networkmonitordemo under the web rootfolder as indicated, as the Flex and ColdFusion code both assume thisrelative location for the web service and remote object applications.
Next, open and test each of the sample applications.
<s:HTTPService id="service" url="data/contacts.xml" result="service_resultHandler(event)" fault="service_faultHandler(event)" showBusyCursor="true"/>
After a few moments, the XML data should be displayed in the DataGrid.
<s:WebService id="service" wsdl="http://localhost:8500/networkmonitordemo/cfc/ContactService.cfc?wsdl" result="service_resultHandler(event)" fault="service_faultHandler(event)" showBusyCursor="true"/>
After a few moments, the data should be displayed in the DataGrid.
<s:RemoteObject id="service" destination="ColdFusion" source="networkmonitordemo.cfc.ContactService" result="service_resultHandler(event)" fault="service_faultHandler(event)" showBusyCursor="true"/>
After a few moments, the data should be displayed in the DataGrid.
The web service and remote object applications make calls to the sameColdFusion code on the server. This code opens an XML file and parsesit, then delivers the data as an array of objects in the response.
Once you have anapplication that’s successfully retrieving data from a server with anRPC component, you can use the Network Monitor to trace and inspect therequest and response packets that are exchanged at runtime between theFlex application (the client) and the application server.
In order to use the Network Monitor, youmust enable it for the current Flex project and you must run theapplication in debug mode. Once it is enabled, when you use any of theRPC components to make requests the Network Monitor will trace anddisplay detailed information about the data being exchanged over thenetwork.
Youenable the Network Monitor from the Network Monitor view. This view isavailable by default in both the Flash and the Flash Debugperspectives, so you don’t necessarily have to switch to the FlashDebug perspective to use the tool.
Follow these steps to enable the Network Monitor for your project:
Note:By default, the Network Monitor is displayed in the tabbed region atthe bottom of the Flash Builder interface. If you don’t see it, chooseWindow > Network Monitor.
As shown in Figure 6, the Network Monitor view displays four icons in the upper right corner:
That’sit! The Network Monitor will now trace and display your requests andresponses when an application is running in debug mode.
Nowyou are ready to run the HTTPServiceDemo application in debug mode andinspect the requests and responses generated with a static XML file.
Note: With a large data set, it might take a few seconds to render the Raw and Hex views.
If you look at the response in Tree view, you can see the size ofthe response in bytes. On my system, the response size is 324,059bytes, which represents the combined size of the raw XML file and theHTTP response header returned from the web server.
Next you’ll run the WebServiceDemo application in debug mode and inspect the request and response.
The final application is RemoteObjectDemo. Follow these steps to run it in debug mode and inspect the request and response:
The client_ping request is used by the RemoteObject class tocheck the server’s responsiveness. The getData request represents thecall to the CFC function
Asshown in Figure 11, the response body type is AMF (Action MessageFormat). Also notice that the data type of the returned data objects isnetworkmonitordemo.cfc.Contact, a strongly typed value object classdefined on the server as a ColdFusion Component.
AMF is the binary format used by ColdFusion Flash Remoting and theRemoteObject class to exchange data over the web. The significantlyreduced size of the response is a direct result of using this binaryformat instead of the raw XML used by HTTPService or the SOAP formatused by WebService.
TheNetwork Monitor can help you discover valuable information such as thesize of request and response packets, how much time it takes toexchange data between client and server, how many requests are actuallybeing made, and the structure and contents of the data being sent andreceived. As you saw in this tutorial, the RPC components returnedresponses with dramatically different sizes. As a developer, myconclusion would be (and always is) to use Flash Remoting and theRemoteObject class whenever possible, to reduce packet size and speedup network communications.
You can also use theNetwork Monitor to evaluate how long each RPC component takes to returndata. In these sample applications, the WebService and RemoteObjectclasses are using the same server-side code, so comparing their elapsedtimes would give you meaningful information. Since the HTTPServiceclass is simply retrieving a static XML file, its elapsed time is muchshorter. Regardless of which services you use, though, I recommendtesting each scenario multiple times and taking an average of theresults. There are many possible factors than can influence anyparticular request and response. In addition, make sure your samplesize is realistic; if you have too little sample data, you might bebasing your decisions on results that aren’t representative of the realworld.
You can learn more about the Network Monitor and other data access and debugging tools in Flash Builder 4 from these resources:
And be sure to visit the Flex Developer Center for more helpful tips and tutorials.