Important Notice - Forums is archived
To simplify things and help our users to be more productive, we have archived the current forum and focus our efforts on helping developers on Stack Overflow. You can post new questions on Stack Overflow or join our Discord channel.

Vaadin lets you build secure, UX-first PWAs entirely in Java.
Free ebook & tutorial.
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
ERROR ON BROWSER WINDOW RESIZE
Please watch the attached screenshot for detailed information
At the begining everyhthing is fine, the buttons are next to the textbox, but as I resize the browserwindow the up and down buttons are messed up with the textfield ( see the pictures)
I am using:
-vaadin 6.5.0
- stepper 1.0.1
It seems to be a browser independent issue A have tested it in the following browsers:
- ff 3.6.13
- ie 8
- google chrome 9
- opera 11
- safari 4.0.5
And I got the same result....
What is wrong ?
And how can I solve this problem?
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
I'm experiencing a similar layout issue as described above, but in my case it doesn't seem to be related to a browser resize though.
I load my form in a separate window and notice the following behaviour:
1) If I don't specify an explicit width for the stepper field, the layout seems to be *almost* fine (see screenshot 1):
The stepper is nicely displayed at the end of the field as expected, but because I didn't specify an explicit width, the field itself is too wide for my data
2) If I do specify an explicit width for the stepper field (e.g. setWidth("50px") (see screenshot 2):
The up/down buttons are positioned at the correct location (according to the set width), but the field itself still has the same width,
which makes that the buttons appear in the middle of the field instead of at the end
And unfortunately I'm experiencing an even more annoying bug also. (Actually a critical bug in my opinion).
When I specify a minvalue for a stepper field in my forms, I always get a NullPointerException as soon as I try to load that form.
And the GUI displays the error message (red popup): "Internal error"
(Note: I can only get rid of that error message by closing my browser or by adding "?restartApplication" to my url):
19-jun-2011 21:09:10 com.vaadin.Application terminalError
SEVERE: Terminal error:
java.lang.NullPointerException
at com.vaadin.terminal.gwt.server.JsonPaintTarget.addAttribute(JsonPaintTarget.java:493)
at org.vaadin.risto.stepper.AbstractStepper.paintContent(AbstractStepper.java:39)
at com.vaadin.ui.AbstractComponent.paint(AbstractComponent.java:755)
at com.vaadin.ui.AbstractOrderedLayout.paintContent(AbstractOrderedLayout.java:171)
at com.vaadin.ui.AbstractComponent.paint(AbstractComponent.java:755)
at com.vaadin.ui.Form.paintContent(Form.java:207)
at com.vaadin.ui.AbstractComponent.paint(AbstractComponent.java:755)
at com.vaadin.ui.AbstractOrderedLayout.paintContent(AbstractOrderedLayout.java:171)
at com.vaadin.ui.AbstractComponent.paint(AbstractComponent.java:755)
at com.vaadin.ui.TabSheet.paintContent(TabSheet.java:404)
at com.vaadin.ui.AbstractComponent.paint(AbstractComponent.java:755)
at com.vaadin.ui.AbstractOrderedLayout.paintContent(AbstractOrderedLayout.java:171)
at com.vaadin.ui.AbstractComponent.paint(AbstractComponent.java:755)
at com.vaadin.ui.Panel.paintContent(Panel.java:255)
at com.vaadin.ui.Window.paintContent(Window.java:632)
at com.vaadin.ui.AbstractComponent.paint(AbstractComponent.java:755)
at com.vaadin.ui.Window.paintContent(Window.java:655)
at com.vaadin.ui.AbstractComponent.paint(AbstractComponent.java:755)
at com.vaadin.terminal.gwt.server.AbstractCommunicationManager.writeUidlResponce(AbstractCommunicationManager.java:954)
at com.vaadin.terminal.gwt.server.AbstractCommunicationManager.paintAfterVariableChanges(AbstractCommunicationManager.java:841)
at com.vaadin.terminal.gwt.server.AbstractCommunicationManager.doHandleUidlRequest(AbstractCommunicationManager.java:767)
at com.vaadin.terminal.gwt.server.CommunicationManager.handleUidlRequest(CommunicationManager.java:296)
at com.vaadin.terminal.gwt.server.AbstractApplicationServlet.service(AbstractApplicationServlet.java:501)
at javax.servlet.http.HttpServlet.service(HttpServlet.java:856)
at org.mortbay.jetty.servlet.ServletHolder.handle(ServletHolder.java:487)
at org.mortbay.jetty.servlet.ServletHandler.handle(ServletHandler.java:362)
at org.mortbay.jetty.security.SecurityHandler.handle(SecurityHandler.java:216)
at org.mortbay.jetty.servlet.SessionHandler.handle(SessionHandler.java:181)
at org.mortbay.jetty.handler.ContextHandler.handle(ContextHandler.java:729)
at org.mortbay.jetty.webapp.WebAppContext.handle(WebAppContext.java:405)
at org.mortbay.jetty.handler.HandlerList.handle(HandlerList.java:49)
at org.mortbay.jetty.handler.HandlerWrapper.handle(HandlerWrapper.java:152)
at org.mortbay.jetty.Server.handle(Server.java:324)
at org.mortbay.jetty.HttpConnection.handleRequest(HttpConnection.java:505)
at org.mortbay.jetty.HttpConnection$RequestHandler.content(HttpConnection.java:843)
at org.mortbay.jetty.HttpParser.parseNext(HttpParser.java:647)
at org.mortbay.jetty.HttpParser.parseAvailable(HttpParser.java:211)
at org.mortbay.jetty.HttpConnection.handle(HttpConnection.java:380)
at org.mortbay.jetty.bio.SocketConnector$Connection.run(SocketConnector.java:228)
at org.mortbay.jetty.security.SslSocketConnector$SslConnection.run(SslSocketConnector.java:635)
at org.mortbay.thread.BoundedThreadPool$PoolThread.run(BoundedThreadPool.java:450)
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.
hello :)
How can I modify the addons source code using eclipse?
- checkout the source code
- modify it
- create a new/modified jar
maybe its a lame question but I am totally confused after reading the development documentation
basicly I would like to implement a few additonal features:
- only numbers can be entered into the field
- can not enter higher values than max value
- can not enter lower values than min size
or at least the last correct/value is remembered so if there is a '42' in the field , and I enter 'aaaa' in the field then next if I press the up arrow then the last correct value (42) will be incremented and the fields value will be 43
To achieve this I think I should modify the clientside part of the component
Of course if you are interested I am willing to contribute my modifications :)
Peter
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?
I had some problems with the component:
-Min/max values are not working, if the user enters data manually
-If you use a bigger font the up and down buttons are on the top of the field and not in the center.
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
Hi,
A couple of things I noted, I was using multiple steppers and they were positioned one below each other down the page... the page was long enough that it required scrolling.
I noted the natural thing to do (for me) was scroll the page with the mouse wheel, however if the cursor happened to be in line with the steppers, the mouse wheel events would fire as they scrolled underneath the mouse cursor. Therefore, for this arrangement I would like to turn off mouse wheel support to avoid these accidental firings.
The other thing I noted that if the cursor was over the arrows, when I did want mouse wheel support, the mouse events were not being captured.
I am pretty new to Vaadin/GWT (and Java for that matter), but have given the changes a go.
I have added a mouseWheelEnabled property to AbstractStepper (and VAbstractStepper) and made the changes required. Also did a simple fix (copy and paste) to make the events occur for the buttons as well as the text control.
Everything seems to work OK.
Modified source attached in case you want to do anything with it.
Thanks for the control.
Regards
Colin
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
- immediate = true
- 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 ,
There is a slight layout issue in this add-on as shown in the image, in firefox some part seems to be cropped, but in chrome it seems to be fine in the sample app(theme=reindeer), but when I tried with runo theme it seems to be different again! Can you please help me to solve this layout issue so that it will look alike in different browsers !
Very cool.
Is it possible to add a symbol inside the component, between the number and the arrows?
Eg:
35,00 €
21 %
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.
Hi,
I'm using Floatstepper stepper for currency field (with € add after the field) but when i put more than 10000000 it change to exponential like 1.0E7
Could you tell me how to keep 10 000 000 style
Is there a way to have currency or any symbol inside the field?
Thanks a lot
Hi
Since I upgraded to Vaadin 7.4.0, there seems to be a dependency missing from Stepper - I was getting a NoClassDefFound for org.jsonJSONException
It is easily fixed by inlcuding a compile dependency of:
compile 'org.json:json:20141113'
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 ?