Pages

Wednesday, 28 March 2012

Flex Http Service Example for weather forecast from Yahoo

HTTP Service

  • Specify the format of returned external data as E4X using the resultFormat property of the HTTPService control.
  • Bind data between a UI component's properties and its dataProvider to enable changes in one to be reflected in the other.
  • Use the Bindable metadata tag to instruct the compiler that a variable is used in data binding.
  • Use curly brace syntax to define data bindings.

Simple Http Service example using the Yahoo Weather Service

In this example, the HTTPService component makes a request to the Yahoo Weather Service indicating it expects the results as E4X. The results are data bound to control properties using curly brace syntax. Subsequent requests repopulate the controls with new data demonstrating Flex's data binding mechanism.

 
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
 layout="vertical"
 backgroundAlpha="0" backgroundColor="#FFFFFF">

 <mx:HTTPService
  id="weatherService"
  url="http://weather.yahooapis.com/forecastrss"
  resultFormat="e4x"
  result="resultHandler(event);"/>

 <mx:Script>
  <![CDATA[
   import mx.rpc.events.ResultEvent;

   private namespace yweather = "http://xml.weather.yahoo.com/ns/rss/1.0";
   use namespace yweather;

   [Bindable]
   private var myResult:XML;

   public function requestWeather():void {
    weatherService.cancel();
    var params:Object = new Object();
    params.p = zip.text;
    weatherService.send(params);
   }

   public function resultHandler(event:ResultEvent):void {
    myResult = XML( event.result );
   }
  ]]>
 </mx:Script>

 <mx:Form width="400">
  <mx:FormItem label="Zip Code">
   <mx:TextInput id="zip" />
   <mx:Button label="Get Weather" click="requestWeather();"/>
  </mx:FormItem>
  <mx:FormItem label="City">
   <mx:Text text="{myResult.channel.yweather::location.@city}"/>
  </mx:FormItem>
  <mx:FormItem label="Temperature">
   <mx:Text text="{myResult.channel.item.yweather::condition.@temp}"/>
  </mx:FormItem>
  <mx:FormItem label="Condition">
   <mx:Text text="{myResult.channel.item.yweather::condition.@text}" width="100%"/>
  </mx:FormItem>
 </mx:Form>
 <mx:TextArea id="resultFld" text="{myResult}" width="400" height="152"/>
</mx:Application>

Rendered Example

No comments:

Post a Comment