Stepper component

I made a new component, Stepper. It is a simple textfield that allows you to step through values by using the given up/down controls. It currently supports integer, float and date values. Check out the demo, and get the sources from here. There is also an 6.2 / Directory compatible jar in the SVN.

There are still some CSS bugs I'll fix if I have the time. The float version also uses rounding so it is a little imprecise, but it should be ok for most cases.

Good component - two things though:
I would certainly admire ability to set maximal and minimal value that could be set using the spinner - in most cases values like -1 are so absurd that we should not even for the moment let user think he/she can choose that value. That is what prevents us from using it in one of our projects right now.

Second suggestion is the placement of public elements like css/pictures. GWT compiler tends to put all that is found in "public" folders through the scope of application into one folder - you do not want any conflicts with files of other components - so you should have created a directory called "stepper" in "widgetset/public/" and put your public files there. Maybe not so crucial with your file naming but conventions are there for a reason.

Hi.

I just released version 1.0.1 of the Stepper component. It includes max/min values, and some other features I thought to be useful. Good point on the stepper public folder, I hadn't thought of that. That problem is also fixed. If you have any other comments / suggestions, please let me know.

Edit: Directory link

One little bug report:

The demo link in the directory point to a wrong place

I get an errorpage which says:

risto.virtuallypreinstalled.com
The requested host is not available at the moment

Thank you for your bug reports, I really appreciate them. And sincere apologies for the time it has taken to get these bugs fixed. This project has been dusting in the drawer, but now I intend to step up and get at least bugfixes done in a more timely manner.

There is a version 1.1 in the directory now, with a bunch of fixes and enhancements.

Somehow I missed your post about the bugfixes.
Now that I read it, I downloaded the new version right away and all bugs seems to be fixed indeed.

Many thanks for fixing it all at once !

Congratulations for yours excellent component. Could you change it to extends FocusableFlowPanel ?
(it´s necessary to navigate using enter key).

Thanks.

Helter Lopes: Could you change it to extends FocusableFlowPanel ?
(it´s necessary to navigate using enter key).

That's a great suggestion. I'll do that.

Hi, and sorry for the late reply!

Peter Olah: hello :)
How can I modify the addons source code using eclipse?

- checkout the source code
- modify it
- create a new/modified jar

That's about it. And like you said, your changes would definitely be on the client-side of the component. Check if VAbstractStepper has everything you need and subclass that, or subclass VIntStepper.

Patches are always welcome! :)

Would it be a relatively easy task to add tooltip text support for the Stepper component?

michel reuteler: -Min/max values are not working, if the user enters data manually

It seems to work as designed. It would be quite hard to prevent the user entering a number larger than the maximum number. Note however, that any values that exceed the given limits are not sent to the server. The component could provide some mechanism to show an error message when this happens. Although this can be achieved with a server side validator already.

michel reuteler: -If you use a bigger font the up and down buttons are on the top of the field and not in the center.

Seems like a bug. I'll look into it.

It seems to work as designed. It would be quite hard to prevent the user entering a number larger than the maximum number. Note however, that any values that exceed the given limits are not sent to the server. The component could provide some mechanism to show an error message when this happens. Although this can be achieved with a server side validator already.

If you would add a validator if you set the min and max and do not allow invalide datas

Or it would be great if you could give me the option like .manualInput(boolean isAllowed), so the user only can alter the value by clicking the arrows.

Risto Yrjänä: Note however, that any values that exceed the given limits are not sent to the server. The component could provide some mechanism to show an error message when this happens. Although this can be achieved with a server side validator already.

So how am I supposed to use this? If I want to set the min/max limits the server-side validation becomes useless since the invalid value is never even sent to the server. Currently the only way to get validation errors shown seems to be to not set the min/max limits but then the user can select anything even with the up/down buttons.

I would suggest such a functionality that allows the min/max limits to exist and be enforced with the up/down buttons, while still getting the invalid values sent to the server for validation.

- Tepi

C Fraser: ...
Modified source attached in case you want to do anything with it.
Thanks for the control.
Regards
Colin

This is just awesome. Thanks for the patch, I'll incorporate it in the next release. Added tasks for the problems listed https://github.com/ripla/Stepper/issues), will try to make a release this month.

Released 1.2, which should incorporate most (all?) the issues discussed here. If there are any more problems let me know.

I created a vaadin table where one of the columns have the intstepper control on it. On value change by way of clicking on the up or the down icon I get an exception message.
Also, vaadin code is using class loading mechanism that is not OSGI compliant and as a result add ons cannot be used without creating fragments. (see line in bold)

java.lang.IllegalArgumentException: The server RPC interface org.vaadin.risto.stepper.widgetset.client.StepperRpc could not be found
at com.vaadin.terminal.gwt.server.ServerRpcMethodInvocation.findClass(ServerRpcMethodInvocation.java:52)
at com.vaadin.terminal.gwt.server.ServerRpcMethodInvocation.(ServerRpcMethodInvocation.java:38)
at com.vaadin.terminal.gwt.server.AbstractCommunicationManager.parseServerRpcInvocation(AbstractCommunicationManager.java:1808)
at com.vaadin.terminal.gwt.server.AbstractCommunicationManager.parseInvocation(AbstractCommunicationManager.java:1772)
at com.vaadin.terminal.gwt.server.AbstractCommunicationManager.parseInvocations(AbstractCommunicationManager.java:1740)
at com.vaadin.terminal.gwt.server.AbstractCommunicationManager.handleBurst(AbstractCommunicationManager.java:1598)
at com.vaadin.terminal.gwt.server.AbstractCommunicationManager.handleVariables(AbstractCommunicationManager.java:1543)
at com.vaadin.terminal.gwt.server.AbstractCommunicationManager.handleUidlRequest(AbstractCommunicationManager.java:577)
at com.vaadin.terminal.gwt.server.AbstractApplicationServlet.service(AbstractApplicationServlet.java:461)
at com.vaadin.terminal.gwt.server.AbstractApplicationServlet.service(AbstractApplicationServlet.java:350)
at javax.servlet.http.HttpServlet.service(HttpServlet.java:722)
...

Caused by: java.lang.ClassNotFoundException: org.vaadin.risto.stepper.widgetset.client.StepperRpc
at org.eclipse.osgi.internal.loader.BundleLoader.findClassInternal(BundleLoader.java:506)
at org.eclipse.osgi.internal.loader.BundleLoader.findClass(BundleLoader.java:422)
at org.eclipse.osgi.internal.loader.BundleLoader.findClass(BundleLoader.java:410)
at org.eclipse.osgi.internal.baseadaptor.DefaultClassLoader.loadClass(DefaultClassLoader.java:107)
at java.lang.ClassLoader.loadClass(ClassLoader.java:247)
at java.lang.Class.forName0(Native Method)
at java.lang.Class.forName(Class.java:169)
at com.vaadin.terminal.gwt.server.ServerRpcMethodInvocation.findClass(ServerRpcMethodInvocation.java:45)
... 37 more

John Smith:
Also, vaadin code is using class loading mechanism that is not OSGI compliant and as a result add ons cannot be used without creating fragments. (see line in bold)

Caused by: java.lang.ClassNotFoundException: org.vaadin.risto.stepper.widgetset.client.StepperRpc
...
at java.lang.Class.forName(Class.java:169)
at com.vaadin.terminal.gwt.server.ServerRpcMethodInvocation.findClass(ServerRpcMethodInvocation.java:45)
... 37 more

Do you have suggestions on how to resolve this so that the mechanism works both with OSGi and in non-OSGi environments?

In any case, please create a ticket about the OSGi class loading issue (not just for this add-on but at least RPC in general).

Hi,

I am using a IntStepper and want to block the user to enter values more than 365. As per the below code user should not be able to manually enter any value more than the Max value(365) and less than the Min value(1), but it still allows values like 800 etc.

public Component getStepperValue()
{
IntStepper intStepper = new IntStepper();
intStepper.setValue(1);
intStepper.setStepAmount(1);
intStepper.setMaxValue(365);
intStepper.setManualInputAllowed(true);
intStepper.setInvalidValuesAllowed(false);
return intStepper;

}

I guess the intStepper.setInvalidValuesAllowed(false); is not working properly for me. Any suggestion, how to make this work?

Thnaks in advance.

Hi,

I am using a IntStepper and want to block the user to enter values more than 365. As per the below code user should not be able to manually enter any value more than the Max value(365) and less than the Min value(1), but it still allows values like 800 etc.

public Component getStepperValue()
{
IntStepper intStepper = new IntStepper();
intStepper.setValue(1);
intStepper.setStepAmount(1);
intStepper.setMaxValue(365);
intStepper.setManualInputAllowed(true);
intStepper.setInvalidValuesAllowed(false);
return intStepper;

}

I guess the intStepper.setInvalidValuesAllowed(false); is not working properly for me. I tried adding a server side validator to get the manually entered values and checking if that is > than the max value. But if the value goes > than the Max value, I am not able to get the manually entered value from getValue() .

Any suggestion, how to make this work?

Thanks in advance.

Smita Agarwal: Hi

Hi. Please don't double post.

Smita Agarwal: I am using a IntStepper and want to block the user to enter values more than 365. As per the below code user should not be able to manually enter any value more than the Max value(365) and less than the Min value(1), but it still allows values like 800 etc.

It seems that your code is correct. The problem is that Stepper isn't designed to stop the user from entering invalid values if they really want to. It only makes it very hard for the user to enter an invalid value, and prevents value change from firing on invalid values. So with the default settings, if you only set the max value to 5 on an IntStepper, the server side will never fire events on values higher than five. You could also set allowManualInput to false, to prevent the user from typing anything.

If you want show validation errors etc. then set the allowInvalidValues flag to true. That way the server will receive the invalid values and you can validate them yourself.

Hi Risto,

Thanks for the Reply.

As you said - "If you want show validation errors etc. then set the allowInvalidValues flag to true. That way the server will receive the invalid values and you can validate them yourself." , my second post was actually trying to explain that issue.

So as per your suggestion, I made the allowInvalidValues flag to true and tried retrieving the manually entered value using - intStepper.getValue(); and then processing this object myself using a intStepper.validate();. But to my surprise the intStepper.getValue doesn't set the value of the entered value if the value is > than the MaxValue.

For Example: If the maxvalue was set to 365 using - intStepper.setMaxValue(365) and the user manually enters: 85, the intStpper.getValue returns the Object value as: 85, but at the same time if the user enter 368(i.e which is more than 365) , the intStpper.getValue doesnt gives: 368, instead gives the last clicked value like 1 or 2 etc.

Please suggest.

Thanks,
Smita.

Hi Risto,

Can you please reply to my above question?

Thanks in advance.

Smita Agarwal: Hi Risto,

Thanks for the Reply.

As you said - "If you want show validation errors etc. then set the allowInvalidValues flag to true. That way the server will receive the invalid values and you can validate them yourself." , my second post was actually trying to explain that issue.

So as per your suggestion, I made the allowInvalidValues flag to true and tried retrieving the manually entered value using - intStepper.getValue(); and then processing this object myself using a intStepper.validate();. But to my surprise the intStepper.getValue doesn't set the value of the entered value if the value is > than the MaxValue.

For Example: If the maxvalue was set to 365 using - intStepper.setMaxValue(365) and the user manually enters: 85, the intStpper.getValue returns the Object value as: 85, but at the same time if the user enter 368(i.e which is more than 365) , the intStpper.getValue doesnt gives: 368, instead gives the last clicked value like 1 or 2 etc.

Please suggest.

Thanks,
Smita.

Can you check the demo code on GitHub and see if your code differs from that? Because the demo seems to work ok. I guess the main points are

1. immediate = true
2. allowInvalidValues = true

Hello Risto,

Thanks for the IntStepper - it almost does exactly what we want! There is one thing that is not working as we'd like and I wondered if there is a way of making it work for us?

We have some mandatory fields for which we do not want to set default values (so that the user is forced to enter something). Therefore we start off with blank (null). However the arrows do not work until the text box contains something. Is it possible to have the up & down arrows set a value (either 0 or 1 & -1 respectively) if clicked when the text box is blank?

Cheers,

Paul

sygma ec: Hello Risto,

Thanks for the IntStepper - it almost does exactly what we want! There is one thing that is not working as we'd like and I wondered if there is a way of making it work for us?

We have some mandatory fields for which we do not want to set default values (so that the user is forced to enter something). Therefore we start off with blank (null). However the arrows do not work until the text box contains something. Is it possible to have the up & down arrows set a value (either 0 or 1 & -1 respectively) if clicked when the text box is blank?

Cheers,

Paul

Would a nullRepresentation (like the one in Vaadin TextField) suit your needs? If so, please create a ticket to GitHub issues. Thanks!

Risto Yrjänä: Would a nullRepresentation (like the one in Vaadin TextField) suit your needs? If so, please create a ticket to GitHub issues. Thanks!

Unless I misunderstood something I do not think that the nullRepresentation would give us what we wanted, because as far as I can see this would mean pre-populating the field with a value. Ideally we want the following behaviour:
1. Field starts blank, if user does nothing and tries to continue they see a missing mandatory field error
2. If user types value in text box or user clicks a button then the field contains a value and the user is able to continue

Currently we have to choice of pre-populating with a value in order to allow the user to click a button (but then the user is able to continue without doing anything) or leaving the field blank, in which case the buttons do not work. We have chosen to pre-populate with 0 and hope that the users don't just click "continue" without checking that the data is correct.

hi, i like the Stepper add on, but i have some trouble using it, maybe you can provide some help?

(EDIT: i just found the Github Issues for stepper, so i posted both new issues there, feel free to ignore this post here).

when using Stepper-2.1.

a) As soon as my self compiled widgetset contains the stepper add on, my vaadin application no longer loads in internet explorer (10). the relevant error as seen in the IE dev console is ".../VAADIN/widgetsets/....Widgetset/undefined.cache.js GET 404", that means, it tries to fetch an "undefined" cache.js, which of course is unavailable. Changing the 'user agent" setting for my widgetset to include ie10 did not help, and the error disappears as soon as i remove stepper from the class path.

b) invalid values: I use the stepper with server side validation, i.e. i allow invalid values, check those on the server, and correct them to be inside the valid range. i.e. range=5..250 , user enters 2 (or "abc" or any other invalid value), i correct it on the server side by setValue(5). the 5 is then correctly transmitted to the browser and displayed. However, when the user then enters an invalid value again, and the server side corrects it again to "5". this second time the corrects is not displays (i assume some caching prevents me from setting the same value (here: 5) twice.

thank you for reading it any help you might provide.

cheers, Walter

Hi,
I have same problem as Walter.
Stepper OK with Mozilla, but not compatible with ie10.
The 404 error on undefined.cache.js is even raised at login time in my application due to the widgetset incompatibility.
Is a new version of the Stepper component planned or is it already dead?
Kind Regards

Hello. I have a problem with setValue() method: after i change value with arrows, setValue method changes value on server, but in UI there is still old value.

On my server I get
com.vaadin.server.ServiceException: java.lang.UnsupportedClassVersionError: org/vaadin/risto/stepper/FloatStepper : Unsupported major.minor version 51.0 (unable to load class org.vaadin.risto.stepper.FloatStepper)

Does stepper not support java 7 any more ? It runs fine locally with java 8.

Hello Risto,
I got this error when i try to use Stepper Addon v2.2.2 (i'm working on vaadin 7.4.5).

"widgetset 'com.vaadin.defaultwidgetset' does not contain implementation for org.vaadin.risto.stepper.FloatStepper."

Steps followed during installation :
 - stepper-2.2.2.jar to WEB-INF/lib
 - Compile widgetset

Any suggestions please ?