Flex: Data Binding Basics

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
<!-- 
A. What is Binding?
	a. Binding ties two properties together.
	b. One is the source, one is the destination
	c. When the source changes, Flex changes the destination
	
B. Why does this work?
	a. The TextInput property is set as [Bindable]
	b. Bindable comes in Two formats
		1. The TextInput property is set as [Bindable]
		2. Bindable Metatdata Tag [Bindable(event="propetyChange")]
C. Where can Bindable be used?
	a. Before an AS Class Definition
		package com.chrisaiv
		{
			[Bindable]
			public class Foo
			{
			}
		}
	b. Before a getter or setter method
		private var _data:Object;
		[Bindable("dataChange")]
		public function get data():Object
		{
			return _data;
		}
		public function set data( obj:Object ):void
		{
			_data = obj;
		}
	c. Before a Variables
		[Bindable]
		public var a:Object = new Object();
-->
	<mx:Script>
		<![CDATA[
			[Bindable]
			public var firstName:String = '';
 
			private function assignName( name:String ):void
			{
				firstName = name;
			}
		]]>
	</mx:Script>
	<!-- Make your Binding Bi-Directional -->
	<mx:Binding source="firstNameInput.text" destination="firstName"/>
	<mx:VBox>		
		<mx:Form>
			<mx:FormItem label="First Name Variable">
				<mx:Text id="firstNameVariable" text="{firstName}"/>
			</mx:FormItem>
			<mx:FormItem label="First Name">
				<mx:TextInput id="firstNameInput" text="{firstName}"/>
			</mx:FormItem>
			<mx:FormItem label="Last Name">
				<mx:TextInput id="lastNameInput"/>
			</mx:FormItem>
			<mx:FormItem label="E-mail">
				<mx:Text id="email" text="{firstNameInput.text}_{lastNameInput.text}@domain.com"/>
			</mx:FormItem>
		</mx:Form>
		<mx:Button label="FirstNameToJeff"  click="assignName('Jeff')"/>
		<mx:Button label="FirstNameToJohn" click="assignName('John')"/>
		<mx:Button label="FirstNameToRyan" click="firstNameInput.text='Ryan'"/>
	</mx:VBox>
</mx:Application>