Flex Component간 종속성을 없애보자. (Event 를 사용하자)

IT/Flex

Flex Component간 종속성을 없애보자. (Event 를 사용하자)

craveu 2007. 8. 14. 03:50

Flex로 컴포넌트(Component)구성시 Event를 사용하면 컴포넌트간에 종속성을 피할 수 있다.

1. 컴포넌트간 종속성???

여기서 종속성이라는 것이 어려운 개념이라고 생각하는 분들도 있을 수 있겠다.
종속성이라는 것을 뭐라고 표현하면 좋을까?
가령, 종속성은 어린자식을 둔 부모와 그 자식간에 관계라고 표현할 수 있다.
자식과 부모는 서로 떨어지기 힘든 사이이다. 한쪽이 병들거나 힘들게 되면 덩달아 힘들어진다.

이처럼 프로그램 세계에서도 이런 경우가 많이 생긴다. (너무 비약적인 예이긴 했지만 ㅡㅡ;)
2개의 함수를 만들었을때 한쪽 함수가 다른 함수를 호출하는 경우 만약 호출을 당한 함수가 수정되면 호출한 함수도 수정할 경우가 생긴다. 이런 경우가 몇개 안되는 경우라면 문제 없겠지만 심각한 버그로 한개 고쳤는데 다른 여러개를 고쳐야 하는 경우는 너무 종속적이기 때문에 어려운 것이다.

상속관계에 있는 클래스도 부모와 자식 관계처럼 종속성이 크다. 잘 만들어진 클래스는 상속에서 큰 힘을 발휘하지만 잘못설계된 클래스는 상속 때문에 문제가 생기는 경우가 종종있다.

그럼 이 종속성을 줄여줄 수 있는 방법에는 무엇이 있을까?
그중 한가지는 Event를 이용하는 것이다.

2. 우리가 만들 Flex 프로그램

Flex에서 종속성에 관련해서 어떤 경우에 Event를 사용해야하는가? 한가지 예시를 들어보도록 하겠다.

아래는 최종적으로 구현할 화면이다.

컴포넌트를 2개 만들어서 1번 컴포넌트의 ComboBox가 변경이 되면 2번째 컴포턴트에 Label과 Data가 바로 바뀌게 할 것이다. 이렇게 간단한 것이라면 컴포넌트를 만들 것 없이 Application에서 직접 구현하면 되지만 실제 프로젝트에서는 여러개의 컴포넌트를 만들게 될 것이다. 그럼 각각의 컴포넌트간에 통신은 반드시 필요하게 될 것이고 거기서 종속성이 생겨서 서로 얽히는 관계가 만들어져 나중에는 컴포넌트로 나눈 것 자체가 무색하게 될 만큼 하나의 복잡하게 얽힌 유기적인 프로그램이 될 것이다.

지금 언급한 복잡한 종속성을 가진 프로그램이 될 가능성이 많은 컴포넌트 활용 예제와 Event를 이용해 종속성에서 벗어난 컴포넌트 예제를 들기로 하겠다.

2-1. 종속성을 가진 컴포넌트 예제

아래 링크에서 소스를 다운로드 받거나 볼 수 있다.
소스보기 : http://blog.jidolstar.com/web_example/8 ··· dex.html

일단 아래 프로그램을 보길 바란다. 위에서 언급한 것 처럼 FirstComponent의 ComboBox에서 선택한 값이 SecondComponent InputText에 바인딩 되어 있는 것을 볼 수 있다.

위 프로그램은 정상적으로 잘 작동이 된다. 전혀 문제가 없어 보인다.
하지만 종속성 문제를 언급하자면 그리 좋은 프로그램은 아니다. 왜 그런지 알아보자.

우리는 2개의 컴포넌트와 1개의 Application을 만들 것이다.

첫번째 Component를 보자. 아주 단순한 구조이다. acCoffee에서 지정된 ArrayCollection대로 3개의 Object가 ComboBox에 바인드된다.

FirstComponent.mxml (Language : xml)

<?xml version="1.0" encoding="utf-8"?>
<mx:Panel xmlns:mx="http://www.adobe.com/2006/mxml"
title="FirstComponent" width="100%" height="100%"
paddingLeft="10" paddingRight="10" paddingTop="10" paddingBottom="10">


<mx:ArrayCollection id="acCoffee">
<mx:source>
<mx:Object label="Red Sea" data="Smooth and fragrant"/>
<mx:Object label="Andes" data="Rich and pungent"/>
<mx:Object label="Blue Mountain" data="Delicate and refined"/>
</mx:source>
</mx:ArrayCollection>


<mx:HBox>
<mx:Label text="커피 브랜드 선택"/>
<mx:ComboBox id="coffeeCombo" dataProvider="{acCoffee}"/>
</mx:HBox>
<mx:Text text="설명 : {coffeeCombo.selectedItem.data}"/>

</mx:Panel>

두번째 Component를 보자.
두번째 Component에서는 한개의 바인드 가능한(Bindable) 변수 Object형 selectedBean을 정의했다.

SecondComponent.mxml (Language : xml)

<?xml version="1.0" encoding="utf-8"?>
<mx:Panel xmlns:mx="http://www.adobe.com/2006/mxml"
title="SecondComponent" width="100%" height="100%"
paddingLeft="10" paddingRight="10" paddingTop="10" paddingBottom="10">
<mx:Script>
[Bindable] public var selectedBean:Object;
</mx:Script>
<mx:HBox>
<mx:Label text="브랜드 명"/>
<mx:TextInput id="coffeeName" text="{selectedBean.label}"/>
</mx:HBox>
<mx:HBox>
<mx:Label text="설명"/>
<mx:TextInput id="coffeeDesc" text="{selectedBean.data}" />
</mx:HBox>
</mx:Panel>

마지막으로 Application을 보자.
Application에서 보면 앞서 만든 2개의 컴포넌트(FirstComponent, SecondComponent)를 사용하고 있다. 특별히 Secondcompent에 정의된 selectedBean 변수에 FirstComponent ComboBox에 선택된 Item(firstComponent.coffeeCombo.selectedItem)을 바인딩하고 있다. 우리가 종속적이라는 부분이 바로 이 부분이다. Second가 First의 값을 전달받기 위해 First에 지정된 변수와 속성을 직접적으로 접근하고 있다. 이는 First의 ComboBox인 coffeeCombo 값이 바뀔때 First를 바꿔야할 뿐 아니라 Application도 바꿔야한다는 것을 의미한다. 즉, FirstComponent와 Application간에 종속성이 있는 부분이 된다. 이러한 관계가 몇개 안되면 상관 없지만 많이지면 골치 아파진다. 종속성이 커진다는 것은 그만큼 대규모 프로젝트의 프로그램 관리가 어려워진다.

EventTest.mxml (Language : xml)

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
layout="vertical" xmlns = "*" viewSourceURL="srcview/index.html">
<mx:Style>
Application
{
fontSize: 12pt;
}
</mx:Style>
<mx:Panel title="Event사용하지 않은 것 :: Jidolstar.com" width="100%" height="100%">
<FirstComponent id="firstComponent"/>
<SecondComponent id="secondComponent" selectedBean="{firstComponent.coffeeCombo.selectedItem}"/>
</mx:Panel>
</mx:Application>

2-2. 종속성을 가지지 않은 컴포넌트 예제

먼저 아래 링크로 들어가면 해당 소스를 볼 수 있다.
소스보기 : http://blog.jidolstar.com/web_example/8 ··· dex.html

먼저 사용자 정의 Event 클래스를 하나 추가하자. 이 클래스의 특징은 Event발생시 1개의 Object도 함께 넘겨주는 형태를 가진다. 이러한 형태를 가진 Event는 모두 이 Event 클래스를 사용하면 되겠다. 물론 Object뿐 아니라 다른 형태(Number, String 등)도 아래와 같은 방법으로 코딩하면 된다.

MyEvent.as (Language : Flex)

package
{
import flash.events.Event;

public class MyEvent extends Event
{
public var obj:Object;
public function MyEvent(type:String, obj:Object)
{
super(type, false, false);
this.obj = obj;
}
}
}

위에서 만든 사용자 정의 Event(MyEvent)를 사용해보자.
FirstComponent.mxml 에 아래 코드와 같이 코딩한다. 여기서 잘 보면 ComboBox가 Change Event가 발생시 comboChange()함수가 호출된다. 이 함수에서는 MyEvent 를 1개 만들어 dispatchEvent()를 이용해 Event를 발생시킨다. 이때 Evnet의 Type은 아까 정의한 MyEvent이며 name은 selectionChanged로 정의한다. 한가지 언급할 것은 Event발생시 ComboBox에서 선택된 Item(coffeecombo.selectedItem)을 함께 넘겨주는 것을 볼 수 있다. 이 Item은 Object 형태이므로 MyEvent에서 정의한 것과 동일하다.

FirstComponent.mxml (Language : mxml)

<?xml version="1.0" encoding="utf-8"?>
<mx:Panel xmlns:mx="http://www.adobe.com/2006/mxml"
title="FirstComponent" width="100%" height="100%"
paddingLeft="10" paddingRight="10" paddingTop="10" paddingBottom="10">

<mx:Metadata>
[Event(name="selectionChanged", type="MyEvent")]
</mx:Metadata>
<mx:Script>
<![CDATA[
public function comboChange():void
{
dispatchEvent(new MyEvent('selectionChanged', coffeeCombo.selectedItem));
}
]]>
</mx:Script>

<mx:ArrayCollection id="acCoffee">
<mx:source>
<mx:Object label="Red Sea" data="Smooth and fragrant"/>
<mx:Object label="Andes" data="Rich and pungent"/>
<mx:Object label="Blue Mountain" data="Delicate and refined"/>
</mx:source>
</mx:ArrayCollection>


<mx:HBox>
<mx:Label text="커피 브랜드 선택"/>
<mx:ComboBox id="coffeeCombo" dataProvider="{acCoffee}" change="comboChange()"/>
</mx:HBox>
<mx:Text text="설명 : {coffeeCombo.selectedItem.data}"/>

</mx:Panel>

그럼 이제, 만들어진 Event를 Application에서 받자.
아래 코드에서 firstComponent를 보자 위에서 정의한 Event name인 selectionChanged를 사용하고 있다. 즉 firstComponent에서 Event가 발생하면 selectionChanged에 지정한 함수인 getData(event)를 호출한다. 호출한 getData()인자로 넘어온 Event는 MyEvent이므로 그 속성으로 Object가 넘어온다. 즉, firstComponet에의 ComboBox에서 select한 item값이 넘어오는 것이고 그 값을 Bindable처리한 selectedCoffee Object에 대입한다. selectedCoffee는 secondComponet에서 정의한 selectedBean에 제공되도록 되어 있다.
이로써 FirstComponent에서 발생한 이벤트에 넘어온 값이 Application에 의해 SecondComponent로 넘어간다.
간접적인 전달방법이긴 하지만 FirstComponent와 SecondComponent간에 직접적인 교류가 없기 때문에 이전 보다 종속성이 떨어진다.

EventTest.mxml (Language : xml)

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
layout="vertical" xmlns = "*">
<mx:Script>
<![CDATA[
[Bindable] public var selectedCoffee:Object;

public function getData(e:MyEvent):void
{
selectedCoffee = e.obj;
}
]]>
</mx:Script>
<mx:Style>
Application
{
fontSize: 12pt;
}
</mx:Style>
<mx:Panel title="Event를 잘 사용하자 :: Jidolstar.com" width="100%" height="100%">
<FirstComponent id="firstComponent" selectionChanged="getData(event)"/>
<SecondComponent id="secondComponent" selectedBean="{selectedCoffee}"/>
</mx:Panel>
</mx:Application>

다음으로 Application에서 받은 selectedCoffee값을 처리하자.
SecondComponent는 이전에 만든 것과 달라진 것이 없다. 참고로 코드는 아래에 적어둔다.

SecondComponent.mxml (Language : xml)

실행화면
그럼 프로그램을 실행해 보자. ComboBox를 선택해서 바꿔보기 바란다. ComboBox가 바뀌면 First Component에서 해당값을 가지는 Event를 발생하고 발생한 Event는 Application에 받는다. Event를 받으면서 넘어온 값을 다시 Second Component로 보낸다.

동작은 Event를 사용하지 않은 것과 다른 것은 없다. 그러나 데이타를 넘길시 Event 처리로 인해 각 컴포넌트간에 거의 종속성은 없다.

마무리

지금까지 Event를 이용해 각 컴포넌트간에 데이터 통신을 하는 법을 알아봤고 Event를 이용하는 방법이 왜 각 컴포넌트간의 종속성을 떨어뜨리는 지 확인해 보았다.

위 예제는 Event를 사용할때 더 복잡해 보인다. 하지만 이 컴포넌트들이 많아질 때 생각해보길 바란다. 그럼 컴포넌트간에 종속성을 없애는 일이 얼마나 필요한가 알 수 있을 것이다.

이미 언급했지만 이러한 방법론은 Flex뿐 아니라 다른 프로그램 언어에서도 동일하게 적용되는 부분이기도 하다. 그러므로 잘 알아두면 유용하게 써먹을 수 있을 것이라 생각한다.

환경 : Flex 2.0.1
참고사이트
- http://www.adobe.com/devnet/flex/articl ··· nts.html : 예제가 옛버전이라 요즘 Flex 버전에서는 실습 불가하다.

글쓴이&저작권 : 지돌스타(http://blog.jidolstar.com/88)

ps. 적고나니 아주 적절한 예제는 아닌 듯하다. 그래도 종속성에 대한 이해는 어느 정도 줄 수 있을 듯 하다. ㅎ

ps. [20070528] Event 속도가 직접 Access한 것보다 좀더 느리다. 이는 Event가 간접전달방식이라 그럴것이다. 속도만을 위해서라면 Event를 쓰면 안되겠다.