Flex Component간 종속성을 없애보자 (Event 사용하자) 2 -지돌스타 블로그-

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

2007/09/12 18:31

2. 컴포넌트가 지녀야할 조건

개인적으로 생각하는 컴포넌트(Component)가 지녀야할 조건을 다음 4가지로 요약해보았다.

편의성
사용하기 편리해야하는 것은 컴포넌트의 가장 기본적인 요소가 아닐까? 한 예로 Flex SDK에서 제공하는 Button, TextArea와 같은 컴포넌트를 사용하는 것이 어려운가? 쉽다.
좋은 컴포넌트는 속성 및 메소드 접근도 편리하고 이벤트 사용도 편하다.
편의성을 보장하기 위해 속성,메소드,이벤트 이름 선택이 무엇보다 중요하다. 즉, 체계화된 이름은 편의성 증대에 도움을 준다. 또 접근제한자(public, protected, private, internal, namespace)도 적절하게 사용해야 하겠다.
재사용성
만들어진 컴포넌트가 다른 프로젝트를 진행할 때에도 쉽게 사용할 수 있다면 그 컴포넌트는 재사용성이 좋다고 말할 수 있을것이다. 사실 재사용성이 없다면 컴포넌트라 할 수 없다.
확장성
컴포넌트를 상속해서 사용하기 용이해야 하겠다. 물론 확장성은 컴포넌트의 가장 중요한 요소가 되지 않지만, 확장성을 가지는 컴포넌트를 만들려고 하는 노력은 더욱도 세심하고 이용하기 편한 컴포넌트를 만드는데 도움을 줄 수 있다. 또한 많은 경우 확장해서 새롭게 디자인을 하거나 기능을 추가해야하는 경우가 생기기 때문에 확장성은 중요하다 할 수 있다.
독립성
종속성의 반대말로 컴포넌트는 독립성을 가져야한다. 이 말은 재사용성과 일맥상통할 수 있다. 거의 비슷한 말이다. 그런데 여기서 독립성을 강조한 이유는 속성이 다른 컴포넌트의 속성을 참고하지 않는 경우를 언급하고 싶기 때문이다. 만약 제작한 컴포넌트가 다른 컴포넌트의 속성을 직접 사용하는 경우 두 컴포넌트는 종속성을 가진다. 즉, 이 컴포넌트는 단독적으로 재사용하는 것은 불가능한 것이다. 완벽한 독립성을 보장하기 위해서 가장 좋은 방법은 바로 이벤트를 이용하는 것이다.

나는 여기서 독립성(비종속성)에 관련된 내용을 언급하기로 하겠다.

3. 독립적이지 못한 컴포넌트의 예

독립적이지 못하다는 것은 컴포넌트가 다른 컴포넌트에 종속적이라는 말과 동일하다는 것을 앞서 언급했다.
두가지 예제를 보여주겠다.

3-1. 컴포넌트에서 Application.application에 접근한 예

ExComponent.mxml (Language : xml)

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" xmlns:MyComp="*">
<mx:TextArea id="myTAMain" x="10" y="40"/>
<MyComp:StateComboBox y="10" x="10"/>
</mx:Application>

StateComboBox.mxml (Language : xml)

<?xml version="1.0" encoding="utf-8"?>
<mx:ComboBox xmlns:mx="http://www.adobe.com/2006/mxml" close="handleCloseEvent(event);">
<mx:Script>
<![CDATA[
import flash.events.Event;
public function handleCloseEvent(eventObj:Event) :void {
mx.core.Application.application.myTAMain.text = String(selectedIndex);
}
]]>
</mx:Script>
<mx:dataProvider>
<mx:String>AK</mx:String>
<mx:String>AL</mx:String>
</mx:dataProvider>
</mx:ComboBox>

위 소스는 아주 간단한 컴포넌트의 예제이다. ComboBox를 확장해서 StateComoboBox를 만들고 기본으로 2개의 아이템을 가진다. close이벤트가 실행되면 Application.application에서 만든 myTAMain을 접근하는 것을 볼 수 있다.

생각해보자. 이것이 과연 컴포넌트일까?
StateComboBox 컴포넌트는 반드시 Application 위에 있어야 하며 Application에는 myTAMain 아이디를 가진 TextArea Child가 반드시 있어야 한다. 2가지 조건을 만족하지 않는다면 StateComboBox는 사용할 수 없다는 것을 알 수 있다. 즉, 독립성을 보장할 수 없다는 것이다. 다른 말로 Application에 긴밀하게 종속적인 컴포넌트라는 것이다.

3-2. 컴포넌트에서 parentDocument 속성으로 접근한 예제

StateComboBox.mxml (Language : xml)

<?xml version="1.0" encoding="utf-8"?>
<mx:ComboBox xmlns:mx="http://www.adobe.com/2006/mxml" close="handleCloseEvent(event);">
<mx:Script>
<![CDATA[
import flash.events.Event;
public function handleCloseEvent(eventObj:Event) :void {
parentDocument.application.myTAMain.text = String(selectedIndex);
}
]]>
</mx:Script>
<mx:dataProvider>
<mx:String>AK</mx:String>
<mx:String>AL</mx:String>
</mx:dataProvider>
</mx:ComboBox>

이는 바로 위의 예제와 동일하지만 handleCloseEvent()함수에서 Application.application에 접근한 대신, parentDocument에 접근했다. 이렇게 했을 경우 위 예제보다 약간의 독립성이 보장된다. 왜냐하면 꼭 Application위에 없어도 되기 때문이다. 그렇지만 Application이 아니더라도 parentDocument에 해당되는 부모 컴포넌트에 TextArea형태의 myTAMain아이디를 가진 컴포넌트가 반드시 있어야하는 것은 동일하다. 그러므로 아직까지 완벽히 독립적이다라고 할 수 없다.

4. 독립성을 가진 컴포넌트의 예 - Event 사용

ExComponent.mxml (Language : xml)

StateComboBox.mxml (Language : xml)

<?xml version="1.0" encoding="utf-8"?>
<mx:ComboBox xmlns:mx="http://www.adobe.com/2006/mxml" close="handleCloseEvent(event);">
<mx:Metadata>
[Event(name="ChangeItem", type="StateComboBoxEvent")]
</mx:Metadata>
<mx:Script>
<![CDATA[
import flash.events.Event;
public function handleCloseEvent(eventObj:Event) :void {
var event:StateComboBoxEvent = new StateComboBoxEvent(StateComboBoxEvent.CHANGE_ITEM);
event.itemIndex = selectedIndex;
event.itemLabel = selectedLabel;
dispatchEvent( event );
}
]]>
</mx:Script>
<mx:dataProvider>
<mx:String>AK</mx:String>
<mx:String>AL</mx:String>
</mx:dataProvider>
</mx:ComboBox>

StateComboBoxEvent.as (Language : java)

package
{
import flash.events.Event;

public class StateComboBoxEvent extends Event
{
public static const CHANGE_ITEM:String = "ChangeItem";
private var _itemIndex:int = 0;
private var _itemLabel:String = "";

public function StateComboBoxEvent( type:String )
{
super(type,false,false);
}

public function set itemIndex( value:int ):void
{
_itemIndex = value;
}
public function get itemIndex():int
{
return _itemIndex;
}

public function set itemLabel( value:String ):void
{
_itemLabel = value;
}
public function get itemLabel():String
{
return _itemLabel;
}
}
}

위 예제는 Event를 이용한 컴포넌트이다. 앞서 언급한 예제와 달리 새로 Event를 만들었고 그 Event는 두개의 값, 즉 StateComboBox의 itemLabel과 itemIndex값을 Event Dispatch하기전에 설정한다. 이렇게 Event를 사용하면 앞의 2개 예제와 달리 TextArea를 컴포넌트 내에서 접근할 필요가 없다. 즉, 독립성이 보장된다. 여기서 만든 StateComboBox 컴포넌트는 어디서든 사용이 가능하다.

마무리

컴포넌트의 필요성과 조건, 그리고 독립성(비종속성)에 대해서 언급했다.
프로젝트를 하게 되면 이벤트를 설계하는 것이 귀찮아서 컴포넌트간 종속적이도록 만드는 경우가 많을 것이라 생각한다. 하지만 잘 설계된 컴포넌트는 유지보수 및 재사용이 편리해진다는 것을 생각하면 컴포넌트간 독립성을 보장하는 것이 얼마나 중요한지 알 수 있을 것이라 생각한다.

자, 그럼 우리함께 외치자! 컴포넌트 만들때는 독립성을 보장하자!

참고내용

Flex Component간 종속성을 없애보자 (Event 사용하자)
Application 오브젝트에의 액세스
커스텀 컴퍼넌트 작성
나쁜남자님의 "Flex Component간 종속성에 대한 약간 다른 견해"

글쓴이 : 지돌스타(http://blog.jidolstar.com/223)

크리에이티브 커먼즈 라이선스

이 저작물은 크리에이티브 커먼즈 코리아 저작자표시-비영리-동일조건변경허락 2.0 대한민국 라이선스에 따라 이용하실 수 있습니다.

'Adobe Flash Platform' 카테고리의 다른 글

[Flex] 스킨(Skin)을 이용하여 확장가능한 게이지 컴포넌트 제작 (11)	2007/09/20
[Flex] 비주얼 컴포넌트 라이프 사이클(Life Cycle) 분석 (15)	2007/09/18
Flex Component간 종속성을 없애보자 (Event 사용하자) 2 (0)	2007/09/12
Flex에서 namespace를 사용하는 예제 (4)	2007/09/05
Adobe의 John Koch로부터 받은 이메일 (11)	2007/09/03
[Flex] 동영상 화면 캡쳐후 서버에 전송하는 방법 (2)	2007/08/30

Adobe Flash Platform component, event, flex, 독립성, 종속성, 컴포넌트

Trackback 주소: http://blog.jidolstar.com/trackback/223

2007/09/12 18:40

Delete

Flex Component간 종속성을 없애보자. (Event 를 사용하자) Tracked from 지돌스타 블로그

◀ PREV [1] ... [450] [451] [452] [453] [454] [455] [456] [457] [458] ... [634] NEXT ▶

지돌스타 블로그