One of the really cool things you can do with flex is binding, or dynamic data binding, but I’ll just call it binding for now. At it’s most basic you can directly associate data with a view object, eg text input, without having to write the code that did it.

Suppose in Actionscript 2, or 1 for that matter, you had a dynamic text field with the instance name of ‘output_txt’.

There, I took a picture so you’d believe me. (The more eagle eyed of you will notice that this is actually Flash CS3).

If you had some data, in this case a string you wanted to display in this text field you’d write something like this.

var copy:String = "This is the copy.";

output_txt.text = copy;

And you’d display the copy. Fine, not too much code – what’s the problem?

The problem is that what if the copy has to be dynamic and change? What if the variable copy changes from “This is the copy” to “Disregard this information?” or “A zone one single is how much?” (I had to make a trip to London and am still wondering how anyone can afford it). The text input is a dumb component. It’s been told what its text property is, thankyou very much. If you want to change it, you’ll have to tell it to change the property. So in the function that returns the data, or changes the variable you’ve got to then reassign the variable to the text field

var copy:String = "This is the copy";
output_txt.text = copy;
function resetCopy()
{
 	copy = "Its costs nearly a fiver, why not take a cab, it's more comfortable and you've got more chance of getting where you want to."
	output_txt.text = copy;
}

Which is really just repeating yourself. And can become a real bore when you’ve got half a dozen (normally more) view components that are displaying data. Yes, you could write a function that is triggered every time a variable is changed (a listener), but invariably you’ll be checking which one has changed and then identifying which component that relates to and applying the change to that. You could be even more clever and use classes to have static functions that check your value objects (more classes basically) and update the view that way. (I’ll be doing some stuff on OOP – Object Orientated Programing soon)

However you do it as some point you will be saying this property (wot I already set) is equal to this variable (wot I’ve already said it was in the first place).

This is the point where dynamic data binding in flex really comes into it’s own. The process is really simple : -

1. Create the variable you want to assign.
2. Use the [Bindable] meta tag to let the compiler know that this variable is bindable – this allows us to access the variable with script on the component.
3. Tell the view component what variable it has to bind to.
4. That’s it.

Once it’s bound whenever the variable changes the component bound to updates too.

A simple example

<?xml version="1.0" encoding="utf-8"?>

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical"

 			creationComplete="resetString()">

 <mx:Script>

 	<![CDATA[

 		//Bindable metadata letting the compiler know the variable

 		//imediately afterwards is available for binding.  If you

 		//leave this off then you will get a compiler warning, but

 		//the code will still work...but just for me leave it in.

 		[Bindable]

 		public var copy:String = "This is the copy";

 		//Function called on Creation Complete.  This is triggered when

 		//the application has been launched, so after the copy variable

 		//was initially created.

 		public function resetString():void

 		{

 			//Reset the copy

 			copy = "I've changed."

 		}

 	]]>

 </mx:Script>

 <!--

 Here's the text input to display the variable.  The curly braces

 are required so the compiler knows to treat what is in them as Actionscript

  -->

 <mx:TextInput id="output" text="{copy}"/></mx:Application>

I’m not going to go through the code, there are comments and it should be quite self explanatory, you can down load the mxml from this link ->Simple Binding Example MXML File .(Sorry, just moved the blog – examples back soon EDIT : I lost it – I’ll get it back up ASAP – sorry!) The only things I will mention are :

Putting meta tags into Actionscript felt extremely alien to me when I first started and I didn’t really get them, however now I’m totally at ease with it so don’t worry if you start typing and think “What on earth is this all about?”

You HAVE to use the curly braces in the mxml or the compiler will not know it is supposed to be calling an Actionscript variable.

By the way if you run this you should get “I’ve changed.” in the text field. This proves that data binding is working as after reseting the variable we didn’t then go back to the text input component and reset the text property. Wow.
So? How was that? Totally underwhelmed? Don’t worry this is just the principles, next we’ll look at how you can bind components together with no code whatsoever.

Flex Dynamic Data Binding 101 – Part Two