36.Spin

36.1Spin 소개

Spin은 일정 범위 내의 숫자 값을 입력받기 위해 사용하는 컴포넌트입니다.

그림 36-1sample_spin_01_01

일정 범위 내의 숫자값을 입력하기 위해 버튼으로 값을 증가시키거나 감소시킬 수 있습니다. 이때, 값이 변경되는 단위를 조정할 수 있어 특정 단위로만 값을 증감시켜야 하는 경우에 사용하기 좋습니다.

max, min 속성을 정의하면 최댓값과 최솟값을 설정할 수 있고 increment 속성으로 한번 클릭 시 증감되는 값을 설정할 수 있습니다. type 속성을 noneditable로 설정하여 버튼으로만 조작하게 할 수도 있는데 이는 사용자가 잘못된 값을 입력하는 것을 막는 방법으로 쓰입니다. 그리고 spinonly로 설정하면 편집창없이 스핀 업/다운 버튼만 사용할 수도 있습니다.

값의 입력은 스핀 업/다운 버튼을 사용하는 방법 이외에 사용자가 직접 편집창을 통해 입력할 수도 있고 키보드의 방향키인 ↑ 혹은 ↓로도 값을 증감시킬 수 있습니다.

36.1.1사용 예

다음은 어느 피자 사이트의 주문화면입니다. 각 메뉴가 사진으로 나와 있고 그 밑에 수량을 입력받는 방법으로 Spin 컴포넌트를 사용하고 있습니다.

일반적으로 편집창을 통한 입력은 사용자의 실수를 막기 위해 복잡한 스크립트로 처리해야 합니다. 그러나 Spin 컴포넌트를 사용함으로써 사용자가 잘못된 값을 입력하는 것을 사전에 방지하는 효과를 얻을 수 있습니다.

그림 36-2sample_spin_01_02

36.1.2Spin 만들기

그림 36-3sample_spin_01_01

1

Spin 컴포넌트 생성하기

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

2

QuickView로 확인하기

QuickView(Ctrl + F6)로 실행합니다.

스핀 업/다운 버튼을 통해 0~10000 범위까지 값을 증감시킬 수 있습니다. increment 속성의 기본값이 1로 설정되어 있어 값이 1 단위로 변경됩니다.

36.2Spin 사용하기

Spin 컴포넌트는 입력 값의 범위, 증감 단위, 입력 방법, 모양을 속성의 설정을 통해 변경할 수 있습니다.

36.2.1예제

max, min 속성을 사용하면 입력 값의 범위를 한정할 수 있고, increment 속성은 증감 단위를, type 속성은 입력 방법을 설정할 수 있습니다.

다음은 각 속성을 설정한 Spin 컴포넌트 예제입니다.

그림 36-4sample_spin_02_01

sample_spin_02.xfdl

36.2.2예제에서 사용한 핵심 기능

max 속성

value 속성이 가질 수 있는 최댓값을 설정하는 속성입니다.

min 속성

value 속성이 가질 수 있는 최솟값을 설정하는 속성입니다.

increment 속성

스핀 업/다운 버튼 클릭 시 value 속성값을 증가/감소시킬 단위를 설정하는 속성입니다.

type 속성

Spin 컴포넌트가 화면에 표시되는 형식을 설정하는 속성입니다.

enumType ::= 'normal' | 'noneeditable' | 'spinonly'

normal

(default) 편집 영역과 스핀 버튼이 있는 모양으로 표시됩니다. 편집 영역에서 값을 직접 입력할 수 있습니다.

noneditable

편집 영역과 스핀 버튼이 있는 모양으로 표시됩니다. 편집 영역은 읽기 전용으로 설정되어 값을 직접 입력할 수 없습니다.

spinonly

편집 영역 없이 스핀 업/다운 버튼만 있는 모양으로 표시됩니다.

this.Spin00.set_type( "normal" );
displaycomma 속성

Spin의 편집 창에서 보일 숫자가 천 단위마다 콤마를 표시할지 설정하는 속성입니다.

bDisplayComma ::= 'true' | 'false'

true

value 속성값이 1000 이상일 경우 천 단위마다 콤마를 표시합니다.

false

(default) 콤마를 표시하지 않습니다.

this.Spin00.set_displaycomma( true );

36.2.3예제 구현 방법

1

Spin 컴포넌트 생성하기

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

2

Spin 속성 설정하기

Spin 컴포넌트를 선택한 후 Properties 창에서 각 속성을 아래와 같이 설정합니다.

속성

max

100000000

min

-100000000

increment

1000

type

noneditable

displaycomma

true

value

0

3

QuickView로 확인하기

QuickView(Ctrl + F6)로 실행합니다.

편집창이 비활성화 돼 있고 초기값이 0으로 나오는지 확인합니다. 그리고 스핀 버튼을 눌러 값이 1000 단위로 증가 혹은 감소하는지 확인합니다.