View post: GWT in-place-editor
Navigation
Recent posts from all feeds
- Jbpm Mail delivery
- JBoss Marshalling Framework 1.0.0.Beta1 Released
- Performance Comparison between NIO Frameworks
- Mobicents Metamorphosis
- JBoss Jbpm superstates
- Minor release in Poblano - 2.2.1.CR1
- <a rel="nofollow" target="_blank"…
- Managing the dependencies of a seam-gen project with Ivy
- Bean Validation reference implementation and Bootstrap API
- JSFUnit the Easy Way!!
- « Back to feed: JBoss Portal
GWT in-place-editor
The in place editor is one of the simplest yet powerful feature brought by Ajax.
I wrote two such editors last year, one using javascript and one leveraging Prototype as an exercise. Recently I started to study GWT more in depth and I found fun to write a GWT version of the in place editor.
The DeckPanel panel is used to alternate the display between the text box and the label widgets.
The interaction is performed using listeners. The ClickListener on the label copies the label value to the text box and switch the deck panel to show the text box. The KeyboadListener allows on the enter keystroke to copy the edited value to the label and switch back the deck panel to show the label.
public void onModuleLoad()
{
final DeckPanel deck = new DeckPanel();
final Label label = new Label("Initial Value");
final TextBox text = new TextBox();
// Wire the widgets
deck.add(label);
deck.add(text);
deck.showWidget(0);
//
label.addClickListener(new ClickListener()
{
public void onClick(Widget widget)
{
String value = label.getText();
text.setText(value);
deck.showWidget(1);
text.setFocus(true);
}
});
//
text.addKeyboardListener(new KeyboardListenerAdapter()
{
public void onKeyPress(Widget widget, char c, int i)
{
if (c == KEY_ENTER)
{
String value = text.getText();
label.setText(value);
deck.showWidget(0);
}
else if (c == KEY_ESCAPE)
{
deck.showWidget(0);
}
}
});
//
VerticalPanel vp = new VerticalPanel();
vp.add(deck);
RootPanel.get().add(vp);
}
The demo is available here.