트리뷰 퍼블리싱 기본
트리뷰 퍼블리싱에 관련된 기본 정보를 제공한다.
트리뷰 컴포넌트는 리스트뷰와 유사하게 아이템에 다른 컴포넌트를 배치한 후, 아이템을 반복적으로 표시하게 할 때 사용된다.
차이점은 트리뷰 컴포넌트는 아이템에 계층 구조(Depth)를 설정할 수 있다는 점이다.
트리뷰 아키텍처
트리뷰은 트리뷰용 DIV 요소와, 아이템용 DIV 요소들로 구성된다.
트리뷰 생성과 삭제
트리뷰 생성
트리뷰 생성 방법은 아래와 같다.
- “컴포넌트”창 이용 방법
- “컴포넌트” 창에서 “트리뷰” 컴포넌트 선택
- 화면 캔버스내 생성 위치를 클릭(컴포넌트 초기값 설정에 설정된 크기로 생성됨)
트리뷰 삭제
트리뷰 삭제는 아래의 방법중 한가지를 사용합니다.
- 트리뷰 클릭후, 키보드 <DELETE> 입력
- 트리뷰 클릭후, 키보드 <CONTROL> + “D” 입력
- 트리뷰 우클릭후, 컨텍스트 메뉴에서 “삭제” 메뉴 선택
트리뷰 주요 속성
트리뷰 컴포넌트 주요 속성은 아래와 같다.
용어 | 설명 |
---|---|
link_data | 트리데이터셋 설정 |
menu | 트리 메뉴 단계별 정보 |
트리뷰 아이템 속성
트리뷰 컴포넌트에 이미지를 설정하는 방법은 아래와 같다.
용어 | 설명 |
---|---|
back_color | 배경색 설정 |
트리뷰 아이템 반복되게 구성하기
HTML5 컴포넌트에서 트리뷰을 클릭한 후, 화면을 클릭해서 트리뷰를 추가한다.
Transaction 탭을 클릭하고 데이터셋을 추가한다.
데이터셋에 컬럼을 세 개 추가하고, 초기데이터를 입력한다.
(Transaction 탭이 표시되지 않는 경우는 도구 > 옵션 > 기타 > Transaction 탭 보기 체크)
컬럼명은 다음 테이블 데이터를 드래그하여 복사한 후 '클립보드내용 붙여넣기' 버튼을 이용하여 붙여넣기 할 수 있다.
DEPTH |
DATA_0 |
DATA_1 |
초기 데이터도 다음 테이블 데이터를 드래그하여 복사한 후 '클립보드내용 붙이기' 버튼을 이용하여 붙여넣기 할 수 있다.
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 컬럼을 선택한다.
트리뷰를 더블클릭해서 트리뷰 아이템 설정창을 띄운다.
하단에 추가 버튼을 2번 클릭해서 아이템을 2개 추가한다.
아이템 구분을 위해 back_color를 설정하였다.
트리뷰에 다른 컴포넌트를 각각 추가한다.
다음을 텍스트 컴포넌트를 아이템마다 추가한 모습이다.
첫번째 아이템에 추가한 컴포넌트의 link_data 속성을 클릭해서 링크 데이터 설정창을 띄운다.
DATA_0 컬럼을 선택한다.
마찬가지로 두번째 아이템에 추가한 컴포넌트의 link_data 속성을 클릭해서 링크 데이터 설정창을 띄운다.
DATA_1 컬럼을 선택한다.
실행하면 다음처럼 표시되며, 첫번째 아이템을 클릭하면 그 하위 아이템이 접히거나 펼쳐진다.