Flex: DataBinding in depth (Part Two)
//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;
}
}
}
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
Vector & Matrix스칼라 : 하나의 숫자로만 이루어진 데이터 (크기만 있고 방향이 없는 물리량) 벡터 : 여러 숫자로 이루어진 데이터 레코드. 매트릭스 : 벡터가 여럿인 데이터집합 벡터의 크기는 스칼라배를 통해 표현할 수 있다. *내...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.