리스트뷰 기본 가이드

이 화면은 리스트뷰 컴포넌트의 기본 기능에 대한 샘플 화면입니다.

리스트뷰는 데이터셋과 링크하여 리스트뷰 아이템을 반복적으로 표시하는 기능을 제공한다.

리스트뷰 아이템에는 반복적으로 표시할 UI를 구성하며, 아이템내 컴포넌트는 리스트뷰가 링크된 데이터셋과 동일한 데이터셋에 링크되야 한다.

리스트뷰 아이템에는 패널, 탭 등과 같은 다른 컴포넌트를 포함할 수 있는 컨테이너성 컴포넌트의 배치는 불가하다.

리스트뷰 아이템내 컴포넌트에 대한 이벤트 발생시, 컴포넌트가 포함된 아이템의 인덱스 정보가 이벤트 파라미터로 전달된다.

리스트뷰 아이템 빈 영역 및 아이템내 컴포넌트 클릭시 아이템 인덱스와 이벤트가 발생한 컴포넌트 인스턴스가 파라미터 전달된다.

관련 속성으로 item_dir, item_height, item_width이 있다.

관련 API로 additem, inseritem, deleteitem, deleteallitem, getselecteditem, getitemcount가 있다.

관련 이벤트로 on_itemclick, on_itemchange가 있다.

템플릿 위치: /HTML5/COMPONENT/LISTVIEW/listview_basic

템플릿 파일

• listview_basic.xml
• listview_basic.js
• 새창으로 실행

// 화면 로드 이벤트
function screen_on_load()
{
	if (factory.ismobile() == true) {
		factory.consoleprint("★★★ This is Mobile ★★★");
	}
}

/**
 * 리스트뷰 아이템 클릭 이벤트
 *
 * @param {Object} objInst 리스트뷰 컴포넌트 인스턴스
 * @param {number} nItemIndex 리스트뷰 아이템 인덱스
 * @param {Object} objChildInst 이벤트가 발생한 리스트뷰 아이템내 컴포넌트 인스턴스 또는 null
 */
function lv_basic_on_itemclick(objInst, nItemIndex, objChildInst)
{
	factory.consoleprint("on_itemclick> Start");
	factory.consoleprint("on_itemclick> Component Name: " + objInst.getname());
	factory.consoleprint("on_itemclick> nItemIndex: " + nItemIndex);

	if (objChildInst) {
		// 리스트뷰 아이템내 컴포넌트에 이벤트 발생
		factory.consoleprint("on_itemclick> Item Component Name: " + objChildInst.getname());
	}
	else {
		// 리스트뷰 아이템내 빈 영역에 이벤트 발생
		factory.consoleprint("on_itemclick> Item Component is null");
	}
}

/**
 * 리스트뷰 아이템 선택 변경 이벤트
 *
 * @param {Object} objInst 리스트뷰 컴포넌트 인스턴스
 * @param {number} nPrevIndex 변경전 아이템 인덱스 또는 -1
 * @param {number} nCurrIndex 변경후 아이템 인덱스
 */
function lv_basic_on_itemchange(objInst, nPrevIndex, nCurrIndex)
{
	factory.consoleprint("on_itemchange> Start");
	factory.consoleprint("on_itemchange> Component Name: " + objInst.getname());
	factory.consoleprint("on_itemchange> nPrevIndex: " + nPrevIndex);
	factory.consoleprint("on_itemchange> nCurrIndex: " + nCurrIndex);
}

/**
 * 리스트뷰 스크롤 이동 이벤트
 *
 * @param {Object} objInst 리스트뷰 컴포넌트 인스턴스
 * @param {number} nScrollPos 그리드 스크롤 위치 (Zero-Based)
 * @param {number} nPrevScrollPos 그리드 이전 스크롤 위치 (Zero-Based)
 * @param {number} nSBCode 스크롤 이동 유형 코드
 * @param {string} bSBMax 맨 끝으로 이동 여부
 */
function lv_basic_on_scroll(objInst, nScrollPos, nPrevScrollPos, nSBCode, bSBMax)
{
	factory.consoleprint("on_scroll> Start");
	factory.consoleprint("on_scroll> Component Name = " + objInst.getname());
	factory.consoleprint("on_scroll> nScrollPos = " + nScrollPos);
	factory.consoleprint("on_scroll> nPrevScrollPos = " + nPrevScrollPos);
	factory.consoleprint("on_scroll> nSBCode = " + nSBCode);
	factory.consoleprint("on_scroll> bSBMax = " + bSBMax);
}

/**
 * 리스트뷰 파일 드롭 이벤트
 * 리스트뷰 accept_dropfiles 속성이 true인 경우에,
 * 윈도우 탐색기에서 파일을 드래그하여 드랍시 이벤트가 발생한다.
 *
 * @param {Object} objInst 그리드 컴포넌트 인스턴스
 * @param {Array} arrayDropFiles 드랍한 HTML File 오브젝트 배열
 * @param {number} nDropFileCount 드랍한 파일 갯수
 */
function lv_basic_on_dropfiles(objInst, arrayDropFiles, nDropFileCount)
{
	var i;

	factory.consoleprint("on_dropfiles> Start");
	factory.consoleprint("on_dropfiles> Component Name = " + objInst.getname());
	factory.consoleprint("on_dropfiles> nDropFileCount = " + nDropFileCount);

	// 드랍한 파일 이름 로깅
	for (i = 0; i < nDropFileCount; i++) {
		factory.consoleprint("on_dropfiles> " + i + " : " + arrayDropFiles[i].name);
	}
}

// "getitemcount" 버튼 이벤트
function btn_getitemcount_on_mouseup(objInst)
{
	// 아이템 갯수 표시
	factory.consoleprint("item count = " + this.lv_basic.getitemcount());
}

// "getselecteditem" 버튼 이벤트
function btn_getselecteditem_on_mouseup(objInst)
{
	// 선택된 아이템 인덱스 표시
	factory.consoleprint("selected item index = " + this.lv_basic.getselecteditem());
}

// "refresh" 버튼 이벤트
function btn_refresh_on_mouseup(objInst)
{
	this.lv_basic.refresh();
}

// "additem" 버튼 이벤트
function btn_additem_on_mouseup(objInst)
{
	var item_index;

	// 아이템을 맨 뒤에 추가
	item_index = this.lv_basic.additem();
	factory.consoleprint("additem return value = " + item_index);

	// 추가된 아이템의 필드 값 설정
	this.fld_listview[item_index].settext("additem");
}

// "insertitem" 버튼 이벤트
function btn_insertitem_on_mouseup(objInst)
{
	var item_index;

	// 아이템을 삽입 위치를 구하기 위해, 선택된 아이템 인덱스를 구함
	item_index = this.lv_basic.getselecteditem();
	if (item_index == -1) { item_index = 0; }

	// 특정 아이템 인덱스 위치에 아이템 삽입
	this.lv_basic.insertitem(item_index);

	// 삽입된 아이템의 필드 값 설정
	this.fld_listview[item_index].settext("insertitem");
}

// "deleteitem" 버튼 이벤트
function btn_deleteitem_on_mouseup(objInst)
{
	var item_index;

	// 선택된 아이템 인덱스를 구함
	item_index = this.lv_basic.getselecteditem();

	// 특정 아이템 삭제
	this.lv_basic.deleteitem(item_index);
}

// "deleteallitem" 버튼 이벤트
function btn_deleteallitem_on_mouseup(objInst)
{
	// 모든 아이템 삭제
	this.lv_basic.deleteallitem();
}