Using HTML5 inputs in vaadin

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:

html5iphone

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
  • email
  • 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:

range

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!

5 thoughts on “Using HTML5 inputs in vaadin

  1. Thanks for your feedback!
    The initial idea was not to make too many assumptions on the data – but anyway: my first approach would be either overwriting the component to have getValueAsTime() or to wrap into a custom field…
    Let us know 😉

  2. Hi Sebastian! The step attribute data type should be changed from Integer to Double or Float and if the value is not set, the attribute should not be rendered at all or rendered as step=”any”.

    https://www.w3.org/TR/html5/forms.html#the-step-attribute
    The step attribute, if specified, must either have a value that is a valid floating-point number that parses to a number that is greater than zero, or must have a value that is an ASCII case-insensitive match for the string “any”.

    Harri

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s