Using Spinner Component

Author
Grace Lin, Engineer, Potix Corporation

Date
June 27, 2008

Version
Applicable to ZK-3.5.0-FL-2008-06-27 and later

Introduction

Although various types of input components are provided by ZK framework, such as textbox, intbox, datebox, timebox …etc, the spinner component is missed. Increment and decrement of spinner’s value occurs when clicking small arrow on the right of the spinner. And you can set the minimum and maximum to constraint user input. Let us look some example in the following.

Usage of Spinner Component

The following is the sample code to use the spinner component.

Sample 1: Basic Spinner

In this sample, we demonstrate a basic usage of spinner.

<?xml version="1.0" encoding="utf-8"?>

<window title="Basic Spinner" width="400px" border="normal">
	<spinner id="sp" />
</window>

In the browser, you can use it to assign an integer, and can click the up or down button to increase or decrease the number, even if you don't click but press down the button, it will step up automatically , like repeated click. You also can use up or down key to adjust the number. It only can accept integer like the intbox, and its range is from -2^31 to 2^31 – 1.

Sample 2: Spinner with Constraint

In this sample, we show how to set the minimum and maximum to spinner, you need to write them in attribute “constraint”, like the following code. We also set default value and step here.

<?xml version="1.0" encoding="utf-8"?>

<window title="Spinner with Constraint" width="400px" border="normal">
	<spinner id="sp" value="1" step="2" constraint="min -2 max 6" />
	<separator />
	<button label="show value">
	<attribute name="onClick">
	alert("The Number is "+sp.getValue());
	</attribute>
	</button>
</window>

You can put the button and get the value from spinner. When the value arrives at maximum, it can’t be increased anymore. The same as minimum, it can’t be decreased anymore. If user types a number out of range, he will get the wronging message.

Sample 3 : Hide the Control Buttons

In this sample, we demonstrate how to hide the buttons by setting the buttonVisibile to false. The code looks like this:

<?xml version="1.0" encoding="utf-8"?>

<window title="Hide Button" width="300px" border="normal">
	<spinner id="sp" buttonVisible="false" />
	<separator />
	<button label="show or hide">
	<attribute name="onClick">
	sp.buttonVisible= !sp.buttonVisible;
	</attribute>
	</button>
</window>

Spinner button’s visibility can be shifted by clicking the button.

Supported Key Strokes

Following key strokes are supported by spinner.

Key	Description
DEL	Clear the value in the spinner.
0~9	Input digital number.
Arrow key - left & right	Move text cursor to left or right.
Arrow key - up & down	Increase or decrease the value.

Supported Constraints

Beside of minimum and maximum, spinner component also support Intbox’s constraint, like “no negative”, "no zero" …etc. And any customized constraint can be assigned to examine user input.

Summary

We provide a spinner component which can set constraint to assign integer for user. This component will be integrated into ZK as a base component in the future. If you have any question, please feel free to leave comment here or post to ZK forum.

Copyright © Potix Corporation. This article is licensed under GNU Free Documentation License.