CheckBox 소개

CheckBox는 선택과 해제라는 두 가지 상태값을 보여주고 설정하기 위한 컴포넌트입니다. CheckBox는 선택 상태를 표시하는 작은 사각형 아이콘과 텍스트로 구성되는데 사용자가 체크박스를 선택하면 작은 사각형 아이콘에 v로 체크 표시가 되고 다시 한 번 더 선택하면 체크 표시가 없어집니다.

CheckBox는 그리드에서 사용이 가능합니다. 그리드 셀의 displaytype, edittype 속성을 체크박스로 설정하면 설정한 컬럼은 체크박스로 동작합니다. 그리드에서는 체크박스를 어떤 작업을 하기 위해 로우를 선택하는 용도로 많이 사용합니다.

CheckBox는 Dataset을 바인딩해 사용할 수 있습니다. 바인딩된 컬럼의 값이 true 혹은 1이면 v로 체크 표시되고, 값이 존재하지 않거나 false 혹은 0이면 체크가 해제됩니다.

CheckBox의 상태 값으로 사용하는 true(혹은 1) 값과 fasle(혹은 0) 값은 다른 값으로 변경할 수 있습니다. 상태 값을 변경하려면 truevalue, falsevalue 속성을 사용하는데 예를 들어, truevalue 속성에 male을, falsevalue 속성에 female을 설정했을 때 바인딩된 컬럼의 값이 male이면 체크 상태로, female이면 체크 해제 상태로 표시됩니다.

사용 예

아래는 구글의 광고 설정 관리 화면입니다. 사용자는 주제별로 분류된 광고 중에 받아 보고 싶은 광고만을 선택하여 받을 수 있습니다. 여기서 사용자 선택에 대한 표시나 입력을 받을 때 체크박스를 사용하고 있음을 알 수 있습니다.

CheckBox 만들기

툴바에서 CheckBox 를 선택한 후, Form 위에 적당한 크기로 드래그하여 생성합니다. 그냥 폼에 대고 클릭하면 기본 크기로 생성됩니다.

QuickView(Ctrl + F6)로 실행합니다. CheckBox 컴포넌트가 표현할 어떤 값도 설정되어 있지 않으므로 사각형 아이콘은 빈 박스로 표시됩니다.

TRUE, FALSE 값 변경하기

CheckBox의 상태를 결정하는 값은 true(혹은 1)와 false(혹은 0)입니다. 그러나 설정에 따라 다른 값을 사용할 수도 있습니다. 예를 들면, yes, no 혹은 male, female과 같은 문자열이나 Y, N 같은 문자를 체크값으로 사용할 수 있습니다.

CheckBox에서 체크 설정값을 변경할 수 있도록 truevalue와 falsevalue 속성을 제공합니다. truevalue 속성에는 체크 설정값을, falsevalue 속성에는 체크 해제 값을 설정합니다. 설정값은 문자열 형식이며 대, 소문자를 구별합니다.

예제

다음은 기본적으로 사용하는 true, false 값이 아닌 Yes, No를 적용한 CheckBox 예제입니다. 동작은 동일하나 체크 값으로 Yes, No를 사용하고 있습니다. 체크 값이 변경될 때 체크박스 아래 Edit 컴포넌트에 변경된 값을 보여줍니다.

CheckBox에서 사용하는 체크 값을 변경하려면 truevalue, falsevalue 속성을 설정합니다.

sample_checkbox_02.xfdl

예제에서 사용한 핵심 기능

truevalue

체크박스에서 체크를 설정하는 데 사용할 값을 문자열로 설정하는 속성입니다. 속성에 아무 값도 설정하지 않으면 "true" 또는 "1"값이 사용됩니다.

falsevalue

체크박스에서 체크 설정을 해제하는데 사용할 값을 문자열로 설정하는 속성입니다. 속성에 아무 값도 설정하지 않으면 "false" 또는 "0"값이 사용됩니다.

예제 구현 방법

툴바에서 CheckBox 컴포넌트와 Edit 컴포넌트를 예제의 그림과 같이 적절히 배치합니다. 컴포넌트를 선택하고 그냥 폼에 대고 클릭하면 기본 크기로 생성됩니다.

CheckBox에 바인딩할 값을 갖는 Dataset을 생성하고 바인딩합니다.

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

2. Dataset Editor를 열어 다음과 같이 입력합니다.

3. Invisible Object 영역에 있는 Dataset을 Form에 있는 CheckBox 컴포넌트와 Edit 컴포넌트로 드래그앤드롭시키면 Bind Item 창이 뜨는데 다음과 같이 바인딩합니다.

QuickView(Ctrl + F6)로 실행합니다. 바인딩된 컬럼의 값이 "Yes"로 설정되어 있으므로 사각형 아이콘은 체크 상태로 표시됨을 확인합니다.

체크 여부 확인하기

truevalue와 falsevalue 속성을 지정한 경우에는 value 속성값만 봐서는 체크된 상태인지 여부를 확인하기어려울 수 있습니다. 이런 경우에는 isChecked 메소드를 사용해 체크 여부를 확인할 수 있습니다.

예제

Grid 컴포넌트에서 값을 선택하면 해당하는 값이 CheckBox 컴포넌트에 반영됩니다. CheckBox02 에는 truevalue 속성값을 "A", falsevalue 속성값을 "B"로 설정했습니다.

sample_checkbox_03.xfdl

예제에서 사용한 핵심 기능

isChecked

체크 상태를 반환합니다. truevalue와 falsevalue 속성이 적용된 경우에는 해당 속성값을 반영해서 상태를 반환합니다.

onbindingvaluechanged

Dataset 오브젝트의 상태가 변경되면서 바인딩된 컴포넌트의 속성값이 변경되는 경우 발생합니다. 바인딩된 컴포넌트의 속성값이 모두 변경된 후에 처리되기 때문에 마지막 값을 확인하거나 변경된 속성으로 인해 레이아웃이 변경된 경우 등에 사용합니다.

예제 구현 방법

마지막 컴포넌트(CheckBox02)의 truevalue, falsevalue 속성값을 "B", "A"로 설정합니다.

Grid 컴포넌트에서 특정 Row를 선택하면 Dataset 오브젝트의 상태가 변경되고 바인딩된 컴포넌트에 전파됩니다. 바인딩된 컴포넌트의 속성값이 모두 반영되면 onbindingvaluechanged 이벤트가 발생합니다.

this.sample_checkbox_03_onbindingvaluechanged = function(obj:nexacro.Form,e:nexacro.BindingValueChangedEventInfo)
{
	this.TextArea00.set_value("CheckBox00: "+this.CheckBox00.isChecked()+" / "+this.CheckBox00.value);
	this.TextArea00.insertText("\nCheckBox01: "+this.CheckBox01.isChecked()+" / "+this.CheckBox01.value);
	this.TextArea00.insertText("\nCheckBox02: "+this.CheckBox02.isChecked()+" / "+this.CheckBox02.value);
};