In this post we'll have a look at how to get login form auto-complete working with GWT.
The browser login auto-complete feature saves your username and password (if you choose to) so that you don't have to type it every time you want to log in. Depending on how sensitive data your application is presenting, you might want to disable this feature altogether. For example, you would probably not want auto-complete enabled for a bank application, although I would probably switch bank if their user authentication model only consisted of username/password checks. For Teamscape, we will enable both auto-complete and a "Remember me" option like Gmail has. We will look into the Remember me feature later when we have enabled user authentication and sessions.
There are different ways to solve this, but I think what Thomas Broyer suggests here is the cleanest solution that integrates nicely with GWT. What we are going to do is to add an invisible div to our HTML file that contains our login form, and then we fetch the elements from the DOM by id in our LoginView.
<!-- In order for the browser auto-complete feature to work, --> <!-- we must define the login form in the original HTML markup --> <div id="loginDiv" style="display:none"> <form action="login" id="loginForm"> <table id="loginTable" valign="center"> <tr> <td id="loginLabel">Username:</td> <td><input id="loginUsername" name="u" style="margin-top:0px"></td> </tr> <tr> <td id="loginLabel">Password:</td> <td><input id="loginPassword" name="pw" type="password" style="margin:0px"></td> </tr> <tr> <td><button id="loginSubmit" type="submit">Login</button></td> <td id="loginRememberMe"></td> </tr> </table></form> </div>
I have used a table here to align the components, but you can use any style you want as long as the login form is defined correctly. We will probably use CSS here later to apply look and feel instead.
Now, let's have a look at our LoginView.
The code pretty much speaks for itself. The important thing is that we have defined a JSNI method that we set as the action for our form. The JSNI method then calls into our LoginView where we handle the login request by firing off a LoginRequestEvent. We can't do the normal "HasClickHandler" thing to handle the button click, and we might want to listen to login requests in more than one place.
That was it!