Rich Internet Applications (RIAs) are the order of the day for web developers. Visually stimulating, intelligent and interactive, these applications help you enhance the user experience tremendously. Adobe Flex has been a great enabler to create such RIAs with great ease. Using its extensive framework and ready to use components, coupled along with some third party controls, developers can now build a myriad of solutions in no time at all.

In this article, I'll demonstrate how to create an interactive weather dashboard in Adobe Flex. Dashboards can be of many types - financial, manufacturing, retail, health etc. I have chosen weather dashboard as an example as it is domain agnostic, calls for varied type of data visualization, and is easy to understand. Another reason is that it allows us to connect to external data sources, Yahoo! Weather RSS Feed in our case, and then build the output based on such values.

To build interactive gauges, I've used FusionCharts for Flex – a third party data visualization component for Flex that helps developers build charts and gauges in Flex. This is because Adobe Flex does not natively provide such data visualization components, and building one from scratch can be time consuming and expensive. The application will essentially be a dashboard which consists of various gauges that are updated through a live feed.

Overview

Let's begin by taking a look at what our end dashboard would look like. You can see the live version of it here.

Not exactly like your every day weather widget application, but it covers the most of what the feed has to offer.

The dashboard is made up of four types of gauges, which are updated in real time, with data acquired from the live feed. The dashboard also contains some standard Flex controls that are also updated in real-time. An editable gauge (the slider) has been provided to allow users to toggle between today's and tomorrow's weather.

Now that we have seen the application, let's see how it works. The following diagram shows the component architecture of the application:

As suggested by the diagram, the application comprises of the following main parts:

1. FusionCharts for Flex, to provide the gauge components. Gauges in FusionCharts for Flex are called FusionWidgets.
2. The YahooWeather service that provides live data feed
3. The main weather widget application which serves as an interface between the data feed and the other components.

Setting up the project essentially involves installing FusionCharts for Flex and then adding some resource files that are necessary for the project. Installing FusionChart for Flex is a simple copy-paste affair. FusionCharts for Flex comes as a SWC library module for Flex which can be fully integrated with the Flex Builder application, or it can be used as an external library for the free Flex SDK.

To set up FusionCharts for Flex just follow these simple steps:

1. Get the FusionCharts for Flex module and extract the archive. The location where you have extracted the FusionCharts for Flex archive will subsequently be referred to as DISTRIBUTION_ROOT.
2. Create a new Flex project with which you want to associate the FusionCharts for Flex module.
3. Copy the FusionCharts.swc Shockwave component from DISTRIBUTION_ROOT/Charts to PROJECT_ROOT/libs folder.
4. Copy the fusionwidgets folder from DISTRIBUTION_ROOT/Charts to the PROJECT_ROOT/src folder.

After setting up FusionCharts for Flex, just add the following resources to your project. You can get all the resources from WeatherWidget Source archive.

1. Copy the images folder from the root of the archive to PROJECT_ROOT/src folder.
2. Copy the Style.css and YahooWeatherData.as files from the root of the archive to PROJECT_ROOT/src folder. These files contain style definitions and static data that is needed for the project.
3. Create a folder called data in PROJECT_ROOT/src. This folder will hold the XML definition for all your weather gauges.

Once you have followed the instructions mentioned above, the resulting folder structure would look similar to the one depicted in the image below. We have named the project as WeatherWidget – hence, a MXML file of the same name has been created automatically.

Let's start off by creating the wind speed gauge. FusionCharts gauges can be configured by specifying data and other configurations in custom XML format. The XML is easy to understand and after creating the wind speed gauge, you would be familiar with the key concepts of FusionCharts XML. We’ll be creating an angular gauge for displaying the wind speed.

Following are the steps for creating an angular gauge:

Step 1: Creating the basic gauge

In order to create a gauge, we need to set the lower and upper limits of the gauge scale. We must also specify the initial value at which the gauge’s dial will point. Following is the XML for a basic gauge:

[as]<!-- the root chart element and its related attributes -->
<chart lowerLimit='0' upperLimit='120'>

   <-- dials tag are used to declare one or more dials -->
   <dials>
      <dial value='0' />
   </dials>
</chart>[/as]

As you can see, the lowerLimit and upperLimit attributes define the range of the angular scale. For our wind speed gauge, we have set the range of the scale from 0 to 120. We have added one dial and made it to point to 0 (by setting value='0'). There are no restrictions to the number of dials that a gauge can have. If required we could easily have shown multiple dials by declaring multiple <dial> elements within the <dials> tag.

Step 2: Customizing the Gauge

Now that we have the basic gauge, lets improve upon its cosmetic and functional properties. We will be customizing the tick marks that are displayed on the gauge scale. Essentially, we are gonna set the number of major tick marks and also change its size and color. Let's take a look at the code:

[as]<chart majorTMNumber='8' majorTMThickness='3' 
   majorTMColor='92c1f3' majorTMHeight='15' ...>

   <dials> ... </dials>

</chart>[/as]

The attributes specified in the <chart> tag are self explanatory, but just to make things clear; majorTMNumber specifies the number of major tick marks, majorTMThickness specifies the thickness of major tick marks, majorTMColor specifies the color of major tick marks and majorTMHeight specifies the height of major tick marks.

We can also customize the dial by specifying its radius, base width etc.

[as]<dial ... baseWidth='25' radius='65' ... />[/as]

To come up with the wind speed gauge (as depicted in the image above), we had to use some additional XML attributes. You can get the full XML of the gauge from WindSpeed_Basic.xml. If you don't understand what the attributes do, you can always refer to the AngularGauge XML reference section of the FusionCharts for Flex documentation.

Step 3: Creating the FusionWidgets object

Now that we have the XML data for the gauge, it's time to build the gauge in Flex. We begin by adding the FusionWidgets tag to our source MXML:

[as]<ns1:FusionWidgets FCChartType="AngularGauge" FCDataURL="data/WindSpeed.xml"/>[/as]

The tag represents a generic FusionWidgets object. Now, we need to specify the type of gauge that we want to build and the XML data for the gauge. To specify the gauge type you must use the expression FCChartType="AngularGauge". And, to specify the XML data for the gauge, you need to specify the URL or the relative path of the XML data file using FCDataURL property. You can learn more about creating these gauges from Creating a simple gauge section of the FusionCharts for Flex documentation.

Step 4: Running the application

It's now time to test the wind speed widget; the complete source code for everything that has been discussed till now can be obtained from WeatherWidget Source zip package. Setup the project as discussed earlier and then compile the WeatherWidget_example1.mxml file. Now, run the application to see the gauge in action.

Step 5: Adding annotations (visual elements used for decoration or adding more description)

Now, that we have built and tested the basic application, let's make it better by adding annotations to it. We will add a new XML element called annotations to our existing XML data file. Here's the code:

[as]<annotations>
   <annotationGroup id='Grp1' xScale='200' yScale='120' ... >
      <annotation type='circle' color='FFFFFF' radius='2' ... />
   </annotationGroup>
</annotations>[/as]

Here's how annotations are appended to the XML structure:

[as]<chart ... >

   <dials> ... </dials>
   
   <annotations> ... </annotations>
   
</chart>[/as]

We've created a circular annotation of radius 2 pixels and adjusted its coordinates in order to position the annotation above the base of the dial. This gives the dial a glittery look.

Step 6: Adding Styles (Visual configuration for gauge)

Now that our wind speed gauge has annotations, it's time to spice things up with the help of styles. To add styles you'll have to append the XML with yet another <styles> element. Adding styles to a gauge requires following configurations:

1. Definition elements through which styles are defined
2. Application elements through which styles are mapped onto various parts of the gauge

Following is the XML code for declaring styles:

[as]<styles>
   <definition> 
      ...
      <style name='circleBlur' type='blur'/>
   </definition>
   <application>
      ...
      <apply toObject='Grp1' styles='circleBlur' />
   </application>
</styles>[/as]

The style definition <style name='circleBlur' type='blur'/> helps in creating a blur effect. The name attribute is used to define a unique identifier for each style and the type attribute is used for specifying the effect that the style will create. Additional attributes may be used depending on the nature of the style definition.

After the styles have been defined, they must be mapped onto various elements of the gauge. The style application XML <apply toObject='Grp1' styles='circleBlur' />, applies the style named circleBlur to a gauge element named Grp1.

Styles are appended to the XML structure in the following manner:

[as]<chart ... >
   <dials> ... </dials>
   <annotations> ... </annotations>
   <styles> ... </styles>
</chart>[/as]

You can get the modified XML code from the WindSpeed_Annotations.xml file. The stylized gauge will look like this:

As discussed earlier, we will be using the Yahoo! Weather API to retrieive live weather data. To learn more about the Yahoo! Weather API visit http://developer.yahoo.com/weather/.

We have set up a boundary class called YahooWeather which acts as an interface between the feed and our main application. The feed is requested through an HTTPService object:

[as]//initialise a new HTTP service
feedService = new HTTPService();

// set the request URL for the service
feedService.url = "http://weather.yahooapis.com/forecastrss?p=" + zip + "&u=f"; [/as]

Based on the zip code entered by the user, the service, requests for the weather information of a particular location.

The YahooWeather class also tracks the result and fault events of the service and keeps a record of successful or failed data retrieval attempts.

[as]feedService.addEventListener(ResultEvent.RESULT, raiseResult);
feedService.addEventListener(FaultEvent.FAULT, raiseError);[/as]

However neither the result nor the fault events are effectively handled here. Rather, they are dispatched to the parent application.

[as]private function raiseResult(e:ResultEvent):void {
    dispatchEvent(e);
}

private function raiseError(e:FaultEvent):void {
    dispatchEvent(e);
}[/as]

The dispatchEvent(e:Event) method is used to dispatch the very events which trigger these functions. So the class essentially relays the events to its parent.

You can update the feed any time by calling the update() method. To learn more about the YahooWeather class, please check out the source file - YahooWeather.as.

Putting it all Together

Now, that we have both the weather gauges and the live feed, it's time to put it all together and build the weather widget.

Step1: Laying out the components

The components after being properly layed out, in design view, should look as under. Different types of gauges from FusionWidgets component have been dragged and dropped on the stage. Each widget has been specified its unique ID and size.

The equivalent MXML code for this step can be obtained from WeatherWidget_Layout.mxml file. The related style and data for the application should already be there from when you set up the project.

Step 2: Initializing the application

The initialize event is triggered upon activation of the WeatherWidget application and consequently the following code is executed:

[as]// create a new instance of our YahooWeather class
feed = new YahooWeather();

// track the result and fault event of the feed service
feed.addEventListener(FaultEvent.FAULT, gotError);
feed.addEventListener(ResultEvent.RESULT, updateWidgets);

// track changes made in the forecast panel
daySelector.addEventListener("FCChartUpdatedEvent", changeForecast);[/as]

As you can see, we are tracking the updates acquired by the feed. Additionally, we are also tracking an event of the editable gauge that allows the user to switch between today's and tomorrow's weather (this will be discuss later).

Step 3: Updating the gauges in real time

As indicated by the initialization code (above), the task of updating the gauges with current data acquired from the feed, is carried out by the updateWidgets() method. The updateWidget() method updates both the values and the labels of each gauge.

[as]// initiailze a new feed
channel = e.result.rss.channel;

//retrieve the wind chill
var wc:Number = Number(channel.wind.chill);[/as]

The above code assigns the feed's channel to a local object. Following which, it retrieves the wind-chill factor from that object.

Each gauge object is updated using FCSetData method in the following manner:

[as]// FCSetData(value:Number)
windChill.FCSetData(wc);[/as]

In case of a linear or an angular gauge the FCSetData method is declared in the following manner:

[as]// FCSetData(dialIndex:Number, value:Number)
windSpeed.FCSetData(1,wd);[/as]

The above code sets the value of the dial 1 to wd.

Step 4: Dynamic forecast panel with user editable gauge (slider)

The data displayed on the widgets depends on the status of the editable gauge which allows the user to view either today's or tomorrow's weather. The editable gauge is essentially a linear gauge which has been made editable. A gauge can be made editable by declaring the XML attribute editMode='1'.

[as]<chart editMode='1' ... >
   ...
</chart>[/as]

The status of the gauge's slider is tracked with the help of an event listener which monitors the FCChartUpdateedEvent event. The event tracking code has been discussed previously as a part of the initialization code.

[as]// track changes made in the forecast panel
daySelector.addEventListener("FCChartUpdatedEvent", changeForecast);[/as]

Following is the core function that powers the entire interface:

[as]private function changeForecast(e:FCEvent):void {
    // determine where the pointer is pointing
    forecast = (daySelector.FCGetData(1) > 1.5)?1:0;
    //snapthe pointer to one position
    daySelector.FCSetData(1,forecast+1);
    // sets the values in the forecast panel
    setForecastPanel();
}[/as]

The FCGetData method attached to each gauge object acquires the current data and updates the gauge accordingly. The forecast variable is a root level variable which is used as an index for setting the values of the labels and gauges in the forecast panel.

Step 5: Zip code changing functionality

In order to change the information with respect to the location, we make a small panel where the zip-code can be provided. The components of the zip-code panel are configured with help of the follwing code:

[as]// text input field
<mx:TextInput id="zipfield" ... />

// submit button
<mx:Button id="submitZip" click="changeZip()" ... />[/as]

The zip-code panel contains a text field and a submit button. The click event of the submit button invokes the changeZip() method, which in turn calls the changeZip(zip:Number) method of the YahooWeather class and then updates the feed. The ZipValidator object associated with the text field checks for errors in the zip code entered by the user.

Step 6: Running the final application

The weather widget application is ready for use. To try it out, just download the complete application source code, set up the project, compile the WeatherWidget.mxml file and run the application.

When you run the application, by default the it shows the weather data for Sunnyvale, California. Just enter the zip-code of the location you want to switch to and press 'Submit', and just watch the magic happen.

Conclusions

As always, using Flex we have created in hours what would have otherwise taken days to create. And thanks to all the gauges available from FusionCharts for Flex we didn't have to build any custom components either. Especially with the custom tags support you can seemlessly integrate gauges into your Flex applications. So go ahead and enjoy your new weather widget. Or better yet, go and create another application with Flex and FusionCharts!