AutoBound Synchronization
mprk May 24, 2014 2:40 PMI 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>