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

    AutoBound Synchronization

    mprk
    mprk May 24, 2014 2:40 PM

      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>