bgx:components logo
© 2004 -2005
Bernhard Gaul



Flash client for GlobalWeather Webservice

It is possible to use server side programming that could also create visual interpretations of data in form of bitmap images, but those images would be considerable in file size and would have to be downloaded afresh for every new request.

With this Flash application on the other hand all logic used to create the visualizations are packaged in the Flash file. It needs to be downloaded only once and reacts then as a small program on the users computer, that can request data from the server as needed and render the graphics directly on the client. As all graphics are created using vector technology the overall size of the Flash file is only 21 kB.

This Flash application is built in a way that does not rely on specific server technology to provide the weather data. It could also be loaded from a static Xml file, e.g. on a CD.

Links

View the Flash visualization

Read an interview I gave CapeScience regarding this Flash client.

Please use the menu on the left for further details.

Tutorials

Requesting Xml from a Webservice via GET (ActionScript 1.0)

Even though the source file for the Flash client is not for download, I will provide some information about how exactly Xml is loaded from the Webservice into Flash, as I have received repeated emails about this topic.

Basically this is no different from loading an Xml file from an URL, but instead of linking to a file, the URL consists of the path to the Webservice plus added parameters that invoke the methods that prompt the Webservice to return certain Xml data.

For instance, the URL "GET_Weather.asmx/Get_Countries?" will return an Xml file that lists all the countries available.

Or "GET_Weather.asmx/Get_WeatherReport?code=EDI" will return the airport information for Edinburgh.

So to load the Xml that contains the list of all available countries you can use:

var countryXML = new XML();
countryXML.ignoreWhite = true;
countryXML.onLoad = populateCountries;
countryXML.load("weatherFlash.asmx/Get_Countries?");

That's it. Or to load the list of airports based on the country selected in the ListBox named "countryListBox", you can use something like.

var selectedCountry =
   countryListBox.getSelectedItem().label;
var airportQuery = "weatherFlash.asmx/Get_Airports?";
airportQuery += "countrySelected="+selectedCountry;
var airportXML = new XML();
airportXML.ignoreWhite = true;
airportXML.onLoad = populateAirports;
airportXML.load(airportQuery);

Note: Xml data can also be loaded from a Webservice using POST or SOAP. Flash Remoting provides powerful interfaces to support this on a server. However, if a Flash application needs to be potentially able to read data from CD as well as from web servers, or if Flash Remoting is not an option, the shown implementation is the one to choose.

Understanding which methods a Webservice provides

To understand which methods a Webservice provides and which parameters it needs, each Webservice contains a so called service description (WSDL). You have to understand quite a bit of Webservices to actually understand the WDSL information directly, however, ASP.NET Webservices come with a handy HTML interface that make understanding easy.

Just open the proxy webservice that I used for my Flash application or the more generic GET_Weather Webservice and see. On the first page you get a list of all the supported methods. If you click on any of them you will get to a page that describes the different ways of how to invoke this method. Under HTTP GET it would e.g. say:
GET /webservices/weatherFlash.asmx/Get_Airports?countrySelected=string
This is the URL to call, whereby string must be replaced with the appropriate parameter value.

Using the Xml data (ActionScript 1.0)

This is not the place to explain how Xml data can be used within Flash once loaded. However, for convenience sake here is a short description of how e.g. the county list is displayed in the ListBox called "countryListBox".

The above code contains the line:

countryXML.onLoad = populateCountries;

Therefore as soon as the Xml is loaded the following function is called:

function populateCountries() {
    var countryArray = new Array();
    var rootNode = countryXML.firstChild;
    var countryNodes = rootNode.childNodes;
    var thisNode = rootNode.firstChild;
    countryArray[0] = "<Please Select a Country>";
    for (var i=1; i<countryNodes.length; i++) {
        countryArray[i] = thisNode.firstChild.nodeValue;
        thisNode = thisNode.nextSibling;
    }
    countryListBox.setEnabled(true);
    countryListBox.setDataProvider(countryArray);
    countryListBox.setChangeHandler("getAirports", this);
}


 

Background : Rich Clients

Traditional web applications are usually based on the "Rich Server" or "Fat Server" principle. It means that all data processing as well as the construction of the user interface are handled on the web server.

E.g. with the ASP.NET client example the request for some specific weather data is sent to the server, were the data is retrieved, processed and the data grid representation is crated as newly written HTML.

The Flash client on the other hand adheres to the "Rich Client" or "Fat Client" principle, which means all logic needed to process the data resides within the Flash file that gets downloaded to the user's machine.

Once loaded only raw data needs to be loaded from the server without need to reload the HTML page that holds the visualization.