Wednesday, March 28, 2012

Prompt TextInput in GWT

Prompt text input is very common and useful widget, but GWT does not have it. I create this one with ability to show prompts at the initial and reset to prompt if the text input text is empty. I should thank David Chandler and Geoffrey Wiseman for their implementation of prompt input. Enhancement of this widget is able to be used in UiBinder, show prompt on Blur and uses styleDependentName instead. Problems of this widget are the "italic" style can not set for the prompt if the font-size is small. The prompt default size is changed, I have not found a solution yet. Is it a bug of GWT InputBox?

Source Code for PromptTextBox.java
package com.robinria.gwt.client.custom.widget;

import com.google.gwt.event.dom.client.BlurEvent;
import com.google.gwt.event.dom.client.BlurHandler;
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.uibinder.client.UiConstructor;
import com.google.gwt.user.client.ui.TextBox;

/**
 * TextBox with input prompts. Prompts hidden When input receive type, click and
 * focus event. Prompts shown when input receives blur event or on initial.
 * 
 */
public class PromptTextBox extends TextBox implements BlurHandler,
  FocusHandler, ClickHandler, KeyPressHandler {

 private String promptText;
 private String promptStyleDependentName;

 /**
  * Construct a new TextBox with prompt text. When instantiate this using
  * UiBinder, either fill in a field marked with @UiField(provided=true),
  * or have to define the all the arguments in UiBinder file.
  * Important: Set styleName should not be used, use set stylePrimaryName instead.
  * 
  * @param promptText prompt text
  * @param promptStyleDependentName style dependent name for prompt text
  */
 @UiConstructor
 public PromptTextBox(String promptText, String promptStyleDependentName) {
  this.promptText = promptText;
  this.promptStyleDependentName = promptStyleDependentName;
  this.addKeyPressHandler(this);
  this.addFocusHandler(this);
  this.addClickHandler(this);
  this.addBlurHandler(this);
  setPrompts();
 }

 /**
  * {@inheritDoc}
  */
 @Override
 public void onBlur(BlurEvent event) {
  if (getText().isEmpty()) {
   setPrompts();
  }
 }

 /**
  * {@inheritDoc}
  */
 @Override
 public void onFocus(FocusEvent event) {
  this.setSelectionRange(0, 0);
 }

 /**
  * {@inheritDoc}
  */
 @Override
 public void onClick(ClickEvent event) {
  if (promptText.equals(getText())) {
   hidePrompts();
  }
 }

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

 private void setPrompts() {
  this.addStyleDependentName(promptStyleDependentName);
  this.setText(promptText);
 }

 private void removePrompts() {
  this.removeStyleDependentName(promptStyleDependentName);
  this.setText(null);
 }
}
You need to style your prompt input box.
.promptTextBoxStyle {
 overflow: hidden;
}

.promptTextBoxStyle-promptStyle {
 color: #999999;
 /*  - Have this style cause default input size smaller;
  - so comment out for now.
 font-style: italic;
 */
}

Then, if you are using UiBinder, the Xml code is



 


No comments: