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.

Over the weekend, I came across a neat library mousetrap.js used to add key commands to your web application. It can be used in any browser including:

• Internet Explorer 6+ (wow)
• Chrome
• Safari
• Firefox
• Opera (yay Belarus!)

Basically the way it works, is

1. add the Javascript library to the page
2. start binding commands

[javascript] Mousetrap.bind(‘command+k’, function(e) { _someFunctionality(); }); [/javascript]

Here’s an example of usage in the Mystic Paste code. We’re adding an AbstractDefaultAjaxBehavior that we’re passing to Mousetrap and binding the key combination of pressing an ‘n’ to move the user to the New Paste page. Within the pastebin, we have the following key commands right now:

• n - new paste
• h - history page
  • left arrow - previous page
  • right arrow - next page
  • shift+left arrow - first page
  • shift+right arrow - last page

And here’s a snippet of usage: [java] final AbstractDefaultAjaxBehavior historyNav = new AbstractDefaultAjaxBehavior() { @Override protected void respond(AjaxRequestTarget target) { throw new RestartResponseException(HistoryPage.class); } }; add(historyNav);

mousetrap.addBind(new KeyBinding().addKeyCombo("h"), historyNav); [/java]

We’ve also done the work of setting up a Maven repository for the library to easily add it to your Wicket code:

[xml] <repository> <id>mystic-mvn-repo</id> <name>Mystic Github Maven Repository</name> <url>https://raw.github.com/kinabalu/mystic-mvn-repo/master/snapshots</url> </repository> … <dependency> <groupId>com.mysticcoders</groupId> <artifactId>wicket-mousetrap</artifactId> <version>0.1-SNAPSHOT</version> </dependency> [/xml]

If you’d like to grab it manually to integrate with your code, or just peruse the source you can find it on Github wicket-mousetrap.

Bulgaria.

This year, as with every year was an amazing experience filled with rich technical content, amazing speakers and attendees delivering an awesome conference. As promised, here are the presentations and information on the three presentations delivered this year.

The HTML5 Landscape

This year, we showed some new demo items, along with layout for the HTML5 landscape talk. From now forward, we’ll add to the following repository “HTML5 Demo” and add cool new demos as we have them.

Using Javascript to Build Native iOS Applications

For the Javascript builds your iOS application talk, we built an example grabbing the current weather from Open Weather Map. Take a look at the repository “ MobileWeather Titanium” and if you’d like to help spruce it up, let us know.

Advanced techniques for mobile games with HTML5

This year, we were asked to co-present with one of the developers at http://www.cayetanogaming.com. We advised the team on some ideas for how to organize, and also took over a large portion of the presentation to spice it up, and make it more fun. On advisement Kristiyan from Cayetano built out a balloon shooting game available here: Balloon Shooter.

Thank you again for everyone who attended this year, and as always, feel free to contact me if you have questions about anything.