본문 바로가기

Blog/WYSIWYG Tool 개발

UI가 적용된 Application에서 데이터(MXML) 생성-저장-저장파일 불러오기 과정 정리

속성창 세팅을 위한 Catalog XML 파일

n  내용 :

     컴포넌트 클래스 정보 (인스턴스 생성에 필요한 정보)

     사용자가 UI에 의해 변경 가능한 Property 리스트,  Event 리스트,  Style 리스트

n  사용처 :

     Application 에서 Component 선택 변경시 컴포넌트의 속성창 UI 세팅 할 때

     데이터 Node를 생성 할 때

     MXML 데이터의 attribute을 생성 할 때

 

Catalog XML 파일의 예 :



	
		
			
		
		
			
		
		
			
		
	

 ()

화면상에 Display 되는 컴포넌트의 선택 상황과 데이터(MXML)에서 가리키는 Node와는 항상 동기화 되어야 한다.

히스토리 기능(undo, redo)을 위해 MVC 패턴에 따라 순서가 결정된다.

select 관리, Asset 관리, History 관리, History 단계에 따라 화면 세팅 하는 방법에 관한 방법은 생략함.

 

<생성 과정>

 

1.    시작 à UI에서 Add 명령 발생

     UI에서 Component 추가 이벤트 발생

     Catalog XML 파일을 참고하여 Component에 대한 필요한 세팅정보 (AddInfo) 를 구성한다.

     새로운 ID 를 생성하여 AddInfo에 추가한다.

 

2.    데이터 변경

     데이터(MXML)에 새 Component에 대한 데이터(MXML Component Node)를 생성한다. à AddComponentCMD

     MXML Component Node AddInfo 에 따라 기본설정을 설정 한다.(Attribute 추가) à ChangePropertiesCMD

 

3.    히스토리에 등록 (현재 작성된 MXML의 카피본)

 

4.    Display 업데이트

     Component 인스턴스를 생성한다.

 

<변경 과정>

 

1.    시작 à UI에서 속성 변경 명령 발생

    UI에서 Component 속성 변경 이벤트 발생 (property, event, style, script)

    Component에 대해 변경된 세팅정보 (AddInfo) 를 구성한다.

 

2.    데이터 변경

     AddInfo 에 따라 설정을 변경 한다. à ChangePropertiesCMD

     설정과 관련된 외부 파일(Asset)이 있다면 임시폴더에 카피한다. Asset은 따로 관리할 필요가 있다.
(
같은 이름의 Asset이 있을 때 이름변경을 유도한다. 또는 ID로 파일을 관리한다)

 

3.    히스토리에 등록 (현재 작성된 MXML의 카피본)

 

4.    Display 업데이트

     Component 인스턴스에 변경된 속성을 적용 한다.

 

<제거 과정>

 

1.    시작 à UI에서 제거 명령 발생

    Component에 대한 제거정보 (RemoveInfo) 를 구성한다.

 

2.    데이터 변경

    데이터에서 해당 Component에 대한 Node를 삭제한다. à RemoveComponentCMD

 

3.    히스토리에 등록 (현재 작성된 MXML의 카피본)

 

4.    Display 업데이트

    Component 인스턴스를 제거한다.

 

<저장 하기>

 

     작성된 MXML 파일 생성

     사용된 Asset 파일을 추려낸다.

     Flex 프레임 웍 SWC, 필요한 Application 프레임 웍 SWC

     저장파일을 생성한다. (압축파일)

 

<불러오기>

 

     저장파일을 임시 폴더에 압축을 푼다.

     MXML 파일의 모든 Child Node에 대하여 리스트를 작성한다.

     Node에 대하여 다음 과정을 실행한다.

 

1.    MXML 파싱

     Node로 부터 인스턴스 생성을 위한 클래스 정보를 추출한다.

     Node에서 속성을 추출하여  AddInfo을 구성한다.

 

2.    데이터 변경 (생성 및 속성 적용) – macro 실행

     데이터에서 새 Component에 대한 데이터를 생성한다. à AddComponentCMD

     AddInfo 에 따라 설정을 변경 한다. (Asset 을 정리한다.) à ChangePropertiesCMD

 

3.    히스토리에 등록 (현재 작성된 MXML의 카피본)

 

4.    Display 업데이트

     Component 인스턴스를 생성한다.

     Component 인스턴스에 변경된 속성을 적용 한다.