Adobe Flash Builder 4 (formally known as Adobe Flex Builder), which no doubt needs no words of introduction, has become a de-facto standard in rich internet applications development. Latest version is considered as a ground breaking release not only for its dozens of new and enhanced features but also for its new-fangled component architectures like Spark, designer-developer workflow, integration with flash and catalyst, Data centric development, Unit testing, Debugging enhancements etc.

In this article, we’ll get acquainted with a brand new premium feature of Adobe Flash Builder 4 called Network Monitor. Network Monitor enables developers to inspect and monitor client-server traffic in the form of textual, XML, AMF, or JSON data within the Adobe Flash Builder 4. It shows real-time data-traffic between application and a local or remote server along with wealth of other related information about the transferred data such as status, size, body etc. If you have used FireBug (A firefox plugin), then you will appreciate Network Monitor too. It is extremely handy during HTTP errors to check the response which is not accessible from the fault event object.

Creating a Sample Application

Enough Talking lets start and create a very simple application which will serve as groundwork to explore Network Monitor. Assuming you are already equipped with basic knowledge of application creation, we will move on quickly without going through minor details.

This sample application will read the PackPublishing Official RSS feed and display every news title along with its publishing date in a DataGrid control. Network monitor will set forth into action when data request will be triggered.

• Go to File Menu, Select New > Flex Project.
• Insert information in the New Flex Project dialog box according to following screenshot and hit Enter.

In Flex 4, all the non-visual mxml components such as RPC components, effects, validators, formatters etc are declared inside <fx:Declarations> tag.

• Declare a HTTPService component inside <fx:Declarations> tag.
• Set its id property to newsService
• Set its url property to https://www.packtpub.com/rss.xml
• Set its showBusyCursor property to true and resultFormat property to e4x.
• Generate result and fault event handlers, though only result event handler will be used.
  Your HTTPService code should look like following

  <s:HTTPService id="newsService" url="https://www.packtpub.com/rss.xml" 
  showBusyCursor="true" resultFormat="e4x" result="newsService_resultHandler(event)"
  fault="newsService_faultHandler(event)"/>

• Now set the application layout to VerticalLayout

  <s:layout>
     <s:VerticalLayout verticalAlign="middle" horizontalAlign="center"/>
  </s:layout>

• Add a Label control and set its text property to Packt Publishing
• Add a DataGrid control, set its id property to dataGrid, and add two DataGridColumn in it.
  • Set first column’s dataField property to title and headerText to Title
  • Set second column’s dataField property to pubDate and headerText to Date
    Your controls should look like as following

    <s:Label text="Packt Publishing" fontWeight="bold" fontSize="22"/>

    <mx:DataGrid id=”dataGrid” width=”600″>
    <mx:columns>
    <mx:DataGridColumn dataField=”title” headerText=”Title”/>
    <mx:DataGridColumn dataField=”pubDate” width=”200″ headerText=”Date”/>
    </mx:columns>
    </mx:DataGrid>

• Finally add following code in newsService’s result handler.

  var xml:XML = XML(event.result);
  dataGrid.dataProvider = xml..item;