TurboManage

David Chandler's Journal of Java Web and Mobile Development

  • David M. Chandler


    Web app developer since 1994 and former Developer Advocate with Google now residing in Colorado. Besides tech, I enjoy landscape photography and share my work at ColoradoPhoto.gallery.

  • Subscribe

  • Enter your email address to subscribe to this blog and receive notifications of new posts by email.

    Join 241 other followers

  • Sleepless Nights…

    February 2010
    S M T W T F S
    « Jan   Mar »
     123456
    78910111213
    14151617181920
    21222324252627
    28  
  • Blog Stats

    • 865,597 hits

A TextBox with input prompt for GWT

Posted by David Chandler on February 16, 2010

Here’s a nifty GWT widget that displays a prompt in a text box and erases it when you click or type in the text box. It looks simple, but is actually quite clever in design as it is entirely self-contained. Thanks to Geoffrey Wiseman for the inspiration for this.

package com.turbomanage.gwt.client.ui.widget;

import com.google.gwt.event.dom.client.ClickEvent;
import com.google.gwt.event.dom.client.ClickHandler;
import com.google.gwt.event.dom.client.FocusEvent;
import com.google.gwt.event.dom.client.FocusHandler;
import com.google.gwt.event.dom.client.KeyCodes;
import com.google.gwt.event.dom.client.KeyPressEvent;
import com.google.gwt.event.dom.client.KeyPressHandler;
import com.google.gwt.user.client.ui.TextBox;

public class PromptedTextBox extends TextBox implements KeyPressHandler, FocusHandler, ClickHandler
{
	private String promptText;
	private String promptStyle;

	public PromptedTextBox(String promptText, String promptStyleName)
	{
		this.promptText = promptText;
		this.promptStyle = promptStyleName;
		this.addKeyPressHandler(this);
		this.addFocusHandler(this);
		this.addClickHandler(this);
		showPrompt();
	}

	public void showPrompt()
	{
		this.addStyleName(promptStyle);
		this.setText(this.promptText);
	}

	public void hidePrompt()
	{
		this.setText(null);
		this.removeStyleName(promptStyle);
	}

	@Override
	public void onKeyPress(KeyPressEvent event)
	{
		if (promptText.equals(this.getText())
			&& !(event.getNativeEvent().getKeyCode() == KeyCodes.KEY_TAB))
		{
			hidePrompt();
		}
	}

	@Override
	public void onFocus(FocusEvent event)
	{
		this.setCursorPos(0);
	}

	@Override
	public void onClick(ClickEvent event)
	{
		if (promptText.equals(this.getText()))
			hidePrompt();
	}
}

All that’s needed to round it out is a little CSS to lighten up the prompt text:

.prompt {
	color: #999;
}

Enjoy!

Advertisements

7 Responses to “A TextBox with input prompt for GWT”

  1. Flemming said

    Hi

    I have with great pleasure read you blog for a long time. Thanks for sharing ideas!
    this widget is cool.

    You could even add functionality so when pressing “Esc” the written text would be deleted and the “prompt text” would show up again.

    Just an idea 🙂

    Regards FLemming

  2. Daniel said

    Nice widget! If I understand it correct, the prompt is only shown as initial value in the textbox.
    So when the prompt is hid, you will never show it again.
    Isn’t it an idea to also remove the handlers in hidePrompt() to avoid useless string compares when the user starts typing in the box and the onKeyPress event is triggered all the time?

    • perwiklander said

      @Daniel: It migth be an idea to return the box to its initial state if the user clears the content of the box. This could be important if this kind of box is used without a label as they often are when used as search or login/password boxes. In those two cases it might be obvioud what the labels were before you started typing but try using them in a form with let’s say five identical text fields. Even I as the developer get confused there.

  3. perwiklander said

    This looks good!

    I’ll consider this an early birthday present 🙂 (28 tomorrow)

    Thanks David (and Geoffrey Wiseman)!

  4. JP said

    I was wondering if stealing the code off your blog is:

    1) Immoral
    2) Illegal
    3) Just fine.

    Fine blog, BTW. I almost stole your EnumListBox, but then realized we had (almost) identical implementations, so I kept mine. 🙂

    • JP, the code I post here is free for the taking. Thanks for asking. I really should put a license statement on it with the usual disclaimers. I’m glad you’ve enjoyed the blog.

  5. Glenn said

    Nice post. If you add an @UiConstructor declaration on the constructor then you can use this in ui.xml:

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

 
%d bloggers like this: