Flex 클래스 바인딩 시키기

데이터 바인딩이란?

어떤 객체의 데이터를 다른 객체가 참조할 때 데이터가 변경되면 변경된 정보가 곧바로 참조하는 객체들에게 전달되는 기술입니다.

간단하게 말씀드리면 컴포넌트가 업데이트 하는 순간, 참조하는 다른 컴포넌트로 변경된 정보가 전파되는 것이죠.

사용방법에는 다음 세가지가 있습니다.

1. 중괄호 문법 ( { } )

2. <mx:Binding>

3. BindingUtils

대부분의 플렉스 컴포넌트는 데이터 바인딩을 지원하기 때문에

중괄호를 이용한 바인딩은 다들 해보셨을거라 생각됩니다.

바인딩의 작동 방식

데이터 바인딩은 내부적으로 이벤트기반으로 작동합니다.

따라서 객체의 프로퍼티 값이 변하면 기본적으로 propertyChange 이벤트를 발생 시키고 이 이벤트에 따라 바인딩을 받는 객체가 값을 갱신하는 것이죠...

사용자 정의 클래스에서의 바인딩

클래스 전체를 Bindable 지정

package test
{
	import flash.events.EventDispatcher;
	
	[Bindable]
	public class A
	{
		private var _a:String;
		
		public function get a():String
		{
			return _a;
		}
		
		public function set a(a:String):void
		{
			_a = a;
		}
	}
}

클래스의 모든 멤버변수에 대해 바인딩을 설정하는 것 입니다.

코드 보시는 바와 같이 클래스 이름 위에 [Bindable] 메타 태그를 써주는 것 외에는 어떠한 설정도 필요 없습니다.

참~ 쉽죠~

신경안써도 되지만 이 상태에서는 모든 멤버변수 변화에 따라 propertyChange 이벤트가 발생합니다.

get/set 메소드가 있던 없던 상관 없습니다. 멤버속성의 변화에 따라 이벤트를 발생시키니까요...

일부 멤버변수만 Bindable 지정

package test
{
	import flash.events.EventDispatcher;
	
	public class A
	{
		[Bindable]
		private var _a:String;
		private var _b:String;
		
		public function get a():String
		{
			return _a;
		}
		
		public function set a(a:String):void
		{
			_a = a;
		}
		
		public function set b(b:String):void
		{
			_b = b;
		}
		public function get b():String
		{
			return _b;
		}
	}
}

멤버변수 _a 만 바인드 시켰습니다. a 메소드로 접근하면 바인드 되지만 b 메소드로 접근하면 바인드 이벤트가 발생하지 않습니다.

사용자 정의 바인딩 이벤트 발생

일단 사용자 정의 바인딩 이벤트가 왜 필요한지 말씀드리겠습니다. 1. 특정 변수의 변화를 추적해야하는 경우 2. 좀더 효율적인 바인딩을 해야하는 경우 1번은 말 그대로라서 설명이 필요없을듯 하고요... 2번에 대해 설명드리겠습니다. 위에서 멤버변수에 변화가 생기면 propertyChange 이벤트가 발생한다고 말씀드렸는데요... 모두 똑같은 이벤트를 발생하기 때문에 바인딩을 받는 객체 입장에선 수정이 되든 안되든 모든 변수를 업그래이드해야합니다. 이것을 방지하기 위해서 사용자 정의 바인딩 이벤트를 발생시키는 것이죠... 일단 코드먼저 보세요...

 

package test
{
	import flash.events.Event;
	import flash.events.EventDispatcher;
	
	[Bindable]
	public class A extends EventDispatcher
	{
		// [Bindable(event="aEvent")]
		// get/set에 쓰지 않고 이곳에만 쓰면 propertyChange도 발생하기 때문에 사용의도에서 벗어나게 됩니다. 
		private var _a:String;
		private var _b:String;
		
		[Bindable(event="aEvent")]
		public function get a():String
		{
			return _a;
		}
		
		public function set a(a:String):void
		{
			_a = a;
			dispatchEvent(new Event("aEvent"));
		}
		
		public function set b(b:String):void
		{
			_b = b;
		}
		public function get b():String
		{
			return _b;
		}
	}
}

일단 지금까지의 코드와 다른 점은 EventDispatcher 클래스를 상속받고 있다는 점입니다. 

원래 Bindable로 설정하는 클래스는 모두 EventDispatcher를 상속받아야하지만 [Bindable] 메타태그가 있으면 컴파일러가 자동으로 상속을 시켜줬기 때문에 명시적으로 써주지 않아도 됐던 겁니다. 

하지만 사용자 정의 바인딩 이벤트에서는 23라인과 같이 사용자 정의 이벤트를 반드시 디스패치 해주어야 합니다. 

따라서 EventDispatcher를 꼭 상속받아야 하는 것이죠... 그리고 사용자 정의 바인딩 이벤트는 반드시 [Bindable] 메타태그를 get/set 메서드 위에 써줘야 합니다. 

멤버변수명 위에 [Bindable] 메타태그를 써주니 일반 이벤트인 propertyChange도 같이 발생하네요... 단 get과 set 둘 중 한곳에만 써주면 됩니다. 여기서 b 멤버변수는 여전히 propertyChange 이벤트를 발생하기 때문에 기본적인 바인딩이 됩니다. 

 공부하면서 정리한거라 부족하지만 바인딩을 적용시키는데 조금이나마 도움이 되길 바랍니다. ^^;;