본문 바로가기

Blog/WYSIWYG Tool 개발

코드 생성기(2) - EventEditor 제작

EventEditor 제작 개요

사용자가 작성한 코드를 이벤트에 설정할 수 있도록 하는 방법(이벤트 Attribute에 function 까지 설정 할수 있는 방식)은 사용자에게 자유롭게 기능을 컨트롤할 수 있는 방법을 제공해 주지만 이를 사용하는 데에는 어느 정도 프로그램에 대한 이해라든지 고급 스킬을 필요로 하고, 더불어 여러가지 에러 상황에 대한 대처능력 및 디버깅 능력이 필요하므로 일반 유저를 타겟으로 적용 범위는 넓진 않지만 좀더 이해하기 쉽고 직관적인 인터페이스를 갖추어 메서드(API) 리스트를 설정하는 방식으로 EventEditor를 제작하도록 한다.

그럼 이벤트 설정(편집) 후에 MXML 구문 내에서 최종적으로 생성되는 코드의 모습을 살펴 보자.

// 고정된 스크립트 코드 : 고정적으로 삽입되는 코드

<mx:Script>
    <![CDATA[
        import mx.events.Event;

// 유효성 검사 후 API 호출
private function callAPIValidator (event:Event, apiOwner:UIComponent, method:String, ..args):void
{
    if(!apiOwner) return;
    try{
        apiOwner[method].call(apiOwner, args)
        }catch(error:Error){
            trace("[CALL API ERROR]", event.type, apiOwner, method);
            trace(method, "(", args, ")");
            trace(error.message);
    }finally{
    }
}

    ]]>
</mx:Script>

생성 코드 패턴 : 이벤트 Attribute에 API 설정(추가) 되는 모습

<mx:Tree id="treeComp" change="
callAPIValidator(event, 인스턴스, "API", [parameter]…);
callAPIValidator(event, 인스턴스, "API", [parameter]…);
callAPIValidator(event, 인스턴스, "API", [parameter]…);
" />

결국 우리가 하고자 하는 것은 UI를 통하여 해당 객체(Tree)가 발생시키는 이벤트(change)를 선택하고 실행될 메서드( callAPIValidator(event, 인스턴스, "API", [parameter]…); ) 를 추가/제거하거나 실행 순서를 바꾸는 작업을 통하여 이벤트 Attribute에 내용을 위와 같은 모양으로 채워주는 것이다.

Event Editor가 호출되는 시나리오

<표시 단계>

  1. 사용자가 스테이지상의 객체를 선택한다.
  2. 선택된 객체가 제공하는 Event 목록을 불러온다
  3. Event 목록 중 이미 API가 설정된 경우 이을 파싱하여 설정된 API 리스트를 하위 노드에 표시한다.

<편집 단계>

  1. Event 목록 중 하나를 선택한 후 add(설정) 버튼을 클릭한다. (API 설정 화면이 나타난다.)
  2. Target 설정 - API Owner를 고른다. (실행시킬 메서드를 가진 스테이지 상의 객체, 또는 전체 목록)
  3. Method 설정 – Target의 API 목록 중 하나를 선택한다.
  4. Parameter 설정 – (각 API에 대한 parameter의 스키마는 XML로 정의됨)

<설정 적용 단계>

  1. 확인 버튼을 누른다.
  2. 설정내용에 따라 이벤트 Attribute 에 적용할 코드를 생성하여 적용한다.
  3. 이벤트 표시 목록을 갱신한다.

 

구체적인 모습을 생각해보자. 이제 Tree목록의 이벤트 항목을 선택하는 것으로 코드 생성 및 편집 작업이 시작 된다. 화면 구성이 다음과 같을 때 기능적인 면에서 간단히 체크해 보자.

다음과 같은 내용의 구성이 필요할 것 같다.

 

  • 이벤트 노드를 선택한 경우 추가 버튼(+)만을 활성화 시키고 나머지는 초기화 또는 비활성화 시킨다.
  • API 노드를 선택한 경우 해당 API에 대한 정보를 편집 가능하도록 표시해 준다.
  • Tree 노드의 Depth 는 1을 넘지 않는다.
  • 아무것도 선택되지 않았다면 모두 비활성화 시킨다.
  • 추가 버튼 (+) 클릭 시 설정 창이 편집 가능하도록 초기화되고 확인버튼을 눌렀을 때 추가 설정 내용이 Tree 노드에 추가된다.
  • 제거 버튼 (-), Up, Down 버튼은 API 노드가 선택 상태일 경우에만 유효하다.
  • Up, Down 버튼 으로 API 노드의 상/하 위치 (API 실행 순서)를 바꿀 수 있다.

 

데이터 인터페이스

<Config XML>

객체에 대한 기본 설정 Config XML 의 component 리스트 데이터의 예 :
(UIComponent 클래스의 인스턴스가 선택되었을 때 기본 세팅을 위한 정보)



	
		applicationComplete
		Function
		
	
	
		error
		Function
		
	


	
		
		
	
	
		
		
	
	
		
		
		
	
	
		
		
		
	



< MXML 데이터>

선택 객체에서 EventEditor 에 전달되는 MXML 데이터의 예 :

<mx: UIComponent id="comp" change="
callAPIValidator(event, 인스턴스, "API", [parameter]…);
callAPIValidator(event, 인스턴스, "API", [parameter]…);
callAPIValidator(event, 인스턴스, "API", [parameter]…);
" />

계속...