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:

//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";

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.

feedService.addEventListener(ResultEvent.RESULT, raiseResult);
feedService.addEventListener(FaultEvent.FAULT, raiseError);

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

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

private function raiseError(e:FaultEvent):void {
    dispatchEvent(e);
}

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:

// 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 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).