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

Resources

 

Binding and Modeling

Note: The current release is Flex 4. This page is for Flex 3. To get started with Flex 4 and Flash Builder 4 (formerly known as Flex Builder), see the Getting Started page on the Flex Developer Center.

  • 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
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

AS Syntax Qs:

1. Wouldn't it be more expressive to use smth. like import namespace (url) instead of declaration and "use namespace", provided the new syntax will be in place in the future? I mean everything in one sentence...

2. Is "XML( event.result );" short for "(new XML()).loadXml(event.result);"? Have you got other examples of RAD type conversions? Think about $() in JS prototype...

3. mx:Form <> Html Form. Form params (fields) are not sent automatically which is great on one side. But if I have 100 fields on the form and really need to send all fields over the wire, I guess you have a serialization technique out-of-the-box?

Comment: Posted by Eduard Rusanovschi at Mar 31, 2009 07:54

2) I found this:XML(value:Object)
Creates a new XML object.
 
XML is a class.  Not sure if that answers your question, but I think that's a yes? (Forgive me if my answer is dense, I'm pretty new to this stuff...  when I first read it I thought XML was a type of variable or something so I had to look it up.)
 

Comment: Posted by Pete Calkins at Dec 24, 2009 14:10

Hello,

I've seen this behaviour in several Adobe examples: invoking cancel() method on HTTPService before send(). What's this for? Is this necessary in every HTTPService calls?

I guess it's for getting and optimal performance cancelling previous communications but code looks quite dirty to me. Am i right? How important is this in a Flex app?

Thanks!

Comment: Posted by Daniel Estevez at Nov 10, 2009 03:42
Added by Mark Nichoson, last edited by Randy Nielsen on Feb 23, 2011  (view change)

Labels:

Enter labels to add to this page:
Wait Image 
Looking for a label? Just start typing.