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.

       

      @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>