Sunday, February 14, 2010

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>

10 comments:

  1. Thank You of your good example code

    ReplyDelete
  2. Ce sac cartable Michael Kors est si universel qu'il pourrait plaire à tout le monde. Dans cet article, je vais essayer de passer en revue les caractéristiques principales et les éléments qui distinguent ce sac à main des autres.

    tags:Bolsos Michael Kors Rebajas,Bolsos Michael Kors Baratos,Bolsos Michael Kors El Corte Ingles

    L’extérieur de ce fourre-tout Michael Kors est un cuir métallisé de laiton froncé et froncé. Si vous connaissez les sacs à main Michael Kors, vous savez que ce cuir sera doux et souple. Les deux grandes poignées supérieures sont attachées au sac avec quelques centimètres de chaînes dorées, puis les moitiés supérieures des bretelles présentent le même cuir couleur laiton.

    tags:Bolsos Michael Kors Baratos,Michael Kors Örhängen

    La diversité des couleurs et la taille utilisable de ce sac le rendent parfait pour un usage quotidien. Les poches intérieures ne manquent pas pour aider à garder les choses en ordre. Il y a des endroits parfaits pour votre téléphone ou votre Blackberry. Le zip top empêche les malfaiteurs de saisir votre sac dans un bar et aide également à contenir tout ce qui se trouve à l'intérieur lorsque vous courez pour créer ce train.

    tags:Windguru Longchamps,Longchamp Soldes Destockage,Pronote College Longchamp

    ReplyDelete
  3. Michael Kors Outlet Online was a huge success there and became very well known. The designer Kors then branched out into accessories including Michael Kors Handbags Clearance. He never lost focus on his American chic styling. Some of his most notable collections include the Michael Kors Totes, Michael Kors satchel and the Designer MK Outlet and Michael Kors Outlet Online Store.

    No one has to know that they are cheap Ray Ban Sale UK and no one will know unless you tell them. Each of the cheap designer Ray Ban Sunglasses Sale UK carries the signature brand on the lens to let you know that you do have authentic designer Cheap Ray Ban Sunglasses UK.

    tags: Cheap Oakley Sunglasses UK,MK Outlet

    ReplyDelete