On the 26th we released a small component to integrate with the mousetrap.js library for key shortcuts with Javascript. Since then, we’ve integrated the library into Mystic Paste and have several handy shortcuts available now on the new paste, and history pages.
New Features
Our latest update brings global bindings, default bindings, global default bindings, and the ability to define the key event you’d like to listen to for your shortcut. These functions have afforded us the ability to bind Cmd+S (Mac) and Ctrl+S (Windows) to “Save a Paste” and ignore the default browser functions, and we can do that while still in the text area. And we’ve simplified the reply to paste options, so simply hitting the “Repaste” button, or hitting “R” on the keyboard will take you to a form to reply to the original.
New Bindings
Global bindings is an extension to mousetrap.js that gives you the ability to respond to shortcuts from within form elements on the page. Making it effectively global no matter where the users focus. Here’s an example of usage:
[java] getMousetrap().addGlobalBind(new KeyBinding() .addKeyCombo("r"), doSomething ); [/java]
Default bindings is an extension to mousetrap.js that overrides the default handling of keyboard shortcuts you define. It is similar to adding a regular binding in that form fields will ignore the command. Here’s an example of usage:
[java] getMousetrap().addDefaultBind(new KeyBinding() .addKeyCombo(KeyBinding.COMMAND, "s") .addKeyCombo(KeyBinding.CTRL, "s"), doSomething ); [/java]
The only issue with this, is the form fields are going to ignore the command, even though we’re overriding the default browser functionality. So we add one last binding, the default global bind.
[java] getMousetrap().addDefaultGlobalBind(new KeyBinding() .addKeyCombo(KeyBinding.COMMAND, "s") .addKeyCombo(KeyBinding.CTRL, "s"), doSomething ); [/java]
Voila! Exactly what we need. And very easy to integrate and useful in your Wicket projects. And another useful tidbit of how to make all of this integration work smoothly is how to call your Wicket code from Javascript in Wicket 6.
Calling Wicket 6 from Javascript
One of the most important features necessary to make our integration successful, is the ability to call Wicket from Javascript. Our initial integration utilized the new Wicket.Ajax.get call in Wicket 6 like so:
[java] bindCommand.append("Mousetrap.bind(") .append("‘ctrl+n’") .append(", function(e) { Wicket.Ajax.get({‘u’: ‘") .append(behavior.getCallbackUrl()) .append("’}) }); "); [/java]
And this will give us Javascript code something like the following:
[javascript] Mousetrap.bind(‘ctrl+n’, function(e) { Wicket.Ajax.get({‘u’: ‘/wicket-ajax-url’}); }); [/javascript]
This works perfectly, for GET-based requests. And with the help of Martin Grigorov I soon realized if I wanted to POST, it wouldn’t work. So very early in the morning Martin was instrumental in helping me understand the proper way to call Wicket 6 from Javascript, like so:
[java] bindCommand.append("Mousetrap.bind(") .append(‘ctrl+n’) .append(", function(e) {") .append(behavior.getCallbackScript()) .append("}); "); [/java]
As with most things Wicket, it helps to review the code and understand more fully what the method achieves. And when you call getCallbackScript, it interrogates the object it’s attached to (in this case a Form), and builds a proper Wicket.Ajax.X call with the appropriate parameters for everything. That’s it. It’s the kind of magic that made me fall in love with Wicket so many years ago.
