Introducing Spin

Spin is the component used to receive numeric values within a certain range.

To enter a numeric value within a certain range, you can increase or decrease the value with the button. At this time, the unit in which the value is changed can be adjusted, so it is good to use when you need to increase or decrease the value only in a specific unit.

By defining the max, min properties, you can set the maximum and minimum values, and you can set the value that increases or decreases when you click once with the increment property. You can also set the type property to noneditable so that you can only control it with the button, which is used as a way to prevent the user from entering an incorrect value. If you set it to spinonly, then you can use only the spin up/down buttons without the edit window.

In addition to using the spin up/down buttons, the user can directly enter the value through the edit window, or use the ↑ or ↓ arrow keys on the keyboard to increase or decrease the value.

Example

The following is an order screen of a pizza site. Each menu is shown as a picture, and the Spin component is used as a way to input the quantity below it.

In general, input through the edit window should be processed as a complex script to prevent user mistakes. However, by using the Spin component, you can get the effect of preventing the user from entering incorrect values in advance.

Creating Spin

Select Spin from the toolbar, and drag it to an appropriate size on Form to create it. If you just click on the form, it will be created with the default size.

Run it with QuickView (Ctrl + F6).

You can increase or decrease the value from 0 to 10000 through the spin up/down buttons. The default value of the increment property is set to 1, so the value is changed in units of 1.

Using Spin

The Spin component can change the range, incremental unit, input method, and shape of the input value by setting properties.

Example

You can limit the range of the input value by using the max, min properties. The increment property can set the increment unit, and the type property can set the input method.

The following is an example of the Spin component with each property set.

sample_spin_02.xfdl

Core features used in the example

max

This is the property that sets the maximum value that the value property can have.

min

This is the property that sets the minimum value that the value property can have.

increment

This is the property that sets the unit to increase/decrease the value property value when the spin up/down button is clicked.

type

This is the property that sets the format in which the Spin component is displayed on the screen.

this.Spin00.set_type( "normal" );

displaycomma

This is the property that sets whether the number displayed in the edit window of Spin displays a comma every thousand units.

this.Spin00.set_displaycomma( true );

How to implement an example

Select Spin from the toolbar, and drag it to an appropriate size on Form to create it. If you just click on the form, then it will be created with the default size.

Select the Spin component and set each property in the Properties window as follows.

Run it with QuickView (Ctrl + F6).

Check that the edit window is disabled and the initial value is 0. Then, press the spin button to see if the value increases or decreases in 1000 units.