====== 트리뷰 퍼블리싱 기본 ======
트리뷰 퍼블리싱에 관련된 기본 정보를 제공한다.

트리뷰 컴포넌트는 리스트뷰와 유사하게 아이템에 다른 컴포넌트를 배치한 후, 아이템을 반복적으로 표시하게 할 때 사용된다.

차이점은 트리뷰 컴포넌트는 아이템에 계층 구조(Depth)를 설정할 수 있다는 점이다.

===== 트리뷰 아키텍처 =====
트리뷰은 트리뷰용 DIV 요소와, 아이템용 DIV 요소들로 구성된다.

===== 트리뷰 생성과 삭제 =====
==== 트리뷰 생성 ====
트리뷰 생성 방법은 아래와 같다.
  * "컴포넌트"창 이용 방법
    - "컴포넌트" 창에서 "트리뷰" 컴포넌트 선택
    - 화면 캔버스내 생성 위치를 클릭(컴포넌트 초기값 설정에 설정된 크기로 생성됨)

==== 트리뷰 삭제 ====
트리뷰 삭제는 아래의 방법중 한가지를 사용합니다.
  * 트리뷰 클릭후, 키보드 <DELETE> 입력
  * 트리뷰 클릭후, 키보드 <CONTROL> + "D" 입력
  * 트리뷰 우클릭후, 컨텍스트 메뉴에서 "삭제" 메뉴 선택

===== 트리뷰 주요 속성 =====
트리뷰 컴포넌트 주요 속성은 아래와 같다.

|<100% 160px ->|
^ 용어 ^ 설명 ^
| link_data | 트리데이터셋 설정 |
| menu | 트리 메뉴 단계별 정보 |

===== 트리뷰 아이템 속성 =====
트리뷰 컴포넌트에 이미지를 설정하는 방법은 아래와 같다.

|<100% 160px ->|
^ 용어 ^ 설명 ^
| back_color | 배경색 설정 |

==== 트리뷰 아이템 반복되게 구성하기 ====
HTML5 컴포넌트에서 트리뷰을 클릭한 후, 화면을 클릭해서 트리뷰를 추가한다.

{{ .:treeview:treeview_create.png?nolink |}}

Transaction 탭을 클릭하고 데이터셋을 추가한다.

데이터셋에 컬럼을 세 개 추가하고, 초기데이터를 입력한다.

(Transaction 탭이 표시되지 않는 경우는 도구 >  옵션 > 기타 > Transaction 탭 보기 체크)

{{ .:treeview:treeview_dataset.png?nolink |}}

컬럼명은 다음 테이블 데이터를 드래그하여 복사한 후 '클립보드내용 붙여넣기' 버튼을 이용하여 붙여넣기 할 수 있다.

{{ .:treeview:treeview_clipboard_column.png?nolink |}}

| DEPTH |
| DATA_0 |
| DATA_1 |

초기 데이터도 다음 테이블 데이터를 드래그하여 복사한 후 '클립보드내용 붙이기' 버튼을 이용하여 붙여넣기 할 수 있다.

{{ .:treeview:treeview_clipboard_data.png?nolink |}}

| 0 | 1레벨 1 |  |
| 1 |  | 2레벨 1 |
| 1 |  | 2레벨 2 |
| 0 | 1레벨 2 |  |
| 1 |  | 2레벨 3 |
| 1 |  | 2레벨 4 |

트리뷰 link_data를 클릭하여 트리뷰 데이터셋 등록창을 띄운다.

데이텃셋 ID에 xDataSetID_01를 선택하고, Depth에 DEPTH 컬럼을 선택한다.

{{ .:treeview:treeview_linkdata.png?nolink |}}

트리뷰를 더블클릭해서 트리뷰 아이템 설정창을 띄운다.

하단에 추가 버튼을 2번 클릭해서 아이템을 2개 추가한다.

아이템 구분을 위해 back_color를 설정하였다.

{{ .:treeview:treeview_item_add.png?nolink |}}

트리뷰에 다른 컴포넌트를 각각 추가한다.

다음을 텍스트 컴포넌트를 아이템마다 추가한 모습이다.

{{ .:treeview:treeview_text.png?nolink |}}

첫번째 아이템에 추가한 컴포넌트의 link_data 속성을 클릭해서 링크 데이터 설정창을 띄운다.

DATA_0 컬럼을 선택한다.

{{ .:treeview:treeview_text1_linkdata.png?nolink |}}

마찬가지로 두번째 아이템에 추가한 컴포넌트의 link_data 속성을 클릭해서 링크 데이터 설정창을 띄운다.

DATA_1 컬럼을 선택한다.

{{ .:treeview:treeview_text2_linkdata.png?nolink |}}

실행하면 다음처럼 표시되며, 첫번째 아이템을 클릭하면 그 하위 아이템이 접히거나 펼쳐진다.

{{ .:treeview:treeview_run.gif?nolink |}}