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>

15 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
  4. Both things are possible if you carry Michael Kors Handbags Wholesale. If you are a woman who goes for innovative designs, a designer Michael Kors Bags On Sale is perfect for you. Offering a huge selection of chic purses, handbags, shoes and accessories, Michael Kors Outlet Online Store celebrates womanhood in an entirely unique way. Michael Kors Factory Outlet Online Store At Wholesale Price are one of the most sought-after handbags worldwide. We all agree that diamonds are a woman's best friend; however Official Coach Factory Outlet Online are absolutely next in line. To Coach Outlet Sale aficionados, don't fret because we have great news: a discount Official Coach Outlet Online isn't hard to find. If you are a smart shopper looking for a good buy and great deals on your next handbag purchase, you can go to Official Coach Outlet Online.

    Friendly Links: Toms Shoes Womens | Toms Clearance

    ReplyDelete
  5. The latest trend in Coach Outlet Online is to purchase them secondhand.
    Today, buying Michael Kors Bags Outlet is looked upon as a smart choice.
    Because Michael Kors Purse Outlet are crafted of the finest material, they are known to last for many years, making them the perfect purchase.
    Some women are fanatical about changing their Coach Outlet Store Online or their style every few months, making it necessary to periodically clean out their wardrobe.
    Other women buy a MK Outlet for one specific occasion and some women just make a habit of buying a lot of purses.
    The trends are changing today; more and more people are buying classic shoes, including designer Cheap Real Yeezys.
    If your dream has always been to own a Cheap Yeezys, it is possible just by finding a store and click here.
    Coach Bags Clearance are pursued by many famous characters.
    Coach Bags Outlet in different styles and different colors are in different leathers.
    Next time, I will share some knowledge about how to maintain the bags in different material.

    ReplyDelete