IgorShare Thoughts and Ideas

Consulting and Training

Adding Watermark to GWT Textbox widget

Posted by Igor Moochnick on 06/30/2009

Let’s see how we can improve our UI by adding some watermarked “spice”:

clip_image001

Let’s define the primary style for the text box (textInput) and the dependent style for the watermark (textInput-watermark):

.textInput {
	border: 1px solid #C9C7BA;
	font-family:Tahoma, Verdana, Arial, Helvetica, sans-serif;
	font-size: 11px;
	padding-left: 2px;
	padding-top: 2px;
}

.textInput-watermark {
   /* background-image: url('images/overlay.gif');
   background-repeat: no-repeat;
   padding-left: 20px;
   vertical-align: middle; */
   font-style: italic;
   color: DarkGray;
}

Note that the watermark style can contain images as well (see the commented out piece).

After the styles were defined we need to add some code that will apply it to the text box. To do this I’m going to extend the default GWT TextBox. The trick is to hijack the OnBlur and OnFocus events. When the OnBlur is occurring, we’re going to show the watermark and OnFocus – hide it:

public class WatermarkedTextBox extends TextBox implements BlurHandler, FocusHandler
{
	String watermark;
	HandlerRegistration blurHandler;
	HandlerRegistration focusHandler;
	
	public WatermarkedTextBox( )
	{
		super();
		this.setStylePrimaryName("textInput");
	}
	
	public WatermarkedTextBox(String defaultValue)
	{
		this();
		setText(defaultValue);
	}
	
	public WatermarkedTextBox(String defaultValue, String watermark)
	{
		this(defaultValue);
		setWatermark(watermark);
	}
	
	/**
	 * Adds a watermark if the parameter is not NULL or EMPTY
	 * 
	 * @param watermark
	 */
	public void setWatermark(final String watermark)
	{
		this.watermark = watermark;
		
		if ((watermark != null) && (watermark != ""))
		{
			blurHandler = addBlurHandler(this);
			focusHandler = addFocusHandler(this);
			EnableWatermark();
		}
		else
		{
			// Remove handlers
			blurHandler.removeHandler();
			focusHandler.removeHandler();
		}
	}

	@Override
	public void onBlur(BlurEvent event)
	{
		EnableWatermark();
	}
	
	void EnableWatermark()
	{
		String text = getText(); 
		if ((text.length() == 0) || (text.equalsIgnoreCase(watermark)))
		{
			// Show watermark
			setText(watermark);
			addStyleDependentName("watermark");
		}
	}

	@Override
	public void onFocus(FocusEvent event)
	{
		removeStyleDependentName("watermark");
		
		if (getText().equalsIgnoreCase(watermark))
		{
			// Hide watermark
			setText("");
		}
	}
}
About these ads

10 Responses to “Adding Watermark to GWT Textbox widget”

  1. [...] Adding Watermark to GWT Textbox widget « IgorShare Weblog [...]

  2. Ganapathy said

    Hi am using the same context ,but without the labels i used the watermark style as label text,but the reset button doesnt works with the above ,,can any one please suggest how to work the same with the reset button ,on resetting ishould get the water mark text back in the text box

    thanks in advance
    Ganapathy.

  3. Hi

    Clean implementation, thanks.

    Any objection to me using this code in my project?

    Cheers
    Ben

  4. Artiom said

    Thx Igor for given solution. Very good one.!

  5. christie said

    Tnx!!!! Works perfect

  6. Guy said

    what about getText while the text box is empty (watermark is on)?
    wouldn’t it return the watermark instead of an empty string?

  7. Guy said

    I suggest adding:
    @Override
    public String getText()
    {
    String t = super.getText();
    if(t.equals(watermark))
    return “”;

    return t;
    }

    • Guy said

      and also:
      @Override
      public void setText(String text)
      {
      if (text==null)
      return;
      if(text.length() != 0)
      super.setText(text);
      }

      and then also change all referances in that class to getText and setText to super.getText and super.setText…

  8. Guy said

    Turns out there is a much simpler possible implementation but with some limitation of support in modes of IE:
    http://stackoverflow.com/a/7769622/193016

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

 
Follow

Get every new post delivered to your Inbox.

%d bloggers like this: