GWT uibinder autocorrect off

Question

im using GWT uibinder method and my html contains a textbox like

<ui:UiBinder xmlns:ui="urn:ui:com.google.gwt.uibinder"
     xmlns:g="urn:import:com.google.gwt.user.client.ui"
     xmlns:idmw="urn:import:com.testing.wid.impl">
    <g:HTMLPanel>
    <table align="center" valign="center" height="25%">
        <tr><td><g:TextBox ui:field='searchS' /></td></tr>

    </table>
    </g:HTMLPanel>

How can i TURN OFF autocorrect and autocapitalize for this Textbox?? i tried

  <g:TextBox ui:field='searchS' autocapitalize="off" autocorrect="off"/>

but i get

[ERROR] Class TextBox has no appropriate setAutocorrect()
method Element <g:TextBox autocapitalize='off' autocorrect='off' ui:field='searchS'> 

Any other way i can do this???

Thanks

Answer 1

What you've tried will not work since GWT doesn't translate UiBinder attributes directly into HTML element properties. Instead, as your error message hints, it looks up widget setter methods of the form set[UiBinder_attribute]. Since there is neither setAutocorrect nor setAutocapitalize method in the TextBox class, the errors you're getting are expected.

What you could do is drop to the element level and write something like this, e.g. in your widget's constructor:

   public MyWidget() {
      initWidget(uiBinder.createAndBindUi(this));
      searchS.getElement().setProperty("autocapitalize", "off");
      searchS.getElement().setProperty("autocorrect", "off");
   }

Answer 2

As already pointed by @Boris Brudnoy there is no built-in way to do it with TextBox. Takin futher his suggestion it will be nice to extract this into new custom component (to simplify reuse and support):

1. Add new package (for example com.app.shared.customcontrol)

2. Add new CustomTextBox:

   public class CustomTextBox extends TextBox {
   
       public void setAutocomplete(String value){
           this.getElement().setAttribute("autocomplete", value);
       }
   
       public void setAutocapitalize(String value){
           this.getElement().setAttribute("autocapitalize", value);
       }
   }
   

3. Declare new namespace using UI binder and use your component:

   <!DOCTYPE ui:UiBinder SYSTEM "http://dl.google.com/gwt/DTD/xhtml.ent">
   <ui:UiBinder xmlns:ui="urn:ui:com.google.gwt.uibinder"
       xmlns:g="urn:import:com.google.gwt.user.client.ui"
       xmlns:c="urn:import:com.app.shared.customcontrol">
   
       <g:HTMLPanel ...>
           <c:CustomTextBox ui:field="..." autocomplete="off" autocapitalize="off"  />
       </g:HTMLPanel>
   </ui:UiBinder>
   

As alternative way if you want apply these settings system wide you can do it via constructor:

public class CustomTextBox extends TextBox {

    public CustomTextBox() {
        this.getElement().setAttribute("autocomplete", "off");
        this.getElement().setAttribute("autocapitalize", "off");
    }

    ....
}