Spin 소개

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

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

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

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

사용 예

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

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

Spin 만들기

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

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

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

Spin 사용하기

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

예제

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

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

sample_spin_02.xfdl

예제에서 사용한 핵심 기능

max

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

min

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

increment

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

type

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

this.Spin00.set_type( "normal" );

displaycomma

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

this.Spin00.set_displaycomma( true );

예제 구현 방법

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

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

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

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