Using Spinner Component
Grace Lin, Engineer, Potix Corporation
June 27, 2008
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. |