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

이전글에 이어서 UI 측면에서 하나씩 뜯어보자.

1.Event 목록 – EventTree

다음은 이벤트 리스트를 보여주는 트리 목록을 구성하는 방법이다. 선택된 인스턴스에 대하여 다음 작업이 필요하다.

1. 선택된 인스턴스가 발생시킬 수 있는 모든 이벤트 리스트( config XML의 이벤트 노드)를 표시한다
2. 선택된 인스턴스의 MXML 구문상 발견되는 이벤트 속성에 대하여 리스트를 얻는다.
3. 2번에서 얻은 이벤트 리스트 각각에 대하여 ";" 구분자로 파싱하여 API 리스트(API 노드)를 하위 노드에 표시한다.
   
4. 이벤트 노드 클릭시 API 설정화면을 비활성화 시킨다.
5. API 노드 클릭시 설정값이 적용된 API 설정화면을 보여준다.
   
6. API 노드는 드래그 이동 가능하도록 제작한다.
7. API 노드는 Child 노드를 가질 수 없다.

<컴포넌트 정의 XML 데이터 포맷>

다음은 외부에 정의된 config XML 데이터의 양식이며, 보통 value 노드는 비어있다.

	
		
			applicationComplete
			String
			
			
		
	

 

< EventTree 에서 데이터를 사용하기 위해 변형>

EventTree에서는 다음과 같은 형식으로 데이터를 변형하여 사용한다. value 노드를 제외한 child 노드가 모두 attribute으로 설정 한다.

	
		
	
	...

<API 리스트(method)의 작성>

MXML로부터 이벤트 내용을 파싱하여 하위노드에 표시한다. MXML 구문의 attribute을 조사하여 api 리스트를 작성한다. MXML 구문에서 이벤트 Attribute에는 다음과 같은 형태로 세팅된다. 메서드와 메서드는 세미콜론으로 분리된다. 

<mx:Sample change="

             callAPIValidator(event, 인스턴스, “API method name”, [parameter]…);

             callAPIValidator(event, 인스턴스, “API method name”, [parameter]…);

             ...

             " />

위 MXML에서 각각의 callAPIValidator 메서드로부터 인스턴스, API method name을 추출해 전체 API가 정의된 XML로부터 method 노드를 찾는다. (인스턴스 --> component 노드, method --> API method 노드).

method 노드의 내용을 가져와 callAPIValidator(event, 인스턴스, "API method name", [parameter]…); 의 내용을 적용 시킨 후 event 노드의 child로 차례로 add 한다. (삽입 순서는 실행 순서를 나타내므로 주의 한다.)

다음은 완성된 EventEditor 및 EventTree에서 사용할 데이터 구조를 보여준다. <method> 노드는 이미 정의된 API 데이터 (config XML)에서 가져온 노드에 MXML에 정의된 이벤트 내용을 텍스트 노드 값으로 설정한 형태이다.

	
		
			 
				값
			
			 
				값
			
			 
				값
			
		
		...

	

<반환되는 데이터 형식>

EventEditor에서 새로운 API에 대하여 편집을 하게되면 여기에 새로운 <method> 노드가 위의 형태로 추가/삭제 된다. 편집된 내용에 대한 출력 방식은 처음 입력받은 데이터 형식에서 value 노드의 값을 지정해주는 형태이다. 위의 events 노드는 EventEditor 에서 다음과 같은 형태로 파싱하여 사용될 것이다.

	
		applicationComplete
		Function
		
			callAPIValidator(event, 인스턴스, “API”, [parameter]…);
			callAPIValidator(event, 인스턴스, “API”, [parameter]…);
			...
		
		
	

다시 MXML 구문에서 이벤트 Attribute에는 다음과 같이 적용된다.

 <mx:Sample change="

             callAPIValidator(event, 인스턴스, “API”, [parameter]…);

             callAPIValidator(event, 인스턴스, “API”, [parameter]…);

             ...

             " />

2.기능 버튼

1. Up, Down 버튼
   이벤트 노드 위치는 항상 알파벳 순으로 정렬하므로 이벤트 노드 선택시에는 비활성화 시킨다. 이 버튼은 API 노드의 상하 위치를 변경하기 위한 버튼이다. API 노드의 위치 변경은 곧 API 의 실행 순서의 변경을 의미한다.
2. (+) 버튼
   API의 추가 버튼. 이벤트 노드가 선택 상태이든 API 노드가 선택 상태이든 상관 없이 이벤트 노드의 Child에 API 노드를 추가 한다.
3. (-) 버튼
   API의 삭제 버튼. API 노드가 선택상태인 경우에만 해당 API 노드를 삭제 한다.

3.API Owner 설정

스테이지에 등록된 객체의 리스트를 객체 이름(id) 또는 고유 아이디(uid)를 통해 리스트화 하여 선택할 수 있도록 표시한다.

4.API 리스트

선택된 API Owner 에 대하여 지원 가능한 API 리스트를 Config XML 문서의 API 노드로부터 가져와 표시한다.

API 노드에는 Method 뿐만 아니라 Parameter 정보도 함께 정의되어 있으므로 Parameter를 설정할 수 있는 편집창도 제공해 준다.

5.생성된 코드 보기

편집 내용에 따라 설정된 내용을 적용하여 이벤트 노드의 전체 설정된 코드를 보여준다. 위 코드에서 변경되는 부분은 다음과 같다.

 인스턴스 ß (apiOwner:*)
API ß (method:String)
parameter ßAPI 메서드에 전달할 Arguments 배열

확인 버튼을 누르면 편집 상태를 종료하면서 생성된 코드를 적용한다.