목차

트리뷰 퍼블리싱 기본

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

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

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

트리뷰 아키텍처

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

트리뷰 생성과 삭제

트리뷰 생성

트리뷰 생성 방법은 아래와 같다.

트리뷰 삭제

트리뷰 삭제는 아래의 방법중 한가지를 사용합니다.

트리뷰 주요 속성

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

용어 설명
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 컬럼을 선택한다.

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