Introduction

HTML5 has a few useful features that are supported by all modern browsers, and in particular the iPhone and iPad. This is the <input type=””> controls. For example HTML5 defines an input type ‘number’ which automatically constraints the input to be number and, with HTML5 aware devices, like Apple, will pop up the numeric keyboard automatically and not the text keyboard.

Creating the input control

The HTML5 input can be created by using an HTML control as a base, as in:

com.google.gwt.user.client.ui.HTML

 

To create a numeric control, simply do this in the constructor

String html = “<input type=’number’ min=’0’ max=’100’ value= ‘10’></input>”; this.setHtml(html);

 

Now this will display the correct control in the browser, however how do you get the control value afterwards?

Indirect Access To The Control Value

The HTML GWT control is simply a <div> wrapper. In order to access the real control you need to get the inner control. You can either do this simply as

Element elem = this.getElement(); elem = elem.getChild(0);

 

Or more correctly, you should not assume the first child is your element in the future and you can use the more inefficient approach below. I use the one above and will deal with the issue in the future, if needed.

NodeList<Element> elemts = elem.getElementsByTagName("input"); elemt = elemts.getItem(0);

 

Once you have the correct inner control reference, you can now access the value method using a JavaScript construct.

private final native String GetValue(JavaScriptObject elem) /*-{                                 return elem.value; }-*/;                 private final native String SetValue(JavaScriptObject elem, String value) /*-{                                 elem.value = value; }-*/;