Flex: DataBinding in depth (Part Three)

1. Normal Data Binding for VO

 

package vo
{
	[Bindable]
	public class Student
	{
		public var id:int;
		public var name:String;
		public var gender:String;
		public function Student(id:int, name:String, gender:String)
		{
			this.id = id;
			this.name = name;
			this.gender = gender;
		}
	}
}

 

<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" 
			   xmlns:s="library://ns.adobe.com/flex/spark" 
			   xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600">
	<fx:Declarations>
		<!-- Place non-visual elements (e.g., services, value objects) here -->
	</fx:Declarations>
	
	<fx:Script>
		<![CDATA[
			import mx.controls.Alert;
			
			import vo.Student;
			[Bindable]
			private var student:Student = new Student(1, "Davy", "Male");
		
			private function handler(event:MouseEvent):void
			{
				student.id ++;
			}
		]]>
	</fx:Script>
	<s:Button label="{student.id}" click="handler(event)"/>
</s:Application>

     Comment:

        1) Every time we click the button, both the button label and the student.id will change accordingly.

        2) If we leave out the [Bindable] annotation for student in Application domain, we will get a warning but it still works.

        3) If we leave out the [Bindable] annotation for id in VO and we add this on var student, it will not work cause the id is not bindable.

 

 

2. Binding all properties for MXML

<fx:Metadata>
       [Bindable]
</fx:Metadata>

 

    Comment:

         1) Why it doesn't work?

 

3. Binding Using ObjectProxy

        1) Why using ObjectProxy?

               We using ObjectProxy to monitor the properties changes in our custom VO.

               In the previous charpter, we are using the custom event dispatched to monitor a specific attribute in our custom VO. But what if we want to monitor all the property changes in VO?

        2) How to use ObjectProxy?

<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" 
			   xmlns:s="library://ns.adobe.com/flex/spark" 
			   xmlns:mx="library://ns.adobe.com/flex/mx" 
			   creationComplete="setWatcher(event);"
			   minWidth="955" minHeight="600">
	<fx:Declarations>
		<!-- Place non-visual elements (e.g., services, value objects) here -->
	</fx:Declarations>
	
	<fx:Script>
		<![CDATA[
			import mx.controls.Alert;
			import mx.events.PropertyChangeEvent;
			import mx.utils.ObjectProxy;
			
			import vo.Student;
			
			private var student:Student = new Student(1, "Davy", "Male");
			private var objectProxy:ObjectProxy;
			
			private function setWatcher(event:Event):void
			{
				objectProxy = new ObjectProxy(student);
				objectProxy.addEventListener(PropertyChangeEvent.PROPERTY_CHANGE, onChange);
				
				objectProxy.id = 2;
				objectProxy.name = "Clay";
				objectProxy.gender = "Female";
			}
			private function onChange(event:Event):void
			{
				idLabel.text = objectProxy.id.toString();
			}
		]]>
	</fx:Script>
	
	<s:Label id="idLabel"/>
</s:Application>

 

package vo
{
	public class Student
	{
		public var id:int;
		public var name:String;
		public var gender:String;
		public function Student(id:int, name:String, gender:String)
		{
			this.id = id;
			this.name = name;
			this.gender = gender;
		}
	}
}

     Comment:

        1) Pay attention while changing the attribute, we are not changing that of VO's but changing that of ObjectProxy's.

        2) It works the same as we add [Bindable] annotation to all attributes in Student/Vo.