An Introduction to Flash Builder 4-Network Monitor

Flex 3 with Java


June 2009

$10.00

Develop rich internet applications quickly and easily using Adobe Flex 3, ActionScript 3.0 and integrate with a Java backend using BlazeDS 3.2

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;

Here is the complete working code of the application. Run and check out some news from Packt Publishing.

<?xml version="1.0" encoding="utf-8"?>
<s:Application creationComplete="application1_creationCompleteHandler(event)"
xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600">

<fx:Declarations>
<s:HTTPService id="newsService" url="https://www.packtpub.com/rss.xml"
showBusyCursor="true" resultFormat="e4x"
result="newsService_resultHandler(event)"
fault="newsService_faultHandler(event)"/>
</fx:Declarations>
<fx:Script>
<![CDATA[
import mx.events.FlexEvent;
import mx.rpc.events.FaultEvent;
import mx.rpc.events.ResultEvent;

protected function application1_creationCompleteHandler
(event:FlexEvent):void
{
newsService.send();
}

protected function newsService_resultHandler(event:ResultEvent):void
{
var xml:XML = XML(event.result);
dataGrid.dataProvider = xml..item;
}


protected function newsService_faultHandler(event:FaultEvent):void
{
// TODO Auto-generated method stub
}

]]>
</fx:Script>
<s:layout>
<s:VerticalLayout verticalAlign="middle" horizontalAlign="center"/>
</s:layout>
<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>

</s:Application>

Exploring Network Monitor

If Network Monitor is not visible, then go to Windows Menu, select Other Views > Flash Builder > Network Monitor. Network Monitor is not enabled by default, so we have to first enable it by clicking on Enable Monitor which is the first toggle button of Network Monitor toolbar. Remaining three buttons are Suspend, Clear and Save used to suspend network monitoring, clearing responses and saving the requests in xml file respectively.

Now run the project, and wait for DataGrid to populate with News title and publishing date.

After getting news data, Double click on the Network Monitor tab to maximize it and select its first and only entry.

Left panel of the Network Monitor lists down all the most recent requests in real-time along with information such as:

  • Request URL (in our case its https://www.packtpub.com/rss.xml)
  • Type of Service Component (typically HTTPService, WebService, RemoteService, DataService or MessagingService)
  • Timing information such as Request time, Response Time and Elapsed time (ms)
  • Operation type (typically GET or POST)

Right panel of the network monitor provides further insight about the selected request in 3 different views which are:

  • Tree View (currently selected)
  • Raw view
  • Hex View

Tree view portrays a structured form similar to what we see in debug mode of a request.

In our case, Response tab of Tree View is providing information such as Status, Response Size, and Response Body where Response Body is what we have used to populate our data grid.

RAW view is for power users that shows data in Raw text form and HEX view proves its usefulness when transferred data is in binary form.

In case of some error, fault event is dispatched and Network Monitor will display something like that with detailed information of the error.

Network Monitor is an invaluable feature of Adobe Flash Builder 4 Premium Edition which has enabled developers to achieve what was previously only achievable through third party tools. However it has few limitations for instance it will not work with pure actionscript 3 projects and RTMP.

Summary

In this article, we have learnt about the brand new premium feature of Adobe Flash Builder 4 called Network Monitor along with an example.

Books to Consider

Flash Game Development by Example
$ 10.00
Oracle Warehouse Builder 11g: Getting Started
$ 10.00
comments powered by Disqus