Wednesday, 12 October 2011

GWT TextBox and PasswordTextBox with Label inside



GWT TextBox and Password TextBox with label inside.
/***
* Simple TextBox with Label Inside - onFocus removes the Label and replaces it onBlur
*
* @author Ram Vijapurapu - ram at thinkbelievedo dot com License: Use as you
* please :)
*/
public static class TextBoxWithLabel extends TextBox {
String label;
boolean isClicked = false;
public TextBoxWithLabel(String lb) {
this.label = lb;
superSetText(label);
superSetStyleName("TextBoxWithLabel");
this.addFocusHandler(new FocusHandler() {
@Override
public void onFocus(FocusEvent event) {
if (!isClicked) {
isClicked = true;
superSetText("");
superSetStyleName("TextBoxWithLabelFilled");
}
}
});
this.addBlurHandler(new BlurHandler() {
@Override
public void onBlur(BlurEvent event) {
if (isClicked) {
if (((TextBox) event.getSource()).getText().trim().length() < 1) {
isClicked = false;
superSetText(label);
superSetStyleName("TextBoxWithLabel");
}
}
}
});
}
// Nasty Hack
protected void superSetStyleName(String string) {
super.setStyleName("TextBoxWithLabel");
}
protected void superSetText(String text) {
super.setText(text);
}
@Override
public String getText() {
return super.getText().equals(label) ? "" : super.getText();
}
@Override
public void setText(String text) {
isClicked = true;
this.setStyleName("TextBoxWithLabelFilled");
super.setText(text);
}
}
/***
* Simple PasswordTextBox with Label Inside - onFocus, changes the Label
*
* @author Ram Vijapurapu - ram at thinkbelievedo dot com License: Use as you
* please :)
*/
public static class PasswordTextBoxWithLabel extends PasswordTextBox {
String label;
boolean isClicked = false;
public PasswordTextBoxWithLabel(String lb) {
this.label = lb;
superSetText(label);
superSetStyleName("TextBoxWithLabel");
this.addFocusHandler(new FocusHandler() {
@Override
public void onFocus(FocusEvent event) {
if (!isClicked) {
isClicked = true;
isClicked = true;
superSetText("");
superSetStyleName("TextBoxWithLabelFilled");
}
}
});
this.addBlurHandler(new BlurHandler() {
@Override
public void onBlur(BlurEvent event) {
if (isClicked) {
if (((TextBox) event.getSource()).getText().trim().length() < 1) {
superSetText(label);
superSetStyleName("TextBoxWithLabel");
}
}
}
});
}
// Nasty Hack
protected void superSetStyleName(String string) {
super.setStyleName("TextBoxWithLabel");
}
protected void superSetText(String text) {
super.setText(text);
}
@Override
public String getText() {
return super.getText().equals(label) ? "" : super.getText();
}
@Override
public void setText(String text) {
isClicked = true;
this.setStyleName("TextBoxWithLabelFilled");
super.setText(text);
}
}
view raw gistfile1.java hosted with ❤ by GitHub



CSS Code:
.TextBoxWithLabel {
font-size: 1em;
font-weight: bold;
color: #C5C5C5;
}
.TextBoxWithLabelFilled {
font-size: 1em;
font-weight: normal;
color: #000000;
}
view raw gistfile1.css hosted with ❤ by GitHub




Usage in GWT:
// Usage of this https://gist.github.com/1283359
// TextBox with label
tbFirstName = new ClientHelper.TextBoxWithLabel("First Name");
// PasswordTextBox with Label
ptbPassword = new ClientHelper.PasswordTextBoxWithLabel("Password");
view raw gistfile1.java hosted with ❤ by GitHub