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
It seems to be a browser independent issue A have tested it in the following browsers:
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:
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
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.
That’s a great suggestion. I’ll do that.
hello 
How can I modify the addons source code using eclipse?
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:
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!
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.
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.
Seems like a bug. I’ll look into it.
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.
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.
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
12117.zip (21.4 KB)
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.