I have a basic login form that I'm trying to sync with a model using the AutoBound feature. I can place data in the  form, but it doesn't make it to the controls for authentication.

I'm assuming that Bound fields in the web component class link directly with ui:field annotated properties in the UI Binder web interface. I tried a few different properties on the web page side, and nothing seemed to fall into place.

I thought I looked at the documentation samples fairly carefully, but I'm not sure what to try next.

Class to pass credentials to a web service endpoint.

@Bindable
@Portable
public class Credentials {

  String username = "";
  String password = "";

  public Credentials(){

  }

  public Credentials(@MapsTo("username") String username,
            @MapsTo("password") String password ){
  this.username = username;
  this.password = password;
  }

  public void setUsername( String username ){
  this.username = username;
  }

  public String getUsername(){
  return username;
  }

  public void setPassword( String password ){
  this.password = password;
  }

  public String getPassword(){
  return password;
  }

}

The Login Component with AutoBound model class and Bound field properties that match ui:fields in the HTML page.

@Dependent
public class LoginPanel extends Composite {

  private static LoginPanelUiBinder uiBinder = GWT.create(LoginPanelUiBinder.class);

  interface LoginPanelUiBinder extends UiBinder<Widget, LoginPanel> {}

  @Inject
  TransitionTo<MapPage> loginApproved;

  @Inject @AutoBound
  DataBinder<Credentials> credentials;

  @Inject @Bound
  TextBox username;

  @Inject @Bound
  PasswordTextBox password;

  @Inject
  Button login;

  @Inject
  Label errorMessage;

  @Inject
  Caller<UserEndpoint> userService;

  /**
  *
  */
  public LoginPanel() {

       super();

       initWidget(uiBinder.createAndBindUi(this));

  }


  @UiHandler("login")
  public void onClick(ClickEvent event) {

       userService.call( new RemoteCallback<Boolean>() {


            @Override
            public void callback(Boolean authenticated) {

                 if ( authenticated.booleanValue() ){
                      loginApproved.go();
                 }

            }

       }).authenticate( credentials.getModel() );

  }

}

The finally the Login HTML form for the UI Binder.

<code>

<!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">

  <ui:style>

        .login {

  margin:0px auto

  }

    </ui:style>

  <g:HTMLPanel width="100%">

  <g:AbsolutePanel height="257px" styleName="{style.login}">

  <g:at left="107" top="10">

  <g:Image width="230px" height="106px" url="images/ima-logo.png"/>

  </g:at>

  <g:at left="84" top="127">

  <g:Label text="USER" width="95px" height="18px" horizontalAlignment="ALIGN_RIGHT"/>

  </g:at>

  <g:at left="84" top="157">

  <g:Label text="PASSWORD" width="95px" height="18px" horizontalAlignment="ALIGN_RIGHT"/>

  </g:at>

  <g:at left="185" top="152">

  <g:PasswordTextBox ui:field="password" width="163px" height="20px" tabIndex="2"/>

  </g:at>

  <g:at left="185" top="122">

  <g:TextBox ui:field="username" width="163px" height="20px" tabIndex="1"/>

  </g:at>

  <g:at left="194" top="202">

  <g:Button ui:field="login" width="62px" height="24px" tabIndex="3">LOGIN</g:Button>

  </g:at>

  <g:at left="21" top="232">

  <g:Label ui:field="errorMessage" text="" width="404px" height="20px" wordWrap="true"/>

  </g:at>

  </g:AbsolutePanel>

  </g:HTMLPanel>

</ui:UiBinder>

</code>