onKeyPress varies as to whether it registers some keys depending on the browser. Anything you can see on the screen is pretty safe, but IE doesn't fire onKeyPress for either the backspace or the delete key whereas FireFox, Opera and Safari do. IE and FF don't count the Control or Shift key as a keypress but fire the keyDown and KeyUp events, while for the same keys, Opera fires all three events, and Safari fires none of them.
If you are new to listeners, then this isn't the simplest of examples, I'd have a look at the ClickListener example which gives five simple examples
import com.google.gwt.user.client.Command;
import com.google.gwt.user.client.DOM;
import com.google.gwt.user.client.DeferredCommand;
import com.google.gwt.user.client.Timer;
import com.google.gwt.user.client.ui.Composite;
import com.google.gwt.user.client.ui.FocusListener;
import com.google.gwt.user.client.ui.FocusPanel;
import com.google.gwt.user.client.ui.KeyboardListener;
import com.google.gwt.user.client.ui.Label;
import com.google.gwt.user.client.ui.VerticalPanel;
import com.google.gwt.user.client.ui.Widget;
import com.roughian.rxf.client.ui.AbstractRemotePage;
public class Listeners__KeyboardListener extends AbstractRemotePage
{
public void buildPage()
{
getRemotepage().add(new Demo(), "demo");
}
class Demo extends Composite implements KeyboardListener, FocusListener
{
// Vertical panel to hold the info labels
VerticalPanel panel = new VerticalPanel();
// Focus panel to a) receive keyboard event (VerticalPanel doesn't get
// them) and b) to react to focus events so we can highlight the box
FocusPanel widget = new FocusPanel(panel);
//
Label down;
Label press;
Label up;
public Demo()
{
// Indicate the top-level widget
initWidget(widget);
// Give the panel a bit of style
panel.setStyleName("table-center");
panel.setWidth("400px");
panel.setSpacing(10);
// Set up the labels - in most cases you'd use CSS for the style,
// but here I'm doing it this way so you can see what is going on.
// Only use this method for styles you don't expect the user to want
// to change
panel.add(down = new Label("onKeyDown"));
DOM.setStyleAttribute(down.getElement(), "border", "1px solid black");
DOM.setStyleAttribute(down.getElement(), "textAlign", "center");
panel.add(press = new Label("onKeyPress"));
DOM.setStyleAttribute(press.getElement(), "border", "1px solid black");
DOM.setStyleAttribute(press.getElement(), "textAlign", "center");
panel.add(up = new Label("onKeyUp"));
DOM.setStyleAttribute(up.getElement(), "border", "1px solid black");
DOM.setStyleAttribute(up.getElement(), "textAlign", "center");
// Add a couple of listeners so we receive events. Because the demo
// class is declared as a listener, it can receive events like this
widget.addKeyboardListener(this);
widget.addFocusListener(this);
// Set focus on the widget. We have to use a deferred command or a
// timer since GWT will lose it again if we set it in-line here
DeferredCommand.addCommand(new Command()
{
public void execute()
{
widget.setFocus(true);
}
});
}
// For each event, turn the background of the label yellow, and schedule
// a timer to turn it back again
public void onKeyDown(Widget sender, char keyCode, int modifiers)
{
DOM.setStyleAttribute(down.getElement(), "backgroundColor", "yellow");
new Timer()
{
public void run()
{
DOM.setStyleAttribute(down.getElement(), "backgroundColor", "white");
}
}.schedule(300);
}
public void onKeyPress(Widget sender, char keyCode, int modifiers)
{
DOM.setStyleAttribute(press.getElement(), "backgroundColor", "yellow");
new Timer()
{
public void run()
{
DOM.setStyleAttribute(press.getElement(), "backgroundColor", "white");
}
}.schedule(300);
}
public void onKeyUp(Widget sender, char keyCode, int modifiers)
{
DOM.setStyleAttribute(up.getElement(), "backgroundColor", "yellow");
new Timer()
{
public void run()
{
DOM.setStyleAttribute(up.getElement(), "backgroundColor", "white");
}
}.schedule(300);
}
// Indicate whether the panel has focus
public void onFocus(Widget sender)
{
DOM.setStyleAttribute(widget.getElement(), "border", "5px solid #ffa");
}
public void onLostFocus(Widget sender)
{
DOM.setStyleAttribute(widget.getElement(), "border", "5px solid #eee");
}
}
}