An Introduction to Flash Builder 4-Network Monitor

Exclusive offer: get 50% off this eBook here
Flex 3 with Java

Flex 3 with Java — Save 50%

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

$23.99    $12.00
by | May 2010 | Web Development

In this article by Ali Raza, we will learn about the brand new premium feature of Adobe Flash Builder 4 called Network Monitor.

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;
Flex 3 with Java Develop rich internet applications quickly and easily using Adobe Flex 3, ActionScript 3.0 and integrate with a Java backend using BlazeDS 3.2
Published: June 2009
eBook Price: $23.99
Book Price: $39.99
See more
Select your format and quantity:

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.

Flex 3 with Java Develop rich internet applications quickly and easily using Adobe Flex 3, ActionScript 3.0 and integrate with a Java backend using BlazeDS 3.2
Published: June 2009
eBook Price: $23.99
Book Price: $39.99
See more
Select your format and quantity:

About the Author :


Ali RAZA is a fresh and invigorated aspirant in field of design, development and authoring. He is a graduate in computer science and earned several credentials such as Adobe Certified Instructor, Sun Certified Java Programmer, Adobe Certified RIA Specialist, Adobe Certified Web Specialist etc.

He is currently working as a senior developer in a UK based genealogy related social networking company, possessing panoptic experience of Five years in Graphics, Web and Multimedia Design. But today, he adores being in the enthralling world of Java, Adobe Flex, Flash, AIR and PHP. You can reach him at manofspirit@gmail.com.

Books From Packt

Pentaho 3.2 Data Integration: Beginner's Guide
Pentaho 3.2 Data Integration: Beginner's Guide

WordPress and Flash 10x Cookbook
WordPress and Flash 10x Cookbook

Spring Python 1.1
Spring Python 1.1

Drupal E-commerce with Ubercart 2.x
Drupal E-commerce with Ubercart 2.x

Learning jQuery 1.3
Learning jQuery 1.3

OpenStreetMap
OpenStreetMap

Firebug 1.5: Editing, Debugging, and Monitoring Web Pages
Firebug 1.5: Editing, Debugging, and Monitoring Web Pages

Getting started with Audacity 1.3
Getting started with Audacity 1.3

Code Download and Errata
Packt Anytime, Anywhere
Register Books
Print Upgrades
eBook Downloads
Video Support
Contact Us
Awards Voting Nominations Previous Winners
Judges Open Source CMS Hall Of Fame CMS Most Promising Open Source Project Open Source E-Commerce Applications Open Source JavaScript Library Open Source Graphics Software
Resources
Open Source CMS Hall Of Fame CMS Most Promising Open Source Project Open Source E-Commerce Applications Open Source JavaScript Library Open Source Graphics Software