Using Flex Builder to Create Web Service–Based Flex Applications

Using the Network Monitor To See SOAP Messages and ActionScript Objects

Now that you have set up the bindings and the trigger, it is time to test the application. The Network Monitor helps you debug Flex applications that use data services such as web services, Remote Objects, or HTTP. With the Network Monitor, you can examine the SOAP, AMF, Remote Object, XML, and HTTP traffic as it flows between the Flex application and the data service or services.

The Network Monitor also supports simple trace statements for basic application debugging. Network Monitor traces, such as the one below, display in the Network Monitor at runtime.

NetworkDebugger.NetworkMonitor.trace('trace text goes here');
  

1. Select Window > Network Monitor (Ctrl + Alt + N) to open the Network Monitor.

2. Select the Enable Flex Network Monitor checkbox to activate the Network Monitor.

   

   Figure 12. The Network Monitor in the enabled state.

3. Choose File > Run (F6) or click the Run button on the toolbar to preview the application. As the application loads, see the entries appear in the Network Monitor.

4. In testing this sample application, you aren’t interested in the HTTP traffic, so select the filter icon and deselect HTTP.

   Note: You do not lose the data when you deselect a filter, you only hide it. If you need the data, simply select the filter.

   

   Figure 13. The Network Monitor after selecting Run, with filtering button selected

   Because you have filtered out the HTTP traffic, you will see the following web service events:

   • First, the initialization of the web service where the web service WSDL is requested
   • Second, the WSDL that is received in response to the WSDL request

5. Select Product Management in the ComboBox and click the Get Employee List Button to trigger the web service operation. Notice that a few SOAP and web service events appear.

   Selecting the first SOAP event displays the SOAP envelope sent to the web service in the details pane.

   <?xml version="1.0" encoding="UTF-8"?>
   <SOAP-ENV:Envelope xmlns:SOAP-ENV="http://schemas.xmlsoap.org/soap/envelope/" xmlns:xsd="http://www.w3.org/2001/XMLSchema" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance">
      <SOAP-ENV:Body xmlns:ns1="http://localhost:8400/samples/services/EmployeeWS">
         <ns1:getList SOAP-ENV:encodingStyle="http://schemas.xmlsoap.org/soap/encoding/">
            <deptId xsi:type="xsd:string">PM</deptId>
         </ns1:getList>
      </SOAP-ENV:Body>
   </SOAP-ENV:Envelope>
   

   Selecting the first web service RPC event displays the SOAP envelope as represented in ActionScript.

   Method: getList

   Parameter 1:
   name : deptId
   type : string
   value : PM

   Selecting the second SOAP event displays the SOAP envelope received from the web service in response to the web service call.

   <?xml version="1.0" encoding="UTF-8"?>
   <SOAP-ENV:Envelope xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:xsd="http://www.w3.org/2001/XMLSchema" xmlns:SOAP-ENV="http://schemas.xmlsoap.org/soap/envelope/">
      <SOAP-ENV:Body>
         <ns1:getListResponse xmlns:ns1="http://localhost:8300/samples/services/EmployeeWS" SOAP-ENV:encodingStyle="http://schemas.xmlsoap.org/soap/encoding/">
            <getListResult xmlns:SOAP-ENC="http://schemas.xmlsoap.org/soap/encoding/" xsi:type="SOAP-ENC:Array" SOAP-ENC:arrayType="xsd:anyType[2]">
               <item href="#id0"/>
               <item href="#id1"/>
            </getListResult>
         </ns1:getListResponse>
         <multiRef xmlns:ns2="http://www.macromedia.com/samples" xmlns:SOAP-ENC="http://schemas.xmlsoap.org/soap/encoding/" id="id0" SOAP-ENC:root="0" xsi:type="ns2:Employee">
            <name xsi:type="xsd:string">Ronnie Hodgman</name>
            <phone xsi:type="xsd:string">555-219-2030</phone>
            <email xsi:type="xsd:string">rhodgman@fictitious.com</email>
            <salary xsi:type="xsd:double">0.0</salary>
         </multiRef>
         <multiRef xmlns:SOAP-ENC="http://schemas.xmlsoap.org/soap/encoding/" xmlns:ns3="http://www.macromedia.com/samples" id="id1" SOAP-ENC:root="0" xsi:type="ns3:Employee">
            <name xsi:type="xsd:string">Joanne Wall</name>
            <phone xsi:type="xsd:string">555-219-2012</phone>
            <email xsi:type="xsd:string">jwall@fictitious.com</email>
            <salary xsi:type="xsd:double">0.0</salary>
         </multiRef>
      </SOAP-ENV:Body>
   </SOAP-ENV:Envelope>
   

   Selecting the second web service RPC event displays the response to the web service call as represented in ActionScript.

   [array] : 
   length[Number] : 2
   [0][object] : 
   SOAP-ENC:root[String] : 0
   email[String] : rhodgman@fictitious.com
   id[String] : id0
   name[String] : Ronnie Hodgman
   phone[String] : 555-219-2030
   salary[Number] : 0
   xmlns:SOAP-ENC[String] : http://schemas.xmlsoap.org/soap/encoding/
   xmlns:ns2[String] : http://www.macromedia.com/samples
   xsi:type[String] : ns2:Employee
   
   [1][object] : 
   SOAP-ENC:root[String] : 0
   email[String] : jwall@fictitious.com
   id[String] : id1
   name[String] : Joanne Wall
   phone[String] : 555-219-2012
   salary[Number] : 0
   xmlns:SOAP-ENC[String] : http://schemas.xmlsoap.org/soap/encoding/
   xmlns:ns3[String] : http://www.macromedia.com/samples
   xsi:type[String] : ns3:Employee
   

   

   Figure 14. The Network Monitor after with the web service ActionScript object selected.

Developing and debugging applications can be time consuming. As you have seen, with Flex Builder’s visual data binding you can quickly wire together simple Flex applications. The Network Monitor eases the process of debugging data services in Flex applications, making you more productive.

Page 6 of 6

Previous Page