Hi Matti, thanks for your suggestion; I did just that: https://vaadin.com/directory#addon/html5-widgets-for-vaadin-core
Have fun with it, everyone - and off course feel free to come up with feedback and suggestions!
Bora, thanks you like it! So far, I don’t have plans to upgrade it; esp. because the JavaScript extensions became so popular. I didn’t checkout Viltrin myself in depth - but a short glimpse into it looks promising (and like a solution for HTML5, too). Anyways: let us know whether Viltrin is a valid path for you and where improvement is still needed…
Bora, see
Viritin
add-on. It contains some of the HTML5 fields and contains helpers how you can adjust the properties programmatically.
Which fields would be most relevant for you?
cheers,
matti
Will this adon support Vaadin8?
Hi Matti, Number input is the most urgent field. We had started with TouchKit addon a year ago but had a lot of problems with css and valo theme. We stopped using it when Vaadin announced EOL for Touchkit. We miss the native fields of touchkit…
I’ll check out Viritin. But shouldn’t this be part of Vaadin Core?
Does Viritin have number input field with decimal values, double values? There is “IntegerField” on Viritin’s “Improved input fields”. Can this field handle fields with double values?
I’m a bit lost on this. I need the numeric keyboard on mobile devices and set a mask or pattern (for non integer values like 1.25) to the text field. I tried the addons on Directory non of them work properly on mobile devices.
To sum up, I need a field which can also take decimal values, which rejects text values and opens numeric keyboard on mobile devices.
I will be grateful to ideas, suggestions.
the point is that as far as the “old” add-on goes, it does little more than setting the type-attribute of a default input (away from text to e.g. number) + set a couple of additional attributes. As I understood Matti, this is what Viltrin can also do (or custom JS) - though I didn’t try any of it yet. I don’t know when I’d have substantial time to look into it - tough Viltrin would be my start to do so… Long story short: be encouraged to check out Viltrin.
Hi, just published a new version with a DoubleField component in it. Try it out and let me know how it works!
Thanks, I’ll look into Viritin
Thanks Matti. DoubleField was just the thing I needed. Safari on IOS works great. You can’t type illegal double values with it. But on anroid and desktop browsers (Chrome and Firefox) I am able to type invalid double values like 54,44 or 343,54,54,54.
Forgive my ignorance, Is this behaviour from the browsers and unavoidable or can anything be done from Vaadin side?
Thanks again
Hi,
There sure might be a change to fill in some illegal characters in some cases, but the actual value will then become null.
Can you let me know what OS/device you tried? I tested the thing in Mac and Win7 with all major browsers and I couldn’t fill in multiple decimal separators. The JS hook should prevent those.
cheers,
matti
Just tested with a colleagues Android, with that it seems it is possible to add multiple dots. The JS hook probably don’t work there so I don’t know what else we could do there. With server side validator you can naturally give a helpful error message.
Ok Matti, thanks again for the DoubleField.
I use a line of Javascript as work-around: https://gist.github.com/vonloxley/702ebe0a559d09d04fef7b03ac6b9966
Input event is but less optimal as the character might flicker on the screen, but additional input event listener based validation might be a good addition to better support Android Chrome. It’d be great if somebody with an Android device would contribute something for Viritin 
I was unaware of this method with JavaScript.eval. Thanks. I’ll look into it.
Yes, the input type should definitely be “number”, that’s what Viritin number fields to as well, but that don’t prevent users to type in basic characters on most platforms. On desktop it does nothing (or adds small +/- buttons), on touch devices it selects number keyboard.
The relevant part is: “idHNR.type = ‘number’;”. The input-listener is an optimization for Firefox (LTS), which tends to allow chars in number-fields.