Register KeyDownHandler on GWT VerticalPanel

I have a gwt VerticalPanel class that i need to handel KeyDown events for it. the method i used to implement keyboard handler in my class is: i add :

this.sinkEvents(Event.ONKEYDOWN);

to constructor then i override method onBrowserEvent() to handle key down event.

 @Override 
public void onBrowserEvent(Event event) {
// TODO Auto-generated method stub
  super.onBrowserEvent(event);
  int type = DOM.eventGetType(event);
  switch (type) {
  case Event.ONKEYDOWN:
                        //call method to handle this keydown event
   onKeyDownEvent(event);
   break;
  default:
   return;

  }
 }

however this method doesn’t work for this VerticalPanel class.no KeyDown Event is fired when i press a key!

there are specific gwt widgets that support KeyDownHandler like Button etc..VerticalPane开发者_如何学JAVAl is not one of them..so we need a work around to register a KeyDownHandler on a class extending VerticalPanel. can you suggest an idea or hint?

thanks

You could create a Composite that wrappes a FocusPanel and a VerticalPanel. This way you can catch all key events provided the FocusPanel is focused. Simply delegate the needed methods to the panels:

public void onModuleLoad() {
    ExtendedVerticalPanel panel = new ExtendedVerticalPanel();
    panel.add(new Label("some content"));
    panel.addKeyDownHandler(new KeyDownHandler() {

        @Override
        public void onKeyDown(KeyDownEvent event) {
            if (event.getNativeKeyCode() == KeyCodes.KEY_ENTER) {
                Window.alert("enter hit");
            }
        }
    });
    RootPanel.get().add(panel);
}

private class ExtendedVerticalPanel extends Composite implements HasWidgets, HasAllKeyHandlers {

    private VerticalPanel fVerticalPanel;
    private FocusPanel fFocusPanel;

    public ExtendedVerticalPanel() {
        fVerticalPanel = new VerticalPanel();
        fFocusPanel = new FocusPanel();
        fFocusPanel.setWidget(fVerticalPanel);
        initWidget(fFocusPanel);
    }

    @Override
    public void add(Widget w) {
        fVerticalPanel.add(w);
    }

    @Override
    public void clear() {
        fVerticalPanel.clear();
    }

    @Override
    public Iterator<Widget> iterator() {
        return fVerticalPanel.iterator();
    }

    @Override
    public boolean remove(Widget w) {
        return fVerticalPanel.remove(w);
    }

    @Override
    public HandlerRegistration addKeyUpHandler(KeyUpHandler handler) {
        return fFocusPanel.addKeyUpHandler(handler);
    }

    @Override
    public HandlerRegistration addKeyDownHandler(KeyDownHandler handler) {
        return fFocusPanel.addKeyDownHandler(handler);
    }

    @Override
    public HandlerRegistration addKeyPressHandler(KeyPressHandler handler) {
        return fFocusPanel.addKeyPressHandler(handler);
    }
}

UPDATE

Your question on how to prevent the browser from scrolling when the arrow keys are pressed. Here a small example that works for me:

public void onModuleLoad() {
    ExtendedVerticalPanel panel = new ExtendedVerticalPanel();
    // make panel reeeeaally big
    panel.setHeight("3000px");
    panel.add(new TextBox());
    panel.addKeyDownHandler(new KeyDownHandler() {

        @Override
        public void onKeyDown(KeyDownEvent event) {
            if (event.getNativeKeyCode() == KeyCodes.KEY_DOWN) {
                Window.alert("down hit");
                event.preventDefault();
            }
        }
    });
    RootPanel.get().add(panel);
}

Add the handlers you need and call preventDefault() on the events the browser must not take care of.