ListView 소개

ListView 컴포넌트는 Grid 컴포넌트처럼 바인딩 된 Dataset 오브젝트의 데이터를 표현할 수 있습니다. Grid 컴포넌트는 Row, Column 기준으로 데이터를 표현하지만, ListView 컴포넌트에서는 Body 또는 Detail 밴드 영역 내에서 자유롭게 데이터를 배치해서 원하는 형식으로 표현할 수 있습니다.

Body 밴드는 기본적으로 표시하고 Detail 밴드는 사용자가 버튼을 클릭하거나 다른 이벤트를 통해 표시하도록 설정할 수 있습니다.

ListView 컴포넌트는 17.0.0.1100 버전부터 지원합니다.

사용 예

아래 이미지는 모바일 기기에서 사용하는 음식점 메뉴 소개 디자인입니다. 단순히 목록을 나열하지 않고 왼쪽에 이미지를 배치하고 오른쪽에는 이미지(메뉴)에 대한 설명을 배치합니다. Grid 컴포넌트 같은 경우에는 특정 데이터를 강조하기가 쉽지 않은데, ListView 컴포넌트는 개별 데이터를 각각의 Cell로 처리하기 때문에 글자색을 다르게 하거나 글자 크기를 원하는 형태로 바꾸어 표시할 수 있습니다.

sample_listbox_01_03

ListView 만들기

ListView 생성하기

툴바에서 ListView를 선택한 후, 폼 위에서 적당한 크기로 드래그하여 생성합니다. 컴포넌트를 선택한 상태에서 폼 위에 클릭하면 기본 크기로 생성됩니다.

ListView 아이템 목록 구성하기

Dataset 오브젝트에 화면에 표시할 데이터를 생성하고 ListView 컴포넌트에 바인딩합니다. Dataset 오브젝트는 아래와 같이 설정합니다.

Dataset 바인딩하기

생성된 Dataset 오브젝트를 선택하고 마우스로 드래그해서 ListView 컴포넌트로 가져갑니다. 바인딩이 완료되면 아래와 같이 기본 레이아웃이 설정됩니다.

그대로 표시하더라도 사용자에게 정보를 전달할 수 있지만, 좀 더 깔끔하게 데이터를 정리해봅니다.

ListView Contents Editor 실행하기

ListView 컴포넌트를 더블클릭하면 ListView Contents Editor를 실행합니다. "No" 항목을 글자 크기를 키워서 왼쪽에 배치하고 오른쪽에는 Title을 붉은색으로 표시합니다. 상단 툴바에서 [Edit Body]를 선택해서 Body 밴드 편집 모드로 전환합니다.

필요 없는 셀들은 모두 삭제합니다. "bind:No", "bind:Detail" 항목 외에는 모두 삭제합니다. Form에서 컴포넌트 편집하는 것과 같은 방식으로 셀을 선택하고 삭제합니다.

"No" 항목을 표시하는 부분은 font 속성값에서 font-size를 40, textAlign 속성값을 "center"로 설정합니다. "Title" 항목을 표시하는 부분은 font 속성값에서 font-size를 25, color 속성값을 "red"로 설정합니다. 그리고 셀의 크기와 위치를 적절하게 조정합니다.

셀 편집이 끝나면 Enter 키를 입력하거나 [Exit Editor] 메뉴를 선택해 기본 편집 모드로 전환합니다.

Detail 밴드 추가하기

상단 툴바에서 [Append Detail] 항목을 선택하고 Detail 밴드를 추가합니다. [Edit Detail] 항목을 선택한 후 Detail 밴드에 표시될 내용을 편집합니다.

[Cell] 항목을 선택해서 셀을 추가하고 text 속성값과 Position 관련 속성을 수정합니다. 셀 편집이 끝나면 Enter 키를 입력하거나 [Exit Editor] 메뉴를 선택해 기본 편집 모드로 전환합니다.

Body 밴드를 선택하고 속성창에서 expendbartype 속성값을 true로 설정합니다.

QuickView로 확인하기

QuickView를 실행하고 설정한 값이 어떻게 표시되는지 확인합니다. 오른쪽에 표시되는 버튼을 클릭하면 Detail 밴드 영역을 보였다가 보이지 않도록 설정할 수 있습니다.

기본, 상세 데이터 표현하기

ListView 컴포넌트의 기본 기능인 기본, 상세 데이터를 표현하는 방식과 세부 속성에 따른 차이를 살펴봅니다. 대략적인 화면은 아래와 같이 구성합니다.

예제에서 사용한 이미지와 텍스트는 아래 자료에서 가져왔습니다.

https://en.wikipedia.org/wiki/The_Freewheelin%27_Bob_Dylan

https://en.wikipedia.org/wiki/Highway_61_Revisited

https://en.wikipedia.org/wiki/Blood_on_the_Tracks

예제

앨범 정보를 표시합니다. 오른쪽 버튼을 클릭하면 해당 앨범 수록곡을 표시합니다. Radio 컴포넌트를 선택하면 bandexpandtype 속성값을 변경하고 Spin 컴포넌트의 숫자를 변경하면 bandindentsize 속성값으로 반영됩니다.

sample_listview_01.xfdl

예제에서 사용한 핵심 기능

bandexpandtype: Body 밴드 설정에서 expandbartype 속성값을 true로 지정한 경우 목록 오른쪽에 Detail 밴드 영역을 제어할 수 있는 버튼이 표시됩니다. 이때 Detail 밴드 영역을 어떻게 표시할지 bandexpandtype 속성에서 지정할 수 있습니다. 속성값을 "expand", "accordion"으로 설정한 경우 비슷하게 동작하는 것처럼 보이는데 "accordion"으로 설정한 경우에는 한번에 하나의 Detail 밴드만 표시합니다. 예를 들어 첫 번째 아이템의 Detail 밴드가 열린 상태에서 두 번째 아이템의 Detail 밴드를 펼치면 첫 번째 아이템의 Detail 밴드는 자동으로 닫힙니다.

bandindentsize: Detail 밴드가 펼쳐질 때 지정된 속성값만큼 왼쪽 여백이 생깁니다. bandexpandtype 속성값이 "popup"인 경우에는 ListView 컴포넌트의 영역을 벗어나 Detail 밴드가 표시될 수 있습니다.

예제 구현 방법

화면 구성하기

ListView 컴포넌트와 Radio, Spin 컴포넌트를 예제 화면과 같이 배치합니다. ListView 컴포넌트의 width, height 속성값은 500으로 지정합니다. Dataset 오브젝트를 생성하고 아래와 같이 설정합니다. Dataset 오브젝트를 화면에서 드래그해서 ListView 컴포넌트에 바인딩합니다.

수록곡 데이터가 포함되어 있어 위의 이미지에서는 전체 데이터를 다 보여주지 않습니다. 해당 샘플 코드를 참고하세요.

cover 컬럼값에는 앨범 커버 이미지 경로를 지정합니다. 이미지 파일은 Resource Explorer에서 [Import ImageResource] 기능을 사용해 프로젝트에 추가합니다. 추가된 이미지는 아래와 같은 경로를 가집니다.

imagerc::Bob_Dylan_-_The_Freewheelin'_Bob_Dylan.jpg

ListView Contents Editor 실행하기

Dataset 오브젝트의 값에 따라 컬럼 id, 컬럼 데이터를 ListView 컴포넌트의 셀로 자동 설정합니다. 하지만, 예제에서는 다른 식으로 화면을 구성할 것이기 때문에 Body 밴드 편집 모드로 전환하고 설정된 셀을 모두 삭제합니다. 그리고 아래와 같이 3개의 셀을 배치합니다.

Body 밴드의 expandbartype 속성값은 true로 설정하고 height 속성값은 160으로 지정합니다.

Detail 밴드 추가하고 설정하기

ListView Contents Editor 상단 툴바에서 [Append Detail] 항목을 선택하고 Detail 밴드를 추가합니다. Detail 밴드의 height 속성값은 250으로 지정하고 Detail 밴드 편집 모드로 전환합니다. 셀을 하나 추가하고 셀 속성을 아래와 같이 지정합니다.

ListView Contents Editor 창을 닫고 ListView 컴포넌트의 bandinitstatus 속성값을 "collapse"로 설정합니다. QuickView(Ctrl + F6)로 실행한 후 화면에 앨범 정보가 표시되고 오른쪽 버튼 클릭 시 수록곡 정보가 표시되는지 확인합니다.

bandexpandtype 속성값 바꾸어보기

예제에서 bandexpandtype 속성값을 바꾸어볼 수 있도록 Radio 컴포넌트에서 bandexpandtype 속성값을 설정할 수 있도록 합니다. innerdataset 항목값으로 "expand", "accordion", "popup"을 설정하고 onitemchanged 이벤트 함수를 아래와 같이 작성합니다.

this.Radio00_onitemchanged = function(obj:nexacro.Radio,e:nexacro.ItemChangeEventInfo)
{
	this.ListView00.set_bandexpandtype(e.postvalue);
};

bandindentsize 속성값 바꾸어보기

Spin 컴포넌트에서 설정한 값이 bandindentsize 속성값으로 지정될 수 있도록 onchanged 이벤트 함수를 아래와 같이 작성합니다.

this.Spin00_onchanged = function(obj:nexacro.Spin,e:nexacro.ChangeEventInfo)
{
	this.ListView00.set_bandindentsize(e.postvalue);
};

QuickView로 확인하기

QuickView(Ctrl + F6)로 실행한 후 bandexpandtype, bandindentsize 속성값을 바꾸고 화면이 어떻게 표시되는지 확인합니다.

너비에 따라 다른 형식으로 데이터 표현하기

같은 데이터라도 사용하는 디바이스에 따라 다른 형식으로 표현할 수 있습니다. 이미지과 텍스트를 표현할 때 이미지와 텍스트를 나란히 하나의 컬럼에 표현할 수도 있고 너비가 좀 더 커지면 두개 이상의 컬럼에 표현할 수도 있습니다. 너비가 텍스트를 같이 표시하기에 좁은 경우에는 이미지 위에 텍스트를 표현하는 형식도 선택할 수 있습니다.

예제에서 사용한 이미지와 텍스트는 아래 자료에서 가져왔습니다.

https://en.wikipedia.org/wiki/The_Freewheelin%27_Bob_Dylan

https://en.wikipedia.org/wiki/Highway_61_Revisited

https://en.wikipedia.org/wiki/Blood_on_the_Tracks

https://en.wikipedia.org/wiki/Bringing_It_All_Back_Home

https://en.wikipedia.org/wiki/Blonde_on_Blonde

예제

Radio 컴포넌트에서 너비값을 선택하면 해당 너비에 적절한 형식으로 데이터를 표현합니다.

sample_listview_02.xfdl

예제에서 사용한 핵심 기능

formatid: 조건에 따라 다른 형식으로 데이터를 표현하고자 할때 formatid 속성값을 변경해 적용할 수 있습니다. Grid 컴포넌트의 경우에는 컬럼의 순서를 바꾸거나 표현하는 컬럼 개수를 바꾸는 등의 제한적인 활용만 할 수 있는데 ListView 컴포넌트에서는 좀 더 자유로운 형식으로 배치할 수 있습니다.

예제 구현 방법

화면 구성하기

ListView 컴포넌트와 Radio 컴포넌트를 예제 화면과 같이 배치합니다. ListView 컴포넌트를 배치하기 전에 Div 컴포넌트를 배치하고 그 안에 ListView 컴포넌트를 배치합니다. Div 컴포넌트의 width, height 속성값은 320으로 지정하고 ListView 컴포넌트는 left, top, right, bottom 속성값을 지정해 Div 컴포넌트의 너비값을 변경할때 같이 너비값이 변경될 수 있도록 합니다. Dataset 오브젝트를 생성하고 아래와 같이 설정합니다. Dataset 오브젝트를 화면에서 드래그해서 ListView 컴포넌트에 바인딩합니다.

ListView Contents Editor 실행하기

Dataset 오브젝트의 값에 따라 컬럼 id, 컬럼 데이터를 ListView 컴포넌트의 셀로 자동 설정합니다. 하지만, 예제에서는 다른 식으로 화면을 구성할 것이기 때문에 Body 밴드 편집 모드로 전환하고 컬럼 id를 나타내는 셀은 삭제하고 나머지 2개의 컬럼 데이터를 표현하는 셀만 사용합니다.

앨범 제목을 표시하는 셀은 텍스트가 길어질 수 있어서 wordWrap 속성을 적용했습니다. 그리고 앨범 이미지 바로 옆에 위치할 수 있도록 PositionBase 속성을 적용합니다.

적용된 결과는 아래와 같습니다. 하나의 컬럼에 데이터를 표시합니다.

두 개의 컬럼에 데이터 표시하기

ListView 컴포넌트에서는 컬럼이라는 개념은 없습니다. ListView 컴포넌트의 너비와 Body 밴드의 너비에 따라 자동으로 하나의 Row에 몇 개의 데이터를 표시할지 결정합니다. 예를 들어 Body 밴드의 너비를 50%로 지정하면 2개의 데이터를 하나의 Row에 표시합니다.

ListView Contents Editor를 실행하고 default 포맷 항목 위에서 오른쪽 마우스 버튼을 클릭하고 [Copy & Add Format] 항목을 선택합니다. Format id는 "format00"으로 수정합니다.

Body 밴드를 선택하고 width 속성값을 50%로 수정합니다.

적용된 결과는 아래와 같습니다. 두 개의 컬럼에 데이터를 표시합니다. width 속성값을 30%로 설정하면 세 개의 컬럼에 데이터를 표시하게 됩니다.

이미지 위에 텍스트 표시하기

ListView Contents Editor를 실행하고 default 포맷 항목 위에서 오른쪽 마우스 버튼을 클릭하고 [Copy & Add Format] 항목을 선택합니다. Format id는 "format01"으로 수정합니다. Body 밴드 편집 모드로 들어가서 앨범 타이틀을 표시하던 셀의 위치를 앨범 커버를 표시하는 셀 위로 이동합니다.

width 속성값을 앨범 커버를 표시하는 셀과 같은 150으로 설정하고 background, color, opacity 속성값을 수정해줍니다.

적용된 결과는 아래와 같습니다. 앨범 타이틀 텍스트를 앨범 이미지 위에 살짝 투명한 배경을 가지고 표현합니다.

너비에 따라 formatid 다르게 적용하기

Radio 컴포넌트에서 div 컴포넌트의 너비값을 설정할 수 있도록 합니다. innerdataset 항목값으로 "180", "320", "640"을 설정하고 onitemchanged 이벤트 함수를 아래와 같이 작성합니다.

this.Radio00_onitemchanged = function(obj:nexacro.Radio,e:nexacro.ItemChangeEventInfo)
{
	this.Div00.set_width(e.postvalue);
	if(e.postvalue == 640)
	{
		this.Div00.form.ListView00.set_formatid("format00");
	}
	else if(e.postvalue == 180)
	{
		this.Div00.form.ListView00.set_formatid("format01");
	}
	else
	{
		this.Div00.form.ListView00.set_formatid("default");
	}
};

QuickView로 확인하기

QuickView(Ctrl + F6)로 실행한 후 너비 속성값에 따라 formatid가 변경되면서 데이터가 표현되는 형식이 바뀌는 것을 확인합니다.

버튼 클릭 이벤트 처리하기

ListView 컴포넌트에서 표시되는 각 항목은 셀로 처리됩니다. 이미지 버튼을 배치하고 클릭했을 때 원하는 동작을 어떻게 처리하는지 살펴봅니다.

예제

각 항목 아래 [-], [+] 버튼 클릭 시 숫자가 변경되며 오른쪽 Grid 컴포넌트에 합계 금액이 표시됩니다.

sample_listview_03.xfdl

예제에서 사용한 핵심 기능

cellid: ListView 컴포넌트의 EventInfo 오브젝트가 가지고 있는 속성 중 하나입니다. cellid는 bandid에 따라 같은 속성값을 가질 수 있습니다. 예를 들어 Body 밴드에 "Cell00"이라는 셀이 있어도 Detail 밴드에 "Cell00"이라는 셀이 있을 수 있습니다. 그렇기 때문에 Detail 밴드를 가지고 있는 경우에는 cellid와 bandid를 같이 확인해야 정확하게 어떤 셀에서 이벤트가 발생한 것인지 확인할 수 있습니다.

예제 구현 방법

화면 구성하기

ListView 컴포넌트와 Grid 컴포넌트를 예제 화면과 같이 배치합니다. Dataset 오브젝트를 생성하고 아래와 같이 설정합니다. Dataset 오브젝트를 화면에서 드래그해서 ListView 컴포넌트와 Grid 컴포넌트에 바인딩합니다.

ListView Contents Editor 실행하기

Dataset 오브젝트의 값에 따라 컬럼 id, 컬럼 데이터를 ListView 컴포넌트의 셀로 자동 설정합니다. 하지만, 예제에서는 다른 식으로 화면을 구성할 것이기 때문에 Body 밴드 편집 모드로 전환하고 컬럼 id를 나타내는 셀은 삭제하고 나머지 4개의 컬럼 데이터를 표현하는 셀만 사용합니다.

4개의 컬럼 데이터 외에 버튼 기능을 할 셀 2개를 추가합니다. displaytype 속성값은 "imagecontrol"으로 지정하고 text 속성값에 표시할 이미지 경로를 지정합니다. 예제에서는 테마에 있는 이미지를 사용했습니다. 해당 셀을 사용자가 클릭했을때 이벤트를 처리하기 위해서는 셀 id 값을 알아야 합니다. 셀을 선택하고 속성창에서 id 속성값을 확인하거나 수정할 수 있습니다.

oncellclick 이벤트 함수 작성하기

ListView 컴포넌트의 oncellclick 이벤트 함수를 작성합니다. 사용자가 [-] 또는 [+] 버튼 클릭 시 Dataset 오브젝트의 값을 업데이트합니다.

this.ListView00_oncellclick = function(obj:nexacro.ListView,e:nexacro.ListViewClickEventInfo)
{
		var cur_amount = this.Dataset00.getColumn(e.row, "amount");
		if(e.cellid == 'Cell04')
		{
			if(cur_amount != 0)
			{
				this.Dataset00.setColumn(e.row, "amount", --cur_amount);
			}
		}
		else if(e.cellid == 'Cell02')
		{
			this.Dataset00.setColumn(e.row, "amount", ++cur_amount);
		}
};

합계 표시하는 Grid 컴포넌트 설정하기

Grid 컴포넌트에 합계를 표시하는 방법은 아래 예제를 참고하세요.

영수증 계산하기

QuickView로 확인하기

QuickView(Ctrl + F6)로 실행한 후 버튼을 클릭해 장바구니에 담을 앨범 개수를 변경합니다. 변경된 값이 Grid 컴포넌트에 반영되는지 확인합니다.

body 밴드 영역 클릭 시 상세 데이터 표현하기

ListView 컴포넌트의 expandbartype 속성을 설정하지 않고 body, detail 영역 클릭 시 상세 데이터를 펼치거나 접을 수 있는 기능을 살펴봅니다.

기본, 상세 데이터 표현하기에서 사용한 예제를 일부 수정해 사용했습니다.

예제

앨범 정보를 표시합니다. body 영역을 클릭하면 해당 앨범 수록곡(상세 데이터)을 표시합니다. body 영역을 다시 클릭하거나 detail 영역을 클릭하면 상세 데이터 표시 영역을 감춥니다.

sample_listview_04.xfdl

예제에서 사용한 핵심 기능

getBandExpandStatus (17.0.0.1800 버전부터 지원): 특정 아이템의 Detail 밴드 표시 여부를 반환합니다. 아이템의 인덱스(Dataset 오브젝트의 rowposition)값을 지정하면 해당 Detail 밴드가 표시되고 있는지 여부를 반환합니다.

showDetailBand, hideDetailBand: Detail 밴드를 펼치거나 접을 때 사용하는 메소드입니다.

예제 구현 방법

ListView 컴포넌트를 화면에 배치합니다. ListView 컴포넌트의 width, height 속성값은 500으로 지정합니다.

Dataset 오브젝트를 생성하고 아래와 같이 설정합니다. Dataset 오브젝트를 화면에서 드래그해서 ListView 컴포넌트에 바인딩합니다.

수록곡 데이터가 포함되어 있어 위의 이미지에서는 전체 데이터를 다 보여주지 않습니다. 해당 샘플 코드를 참고하세요.

imagerc::Bob_Dylan_-_The_Freewheelin'_Bob_Dylan.jpg

ListView Contents Editor 실행하고 셀을 배치하고 필요한 속성값을 설정합니다.

Dataset 오브젝트의 값에 따라 컬럼 id, 컬럼 데이터를 ListView 컴포넌트의 셀로 자동 설정합니다. 하지만, 예제에서는 다른 식으로 화면을 구성할 것이기 때문에 Body 밴드 편집 모드로 전환하고 설정된 셀을 모두 삭제합니다. 그리고 height 속성값은 160으로 지정한 후 아래와 같이 3개의 셀을 배치합니다.

Detail 밴드 추가하고 필요한 속성값을 설정합니다.

ListView Contents Editor 창을 닫고 ListView 컴포넌트의 bandinitstatus 속성값을 "collapse"로 설정합니다.

ListView 컴포넌트의 oncellclick 이벤트 함수를 아래와 같이 추가합니다. body, detail 밴드 영역 클릭 시 해당 이벤트가 발생합니다. detail 밴드 영역이 펼쳐져 있는지 확인하고 상태에 따라 showDetailBand 또는 hideDetailBand 메소드를 실행합니다.

this.ListView00_oncellclick = function(obj:nexacro.ListView,e:nexacro.ListViewClickEventInfo)
{
	if(obj.getBandExpandStatus(e.row))
	{
		obj.hideDetailBand(e.row);
	}
	else
	{
		obj.showDetailBand(e.row);
	}
};

QuickView(Ctrl + F6)로 실행한 후 body 밴드 영역을 클릭해서 detail 밴드가 펼쳐지는지 확인합니다.