1 Reply Latest reply on May 24, 2014 6:09 PM by Matt Parker

    AutoBound Synchronization

    Matt Parker Newbie

      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.


      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.


      public class LoginPanel extends Composite {
        private static LoginPanelUiBinder uiBinder = GWT.create(LoginPanelUiBinder.class);
        interface LoginPanelUiBinder extends UiBinder<Widget, LoginPanel> {}
        TransitionTo<MapPage> loginApproved;
        @Inject @AutoBound
        DataBinder<Credentials> credentials;
        @Inject @Bound
        TextBox username;
        @Inject @Bound
        PasswordTextBox password;
        Button login;
        Label errorMessage;
        Caller<UserEndpoint> userService;
        public LoginPanel() {
        public void onClick(ClickEvent event) {
             userService.call( new RemoteCallback<Boolean>() {
                  public void callback(Boolean authenticated) {
                       if ( authenticated.booleanValue() ){
             }).authenticate( credentials.getModel() );


      The finally the Login HTML form for the UI Binder.




      <!DOCTYPE ui:UiBinder SYSTEM "http://dl.google.com/gwt/DTD/xhtml.ent">

      <ui:UiBinder xmlns:ui="urn:ui:com.google.gwt.uibinder"



              .login {

        margin:0px auto



        <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 left="84" top="127">

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


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

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


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

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


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

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


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

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


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

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