ListBox 소개

ListBox는 여러 아이템 목록을 나열해 놓고 그중 하나 혹은 여러 개의 아이템을 선택 및 출력하기 위한 용도로 사용하는 컴포넌트입니다.

Combo와 유사하나 아이템 목록이 항상 열려있다는 점, 여러 아이템을 선택할 수 있다는 점이 다릅니다. 여러 개의 아이템을 선택할 때에는 Ctrl 키 또는 Shift 키를 누른 상태에서 아이템을 선택합니다.

아이템 목록이 ListBox에 표시할 수 있는 개수보다 많아지면 자동으로 스크롤바가 생깁니다. 가능하면 스크롤바가 생기지 않도록 ListBox 크기를 충분히 조절하는 것이 사용자가 아이템 목록을 보고 선택하기에 좋습니다.

사용 예

다음은 어느 웹 메일의 주소록 예시를 보여줍니다. 사용자는 화면에 나열된 주소 목록을 보며 메일을 보내려는 상대를 여럿 지정할 수 있습니다.

이렇게 나열된 목록을 보며 다수를 선택하는 기능이 필요한 경우에 ListBox는 매우 유용합니다.

ListBox 만들기

ListBox를 사용하려면 Dataset을 바인딩해 아이템 목록을 구성해야 합니다. 그래야 예제와 같이 아이템 목록이 나오며 사용자가 선택할 수 있는 환경이 만들어집니다.

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

Dataset으로 아이템 목록을 만들고 ListBox에 바인딩합니다.

1. 툴바에서 Dataset 을 선택한 후, 폼 위 적당한 공간에 클릭하여 Dataset을 생성합니다.

2. Invisible Objects 영역에 있는 Dataset00을 더블 클릭하여 Dataset 편집기를 실행합니다. 칼럼과 로우에 다음과 같이 입력하고 Dataset 편집기를 닫습니다.

3. Invisible Objects 영역에 있는 Dataset00을 폼에 배치한 ListBox 컴포넌트로 드래그 앤 드롭하여 메뉴에서 [Bind InnerDataset "Dataset00"]을 선택합니다.

4. Bind InnerDataset 창이 뜨면 codecolumn에 'CODE'를 datacolumn에 'DATA'를 입력 혹은 선택합니다. [OK] 버튼을 클릭하면 바인딩이 완료됩니다.

ListBox에 아이템 목록이 정상적으로 출력되는지 QuickView(Ctrl + F6)로 확인합니다.

다중선택

ListBox는 기본적으로 단일 선택 모드를 지원합니다. 다중 선택 모드를 사용하려면 ListBox의 multiselect 속성을 설정해야 합니다.

본 예제에서는 다중 선택이 가능한 ListBox를 만들고 선택한 아이템의 정보를 추출하는 방법에 대해 설명합니다.

예제

예제는 선택한 아이템의 정보를 추출하는 기능과 아이템을 모두 선택하는 두 가지 기능을 갖습니다.

• 선택한 아이템의 정보를 추출하는 기능: ListBox에서 아이템을 선택한 후 Selected record 버튼을 클릭하면 선택한 아이템의 로우 인덱스와 선택한 아이템의 개수가 TextArea 컴포넌트에 출력됩니다.

• 모든 아이템을 선택하는 기능: Select all 버튼을 클릭하면 ListBox의 모든 아이템이 선택됩니다.

sample_listbox_03.xfdl

예제에서 사용한 핵심 기능

multiselect

ListBox에서 여러 개의 아이템을 선택할 수 있게 설정하는 속성입니다.

getSelectedCount

ListBox에서 선택 상태인 아이템의 개수를 반환하는 메소드입니다.

getSelectedItems

ListBox에서 선택 상태인 아이템의 인덱스를 배열로 반환하는 메소드입니다. 배열의 인덱스 값은 자동으로 정렬됩니다.

getCount

ListBox에 표시되는 전체 아이템의 개수를 반환하는 메소드입니다. innerdataset 속성에 설정된 Dataset이 필터링되어 있다면 필터링된 결과만 아이템 개수에 포함하여 반환합니다.

setSelect

ListBox에서 특정 아이템의 선택 상태를 설정하는 메소드입니다.

예제 구현 방법

ListBox , Button 컴포넌트를 예제의 그림과 같이 적절히 배치합니다.

Dataset으로 아이템 목록을 만들고 ListBox에 바인딩합니다.

1. 툴바에서 Dataset 을 선택한 후, 폼 위 적당한 공간에 클릭하여 Dataset을 생성합니다.

2. Invisible Objects 영역에 있는 Dataset00을 더블 클릭하여 Dataset 편집기를 실행합니다. 칼럼과 로우에 다음과 같이 입력하고 Dataset 편집기를 닫습니다.

3. Invisible Objects 영역에 있는 Dataset00을 폼에 배치한 ListBox 컴포넌트로 드래그 앤 드롭하여 메뉴에서 [Bind InnerDataset "Dataset00"]을 선택합니다.

4. Bind InnerDataset 창이 뜨면 codecolumn에 'CODE'를 datacolumn에 'DATA'를 입력 혹은 선택합니다. [OK] 버튼을 클릭하면 바인딩이 완료됩니다.

ListBox의 multiselect 속성을 'true'로 설정합니다.

ListBox에서 선택된 레코드(아이템)와 개수를 구해서 TextArea 컴포넌트의 value 속성으로 설정합니다. Selected record 버튼의 onclick 이벤트 함수를 작성합니다.

this.Button00_onclick = function(obj:nexacro.Button,e:nexacro.ClickEventInfo)
{
	var sMsg  = "Selected record is\n";	
	var arrSelectedItems = this.ListBox00.getSelectedItems();
	
	for(var i=0;i<arrSelectedItems.length;i++)
	{
			sMsg += "- Row : "+ arrSelectedItems[i] +"\n";
	}

	sMsg += "\nNumber of selected record: " + this.ListBox00.getSelectedCount();	
	
	this.TextArea00.set_value(sMsg);
		
};

모든 아이템을 선택상태로 전환합니다. Select all 버튼의 onclick 이벤트 함수를 작성합니다.

this.Button01_onclick = function(obj:nexacro.Button,e:nexacro.ClickEventInfo)
{
	for(i=0;i<this.ListBox00.getCount();i++)
	{
		this.ListBox00.setSelect(i, true);
	}
};

QuickView(Ctrl + F6)로 실행한 후 ListBox의 아이템을 선택하고 버튼을 차례로 눌러 정확히 동작하는지 확인합니다.