HTML 5 input types

General
1

Hi,

Is there a way to control how the HTML input types behave in Vaadin ? I am trying to improve the user experience on iPad

Here are a few things I am trying to accomplish that I have seen on other web sites:

  • email field: the ipad keyboard shows up with a dedicated layout
  • ID field: for instance the user id. I do not want the iPad dictionnary (it should be lower case and not trying to fix the words, etc)

Thanks

2

Hi,

TouchKit has EmailField and NumberField. We’ll add other HTML5 inputs as support for them extends.

ID field didn’t ring my bell. Don’t know what you mean with it.

cheers,
matti

3

Why would I need touchkit for that? It’s just a <input type=email">. A browser that does not support it will just ignore it, isn’t it? Or am I missing something? I don’t use touchkit right now. I am not sure I understand what would cost me since the same app is used both for regular browser and ipad now.

What I mean by ID field is a field where the iPad does not try to check the spelling (and does not put the keyboard in upper case for the first character. I have actually no idea how existing sites are dealing with this.

Thanks,
Stéphane

4

Hi,

Well, basically because there is no such a feature in the Vaadin core yet and I don’t remember seeing any other add-on which provides HTML5 fields. I’m sure that these will pop up at some point, it shouldn’t be too hard exercise. I think I have actually started one project but didn’t finish with it. We are commonly quite conservative with new features because we want to have wide browser support, so we haven’t rushed to add them to core.

Ok. So you mean autocorrect and autocapitalize properties (booleans). I should have added a generic Html5Field to TouchKit as well and use it as a super class for NumberField and EmailField. If you happen to start using TouchKit I think you could use the plain EmailField here. It sets both autocapitalize and autocorrect off, and I think it currently has no email validator so you can probably add values without @ character as well. That shall be the official hack until next version…

cheers,
matti

5

Thanks for the reply. What could we do to see that in the core? I understand being conservative with this but how about a property that would allow me to configure that feature? It’s not an ipad feature only actually, it uses HTML5 feature if you want by enabling the property …

I still don’t understand what would cost me to use touchkit since the same app is used both for regular browser and ipad now. Should I have a separate application with a separate URL for the iPad version, using touchkit?

6

A more general solution would be useful.

Something like Component.addAttribute(String attributeName, String value)

This would make it possible to use HTML 5 placeholder texts, lang attributes, disabling spellcheck, …
As well as not yet part of any spec feature which will come in the near future.

7

Instead of creating a new post, I reincarnate this one that asks my exact question.

Has this happened yet? I can’t find any info on it. It would be very useful to specify the input type together with the Touchkit Add-on.

8

In Vaadin 7, one could quite easily write an Extension for setting arbitrary HTML attributes for components. However, it would need some way of selecting the exact element you want to add the attribute to as it may not be the “root” element of the corresponding widget in all cases.

9

If you want, grab a quite simple solution from here:
https://github.com/sebastianrothbucher/vaadin-html5-widgets

10

Hi,

Looks excellent, gotta try this someday. Could you share that in
Directory
 at some point? Lots of Vaadin users will look add-ons primarly from there so you’ll get lot more audience via it.

cheers,
matti

11

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!

12

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…

13

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

14

Will this adon support Vaadin8?

15

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?

16

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?

17

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.

18

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.

19

Hi, just published a new version with a DoubleField component in it. Try it out and let me know how it works!

20

Thanks, I’ll look into Viritin