GWT and UIBinder Password Asteriser/Fader

This tutorial shows how to fade the password into asterisks when the user mouses out of the password field. Instead of using a password input type, we would use a text input type with the asterisation/deasterisation performed algorithmically on Mouseout and Mouseover events.

Some user authentication techniques has a [Show Password] checkbox, which when checked would show the password you are keying in rather than hiding it. After you have keyed in your password and visually verified its correctness, if you are really diligent, you might uncheck it to asterise it (turn it back into a string of asterisks/stars).

However, isn't it better if the password field asterises itself when the user moves focus away from the password field. Here is how you could do it, using GWT.

If you don't want to use GWT, you could translate the asteriser routine documented here into javascript.

The tutorial is found at Google code svn
http://code.google.com/p/synthfuljava/source/browse/#svn/apps/UIBGreet
under the namespace
com.blessedgeek.gwt.examples.pwfade.

---

The UIBinder pwfade.ui.xml

<!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"
  xmlns:z="urn:import:com.blessedgeek.gwt.examples.pwfade.client"
  >
  <g:VerticalPanel horizontalAlignment="ALIGN_RIGHT" ui:field="allFields">
    <g:Label>Enter Name and Password, then click [Log in]</g:Label>
    <z:PasswordAsteriser.UIGrid
     columnCount='2' rowCount='3'>
      <g:Label>Name</g:Label>
      <g:TextBox ui:field="name" width="15em"/>
      <g:Label>Password</g:Label>
      <g:TextBox ui:field="password" width="15em"/>
      <g:Button ui:field="logIn" text="Log in"/>
    </z:PasswordAsteriser.UIGrid>
  </g:VerticalPanel>
</ui:UiBinder> 

---

The UIBinder bean as well as the module entry point

public class PasswordAsteriser
  implements EntryPoint
{

  private static PasswordAsteriserUiBinder uiBinder =
    GWT.create(PasswordAsteriserUiBinder.class);

  interface PasswordAsteriserUiBinder
    extends UiBinder<Widget, PasswordAsteriser>
  {}

  @UiField
  VerticalPanel allFields;
  @UiField
  TextBox name, password;

  private String passwordString;

---

Here is where the asterising/deasterising action is

//on Mouseout asterise the field and deasterise on Mouseover
  @UiHandler ("password")
  public void asteriseOnMouseOut(MouseOutEvent event){
    this.passwordString = password.getText();
    String masked = "*****";
    for(int i=5; i<this.passwordString.length(); i++)
      masked += '*';
    password.setText(masked);
  }
  @UiHandler ("password")
  public void deasteriseOnMouseOver(MouseOverEvent event){
    password.setText(this.passwordString);
  }

  @UiHandler("logIn")
  void onClick(
    ClickEvent e){
    Window.alert("Name:"+name.getText() + "\nPassword:" + this.passwordString);
  }

  @Override
  public void onModuleLoad(){
    uiBinder.createAndBindUi(this);
    RootPanel.get("allFields").add(allFields);  
  }

---

Unfortunately, UIBinder is not too mature currently to have a well provisioned layout policy. You have to extend Grid class to provide add(Widget) method for the benefit of the ui.xml.

Here, UIGrid extends Grid. Note that the constructor for UIGrid is annotated with @UiConstructor so that the arguments rowCount and columnCount are associated with UIGrid's ui xml attributes of the same name rowCount and columnCount.

  static public class UIGrid
    extends Grid
  {
    public @UiConstructor UIGrid(
      int rowCount,
      int columnCount)
    {
      this.resize(rowCount, columnCount);
    }
    public void setRowCount(int n){
      this.numRows = n;
    }
    public void setColumnCount(int n){
      this.numColumns = n;
    }
    public void add(Widget w){
      int row = this.count/this.numColumns;
      int col = this.count - row*this.numColumns ;
      this.count++;
      if (this.numRows<row)
        this.setRowCount(row);
      this.setWidget(row, col, w);
    }

    public void add(String t){
      int row = this.count/this.numColumns;
      int col = this.count - row*this.numColumns;
      this.count++;
      this.setText(row, col, t);
    }
    protected int count=0;
  }
}

The layout classes in UIBinder (like Grid and Flextable) should also be further enhanced to work directly with the ui.xml and not require us having to create extension classes. The very idea of using UIBinder is to reduce coding not increase it.

---

Here is the GWT launching html.

<html>
  <head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <link type="text/css" rel="stylesheet" href="pwfade.css">
    <title>Password Asteriser Example</title>
    <script type="text/javascript" language="javascript" src="pwfade.nocache.js"></script>
  </head>
  <body>
    <h1>Password Asteriser Example</h1>
    <center>
    <div id="allFields"/>
    </center>
  </body>
</html>