Flex: DataBinding in depth (Part Two)

1. Implicit Data Binding & Explicit Data Binding

    

//The main difference between implicit and explicit is that implicit data binding is //done at run time while explicit data binding is done at compile time

    1). Implicit Data Binding: 

Eg1.

 

 

<?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"
			   initialize="init(15)"
			   minWidth="955" minHeight="600">
	<fx:Declarations>
		<!-- Place non-visual elements (e.g., services, value objects) here -->
	</fx:Declarations>
	
	<fx:Script>
		<![CDATA[
			import components.ClassA;
			
			import mx.controls.Alert;
			import mx.events.PropertyChangeEvent;
			
			private var classA:ClassA = new ClassA();
			
			private function init(num:Number):void
			{
				classA.addEventListener("propertyChange", handler);
				classA.value = num;
			}
			private function handler(event:PropertyChangeEvent):void
			{
				Alert.show("New value: " + event.newValue + ", Old value: " + event.oldValue);
			}
		]]>
	</fx:Script>
</s:Application>

 

package components
{
	import mx.core.UIComponent;

	public class ClassA extends UIComponent
	{
		private var _value:Number;
		
		[Bindable]
		public function get value():Number
		{
			return _value;
		}
		public function set value(num:Number):void
		{
			_value = num;
		}
	}
}

 

Eg2.

 

<?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" 
			   initialize="init(23);"
			   minWidth="955" minHeight="600">
	<fx:Declarations>
		<!-- Place non-visual elements (e.g., services, value objects) here -->
	</fx:Declarations>
	
	<fx:Metadata>
		[Event(name="valueChanged", type="event.ValueChangedEvent")]
	</fx:Metadata>
	<fx:Script>
		<![CDATA[
			import components.ClassB;
			
			import event.ValueChangedEvent;
			
			import mx.controls.Alert;
			private var classB:ClassB = new ClassB();
			
			private function init(num:Number):void
			{
				classB.addEventListener("valueChanged", handler);
				classB.val = num;
			}
			private function handler(e:ValueChangedEvent):void
			{
				Alert.show("New value: " + e.expVal + ", Old value: " + e.preVal);
			}
		]]>
	</fx:Script>
</s:Application>

 

package components
{
	import event.ValueChangedEvent;
	
	import flash.events.Event;
	
	import mx.core.UIComponent;

	public class ClassB extends UIComponent
	{
		private var _val:Number;
		
		[Bindable(event="valueChanged")]
		public function get val():Number
		{
			return _val;
		}
		
		public function set val(num:Number):void
		{
			var eventObj:ValueChangedEvent = new ValueChangedEvent("valueChanged", new String(_val), new String(num));
			_val = num;
			dispatchEvent(eventObj);
		}
	}
}

 

package event
{
	import flash.events.Event;
	
	public	class ValueChangedEvent extends Event
	{
		public var preVal:String;
		public var expVal:String;
		
		public function ValueChangedEvent(type:String, preVal:String, expVal:String)
		{
			super(type);
			
			this.preVal = preVal;
			this.expVal = expVal;
		}
	}
}

  

 

    Comment:

        1) In Eg1: Once a variable is changed, you'll get notification (system will dispatch PropertyChange event automatically). The [Bindable] is compiled as [Bindable(event="propertyChange")].

        2) In Eg2: We dispatch our custom event every time property changed and catch our custom event instead of the event dispatched by system.

 

    2). Explicit Data Binding

    1. Reasons why we use Explicit Data Binding:

        1) You want to cast an object type with another object type.

        2) You want to avoid compile-time errors in a mismatch between objects.

        3) You are dealing with forms where all the properties are of type String, but they need to be

converted to another format.

    Eg.

 

<s:Button width="50" label="{num.toString()}"
click="num++" />

 

var com:UIComponent = object as UIComponent

 

trace(Number("2"));

 

 

 

P.S

    1. Flex SDK 3.4 and up brings a new data type called Vector, which we encourage using when you need to create a collection of a data type. But it enforces every element in it must be the same type. Just like Generic in JAVA.

    Eg.

<?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="initApp(event);"
			   minWidth="955" minHeight="600">
	<fx:Declarations>
		<!-- Place non-visual elements (e.g., services, value objects) here -->
	</fx:Declarations>
	<fx:Script>
		<![CDATA[
			import vo.Student;
			private var studentList:Vector.<Student>;
			
			private function initApp(event:Event):void
			{
				var student1:Student = new Student(1, "Davy", "male");
				var student2:Student = new Student(2, "Caly", "female");
				studentList = Vector.<Student>([student1, student2]);
			}
		]]>
	</fx:Script>
</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;
		}
	}
}