Given the browsers running on smartphones (and increasingly also those running on the desktop), all the “new” input types coming with HTML5 become increasingly important. For instance:
<input type=“time“ …
makes iPhone, Android et al present an optimized way of selecting a time / duration:
Users are right to expect a fast and efficient application – hence it certainly makes sense to use the HTML5 inputs in vaadin as well. When developing mobile applications, there is little to beat the native inputs. They do enrich the possibilities offered by vaadin TouchKit to quite some extent. Only they have to be made available.
In order to achieve that, and based on daily development experience, Akquinet provides an (Apache 2.0 licensed) Addon for vaadin covering these HTML5 inputs:
- color
- date
- datetime
- datetime-local
- month
- number
- range
- search
- tel
- time
- url
- week
Aside from the time field shown above, one can for instance create a range selection input. This is how it looks like on Chrome:
The following code creates this thing:
RangeField rangeField = new RangeField();
rangeField.setMin(2);
rangeField.setMax(10);
rangeField.setCaption(“Range between 2 and 10”);
layout.addComponent(rangeField);
Vaadin is empowered by a great community – and we’re happy to do a small (and hopefully effective) contribution with this Addon to enable HTML5 for vaadin.
Feel free to use this Addon! You find it on https://vaadin.com/directory#addon/html5-widgets-for-vaadin-core or on https://github.com/akquinet/vaadin-html5-widgets
We always appreciate suggestions and feedback!