Wicket Ajax Keyevent

Question

I'm new to Wicket and I want to create an ajax-behavior that call my Javacode if a Functionkey is pressed.

My idea is to create an behavior that send some Javascript to the Browser, that only the F-Key cause an ajax-callback.

public class HomePage extends WebPage {
public HomePage(final PageParameters parameters) {
    super(parameters);

    add(new AbstractDefaultAjaxBehavior(){

        @Override
        protected void respond(AjaxRequestTarget target) {
            //retrieve the Parametervalue from request
            final Request request = RequestCycle.get().getRequest();
            final String jsKeycode = request.getRequestParameters()
                            .getParameterValue("keycode").toString("");

            //test output   
            target.appendJavaScript("alert('from wicket ajax. you pressed "+jsKeycode+"')");
        }

        @Override
        public void renderHead(Component component, IHeaderResponse response) {
            super.renderHead(component, response);

            //Append JavaScriptcode 
            response.render(OnDomReadyHeaderItem.forScript(
                    "\n\n" +
                    "$(document).keydown(" +
                        "function(event){\n" + //120, 121 Example for F9 and F10
                            "if((event.keyCode == 120) || (event.keyCode == 121)){\n" + 
                                "event.preventDefault();\n" +
                                "window.alert('F-Key pressed');\n" +
                                //perform ajax-callback with keyCode
                            "}\n" +
                        "});\n"));   
        }
    });

Now my problem is: What I have to code, that an ajax callback will perform with the pressed keycode as an Parameter?

Answer 1

osmdamv give me the hint to find the "Wicketsolution" for my problem. Now here is my Code to catch a Keypress and send only in certain cases an ajaxrequest to the wicketserver.

With this example it should be possible for other user to adapt this code for their needs.

public HomePage(final PageParameters parameters) {
    super(parameters);

    add(new AjaxEventBehavior("keydown"){
        @Override
        protected void updateAjaxAttributes(AjaxRequestAttributes attributes) {
            super.updateAjaxAttributes(attributes);

            IAjaxCallListener listener = new AjaxCallListener(){
                @Override
                public CharSequence getPrecondition(Component component) {
                    //this javascript code evaluates wether an ajaxcall is necessary.
                    //Here only by keyocdes for F9 and F10 
                    return  "var keycode = Wicket.Event.keyCode(attrs.event);" +
                            "if ((keycode == 120) || (keycode == 121))" +
                            "    return true;" +
                            "else" +
                            "    return false;";
                }
            };
            attributes.getAjaxCallListeners().add(listener);

            //Append the pressed keycode to the ajaxrequest 
            attributes.getDynamicExtraParameters()
                .add("var eventKeycode = Wicket.Event.keyCode(attrs.event);" +
                     "return {keycode: eventKeycode};");

            //whithout setting, no keyboard events will reach any inputfield
            attributes.setAllowDefault(true);
        }

        @Override
        protected void onEvent(AjaxRequestTarget target) {
            //Extract the keycode parameter from RequestCycle
            final Request request = RequestCycle.get().getRequest();
            final String jsKeycode = request.getRequestParameters()
                            .getParameterValue("keycode").toString("");

            target.appendJavaScript("alert('from wicket ajax. you pressed "+jsKeycode+"')");
        }
 });

Edit:

I insert the attributes.setAllowDefault(true). Now it works correct.

Answer 2

you should use AjaxEventBehavior using decorators

  @Override
  protected void updateAjaxAttributes(AjaxRequestAttributes attributes)
  {
      super.updateAjaxAttributes(AjaxRequestAttributes attributes);

      IAjaxCallListener listener = new IAjaxCallListener()
      {
         @Override
         public CharSequence getBeforeHandler(Component c) { return handler; }
        .....
   };

  attributes.getAjaxCallListeners().add(listener);

}