Tuesday, December 8, 2009

Spinning It Round And Round

Spinner is a component we have been postponing since before the 1.0 release of LWUIT, this delay has finally come to an end with the new release of the Spinner component into SVN joining the Tree/Table who are all major features for the 1.3 release.
The Spinner is mostly interesting because it is a composite component that mashes together a list and a text field to create a very unique input method that has some of both. It allows users to select from what is possibly a huge list (not infinite but still pretty huge), of numbers, dates or times. It allows users to type parts of the values or the entire values into the UI for fast searches within the list similar to the searchable list I recently blogged about.

The Spinner achieves such huge lists by creating its own ListModel and using a formula to calculate values on the fly, a renderer is used to display the list as a user would expect it to appear (date/time). The text field is painted in the appropriate location for the date/time input and its values are directly parsed into place.

The source code of the Spinner can be a great starting place to understand how to deeply manipulate such LWUIT components.

The video to the right was created with the four basic spinners. Notice that a spinner normally accepts min, max, current and step size values. For date these are in milliseconds since epoc and for time it it in seconds since midnight.
Form form = new Form("Spinners");
Spinner integerSpinner = Spinner.create(0, 1000, 100, 10);
Spinner decimalSpinner = Spinner.create(0.0, 100.0, 17.75, 0.05);
Spinner timeSpinner = Spinner.createTime(0, 24 * 60 * 60, 10 * 60 * 60, 60, true, false);
Spinner dateSpinner = Spinner.createDate(System.currentTimeMillis() - 1000 * DAY,
System.currentTimeMillis() + 1000 * DAY, System.currentTimeMillis(),
'-', Spinner.DATE_FORMAT_MM_DD_YYYY);

form.setLayout(new TableLayout(4, 2));
form.addComponent(new Label("Integer"));
form.addComponent(integerSpinner);
form.addComponent(new Label("Decimal"));
form.addComponent(decimalSpinner);
form.addComponent(new Label("Time"));
form.addComponent(timeSpinner);
form.addComponent(new Label("Date"));
form.addComponent(dateSpinner);
form.show();

10 comments:

  1. It is "editable". Watch the video where I type in using the keypad.

    ReplyDelete
  2. It looks like very nice. Can't wait to test it. I am wondering how does it behave in combination with touch screen input. Do I need to program spinning behavior by myself?

    ReplyDelete
  3. Hi Shai,
    just trying the DateSpinner component out and I've noticed that the far right of the box always seems to be slightly cut off.
    I see it's happens to the date field in your demo video too.
    Any suggestions on how to control the width better?
    Thanks,
    David

    ReplyDelete
  4. The Spinner date component does not work correctly on the BlackBerry port of LWUIT. Though on the Sun/Oracle J2ME simulators it works fine.

    e.g. If you enter date 01/01/01, you get 12/01/1.

    Please note that when creating the date component, I have set the min date to 100 years back, and the max date to tomorrow.

    ReplyDelete
  5. Hi Shai
    I am new to LWUIT
    can you tell me that what is the DAY in this example. I cant figure it out

    ReplyDelete
  6. DAY is the value of miliseconds from 1970 jan 1 without the last 000 numbers.

    ReplyDelete
  7. Hi Shai,

    I worked with time spinner and retrieved the long value for the selected time..but it returns a value which is 1 hour late long value.I deducted 60*60*1000 to get the correct value..Why does this happen?..Is there something i have missed?

    ReplyDelete
  8. i have tired this code but it doesnt return any value in date field????
    ny suggestions

    ReplyDelete
  9. error in DAY... Could you send me the project in netbeans eppydavidpaz@gmail.com

    ReplyDelete
  10. How can i get the selected value while spinning each time? i mean are there any listeners that i have to use ?
    manpreetsingh1310@gmail.com

    ReplyDelete