Log In  
  Getting Started  
----------------------------------------

Resources

 

Binding and Modeling

  • 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 data binding 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.

previous page next page

User rating?

Learn more
<?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

previous page next page
Added by Mark Nichoson , last edited by matthew horn on Apr 22, 2008  (view change)
Labels: 
(None)

Powered by Atlassian Confluence 2.7.1, the Enterprise Wiki. Bug/feature request - Atlassian news - Contact administrators