Watching Server-Client Data Exchange

One of the most frustrating debugging tasks can occur when dealing with data exchange on the server side. In some cases, you will not be able to tell if the problem exists in how you are handling the data once it has been received at the client or you simply are not getting the expected data back. The <mx:TraceTarget> tag and debugging your application will give you a wealth of information about the traffic passing between client and server.

1.	From the FlexGrocer project, open EComm.mxml. Just after the opening the <mx:Application> tag, insert an <mx:TraceTarget/> tag. Debug the EComm application by selecting it from the debug menu. Tip You might want to insert the <mx:TraceTarget> tags on the far left margin, ignoring best practice indentation. Because you do not want this debugging tag in your production code, it is easy to locate and remove when it is sitting on the left margin.
2.	Return to Flex Builder and double-click the Console view. Notice the HTTPService information in the Console view. [View full width] [SWF] C:\flex2tfs\flexGrocer\bin\EComm-debug.swf - 1,231,127 bytes after decompression '0C43236E-46E3-E632-438D-3573BDC724AF' producer set destination to 'ColdFusion'. '63C5E353-518F-1463-C894-3573BE15DD03' producer set destination to 'DefaultHTTP'. 'direct_http_channel' channel endpoint set to http: '63C5E353-518F-1463-C894-3573BE15DD03' producer sending message 61634; 'A5E7E4ED-6D21-40C1-C45F-3573BF5D1C27' 'direct_http_channel' channel sending message: (mx.messaging.messages::HTTPRequestMessage)#0 body = (Object)#1 clientId = (null) contentType = "application/x-www-form-urlencoded" destination = "DefaultHTTP" headers = (Object)#2 httpHeaders = (Object)#3 messageId = "A5E7E4ED-6D21-40C1-C45F-3573BF5D1C27" method = "GET" recordHeaders = false timestamp = 0 timeToLive = 0 url = "http://localhost:8300/flexGrocer/xml/categorizedProducts.cfm" '63C5E353-518F-1463-C894-3573BE15DD03' producer connected. '63C5E353-518F-1463-C894-3573BE15DD03' producer acknowledge of 61634; 'A5E7E4ED-6D21-40C1-C45F-3573BF5D1C27'. This information can give you a confirmation of the HTTPService request information.
3.	Terminate the current debugging session by clicking the red square in the Console view. Double-click the Console view to restore the normal debugging perspective. Remove the <mx:TraceTarget> tag and save the EComm.mxml application.
4.	From the DMS project you created in Lesson 21, "Synchronizing Data with Adobe Flex Data Services," open DMS_1.mxml. Just below the <mx:Application> tag, insert an <mx:TraceTarget/> tag. Debug the application. Change the price of grapes to 10.99. In the Console view, examine the wealth of information provided about the work Flex Data Services did. Note that you can see the data sent back to the server in part of that information. body=(Array)#0 [0] (Array)#1 [0] "cost" [1] (valueObjects::SmallProduct)#2 cost = 1.99 prodID = 1 prodName = "Grapes" uid = "1" [2] (valueObjects::SmallProduct)#3 cost = 10.99 prodID = 1 prodName = "Grapes" uid = "1" You can use this information to confirm that you have received data back to the client, and if a problem exists, it is most likely in the handling of the data at the client.
5.	From the DMS project, open DMS_2.mxml. Insert an <mx:TraceTarget/> tag just below the <mx:Application> tag. Debug the application. To see the information about a particular interaction, clear the console view by clicking the Clear Console button. You have seen how much data is placed in the console. If you want to eliminate all the data except for a particular server interaction, clear the Console view by clicking the button indicated in the example figure.
6.	Now return to your browser and add a new product. Examine the data in the Console view. When adding a new product, the new primary key value (in this case prodID) is automatically sent back to the client and synchronized.
7.	Remove all the <mx:TraceTarget> tags from your code and save the files. The TraceTarget is for debugging and should not be left in your production code.