How to create a Flash Lite weather application using Web services

From Forum Nokia Wiki

(Redirected from How to create a flash lite weather app using webservices)

Reviewer Approved

Introduction

Like any other application development technology, such as Symbian C++ or Java ME, Flash Lite can connect to a Web service and thus send/receive data. This article illustrates again the power of Flash Lite.

Concept

Here is a reference to the WSDL page on Wikipedia. To learn on the WSDL concept in detail, you may refer to this page. To learn more about its implementation in flash Lite, read below.

Connecting to the Web service

The client's device establishes communication with the Web services by creating a new Web service object in the ActionScript and invokes its GetWeather() method once the "GO" button is pressed.

import mx.services.*;
// Create a new instance of Web service called - wthrService.
var wthrService = new  WebService("http://www.webservicex.net/globalweather.asmx?WSDL");
 
// set it up so that the service is called when the button is pressed.
result_btn.onPress = function() {
        loading_mc._visible = true;
	//Call the getWeather method and assign it to the pending call object to handle results.
	resultObj = wthrService.GetWeather(citybox.text, "");
	wthrService.onLoad = trace("loading");	
        // the onResult function is called if the service is successful
	resultObj.onResult = function(result) {	
	if(result ne "Data Not Found")
	{
		loading_mc._visible = false;
		resStr = result.slice(result.indexOf("<CurrentWeather>")+16,result.indexOf("</CurrentWeather>")-17);	
		xml = null;
		delete xml;	
		xml = new XML()
		xml.ignoreWhite = true;
		xml.parseXML(resStr)
		cityTxt = citybox.text;
		gotoAndStop(2);
	}
	else
	{
	  gotoAndStop(3);
	}
	}
	resultObj .onFault = function(fault) {
	 // If there is any error, e.g. the service is not working, the onFault handler will be invoked.
	 loading_mc._visible = false;
	 fault_txt = "ERROR: "+fault.faultCode + "," + fault.faultstring
	}
}

XML parsing

The server sends the XML object containing weather information that must be parsed before it can be used.

- XML FORMAT

<?xml version="1.0" encoding="utf-16"?>
<CurrentWeather>
  <Location>Islamabad Airport, Pakistan (OPRN) 33-37N 073-06E 508M</Location>
  <Time>May 29, 2008 - 07:00 PM EDT / 2008.05.29 2300 UTC</Time>
  <Visibility> 3 mile(s):0</Visibility>
  <SkyConditions> clear</SkyConditions>
  <Temperature> 77 F (25 C)</Temperature>
  <DewPoint> 59 F (15 C)</DewPoint>
  <RelativeHumidity> 53%</RelativeHumidity>
  <Pressure> 29.65 in. Hg (1004 hPa)</Pressure>
  <Status>Success</Status>
</CurrentWeather>

The XML object may have more or less nodes as it depends on the level of information available on the server at any given time. Hence using the following code, the XML node's name/value pairs are stored in an array of a dataclass object.

- DataClass

class dataClass
{
   //Establishes the variables in dataClass
   public var nodeName: String;
   public var nodeValue:String;
}

import dataClass; 
 
for (var aNode:XMLNode = xml.firstChild; aNode != null; aNode=aNode.nextSibling) {
        if (aNode.nodeType == 1) {
			var t:dataClass = new dataClass();
			t.nodeName = aNode.nodeName;              
			t.nodeValue = aNode.firstChild.nodeValue;
			array.push(t);			
        }
    }

Trimming string data

Once data is saved in the array, it can be retrieved from the array and trimmed to be displayed on the screen.

for(j=0;j<array.length;j++)
{ 
	if(array[j].nodeName eq "Time")
	{
		getLocalTime = array[j].nodeValue;
		getLocalTime = getLocalTime.slice(0,getLocalTime.indexOf("EDT"));
	}
	if(array[j].nodeName eq "Wind")
	{
		getWind = array[j].nodeValue;
		getWind = Number(getWind.slice(getWind.indexOf("at ")+3,getWind.indexOf("MPH")-1));
	}
	if(array[j].nodeName eq "Visibility")
	{
		getVisibility = array[j].nodeValue;
		getVisibility = getVisibility.slice(0,getVisibility.length-2);
	}
	if(array[j].nodeName eq "Temperature")
	{
		getTemperature = array[j].nodeValue;
		getTemperature_F = getTemperature.slice(0,getTemperature.indexOf("F")-1);
		getTemperature_C = getTemperature.slice(getTemperature.indexOf("(")+1,getTemperature.indexOf("C")-1);
	}
	if(array[j].nodeName eq "DewPoint")
		getDewPoint = array[j].nodeValue;
	if(array[j].nodeName eq "RelativeHumidity")
		getRelativeHumidity = array[j].nodeValue;
	if(array[j].nodeName eq "Pressure")
	{
		getPressure = array[j].nodeValue;
		getPressure = getPressure.slice(getPressure.indexOf("(")+1,getPressure.length-1);
	}
}

Temperature gauge animation

new mx.transitions.Tween(temp_mc.temp_lvl_mc, "_height", mx.transitions.easing.Strong.easeOut, 0, getTemperature_C / 100 * 100, 5, true);

Final output

Source code

The source code files are available for download: media:FLWeather.zip

Author

--NINJA 03:16, 30 May 2008 (EEST) RAHEAL AKHTAR

Community: Wiki