Announcing Wicket-Source and Plugins

Posted by on Jan 31, 2012 in Blog, Software Engineering

Concept: Click-Through from Wicket web pages back to Java Source

Working on someone else’s complex wicket pages can result in a lot of time spent hunting for components in the source. What if you could click on an item in the web page and jump straight to the Java source that created it?

The net.ftlines.wicket-source module, plus a couple of plugins, lets you do just that. There are three parts.

  1. Wicket Module “wicket-source” – records where in the code each component is constructed and saves it in an HTML attribute.
  2. Firebug Extension “WicketSource” – displays the html attribute in Firebug’s sidebar and lets you click to open it in Eclipse. (Chrome extension pending.)
  3. Eclipse plugin “Source Opener” – listens for clicks from Firefox and opens the file to that line of the Java source.

These three pieces together close the circle from wicket components, to html rendering, to browser, and back to the wicket component source, speeding work on existing but unfamiliar pages, and making minor wording tweaks quick and easy.

The rest of this post explains how to install and use this module and related plugins.

Wicket Module

The module wicket-source plugs in to your Wicket application to record the class and line number where each component is created. It produces an html attribute on each dom node, like so: wicketsource=”net.ftlines.wicketsource.demo:HomePage.java:59″

The wicket module and demo app are in maven central, and the project is hosted on github.

Maven dependency for your pom:

<dependency>
<groupId>net.ftlines.wicket-source</groupId>
<artifactId>wicket-source</artifactId>
<version>1.5.0_06</version>
</dependency>

Usage in your WicketApplication setup:

WicketSource.configure(this); // "this" is your WicketApplication instance

The process used to discover instantiation locations is a bit slow and should not be used in production, so wrap it in a dev or debug check appropriate to your environment.

Once you have that in place, start up your web application, hit it with your browser, and check that you’re getting wicketsource=”whatever” source locations in html attributes for wicket components. If it’s showing up in your html source, it works. There is also a wicket-source-demo application with a standalone jetty Start.java, if you want to try it separately first.

WicketSource Firebug Extension for Firefox 7,8,9

(A Chrome extension is pending, contingent on release of experimental devtools APIs.)

Now that your application’s pages include wicketsource=”x” attributes, it would be convenient to be able to click on them. The Wicket Source Firebug extension provides that. You must have Firebug first.

Then, to install, go to the downloads area on github, click the XPI file, and confirm in Firefox that you want to install it. This will add a sidebar pane to Firebug’s HTML “inspect element” view, with a WicketSource tab.

Inspect an element with Firebug, and then go to the WicketSource sidebar pane to see where in the Java code its Wicket component was created. Click the hyperlink to send a request to Eclipse to open the file (you’ll need the Eclipse plug-in below for that to work).

Screenshot of firefox with firebug open to the wicketsource tab and inspecting an html element

SourceOpener Eclipse Indigo Plug-in

The SourceOpener plugin for Eclipse is the final step. Note for compatibility: This is a plugin for Eclipse Indigo.

To install, copy the net.ftlines.wicketsource.sourceopener_VERSION.jar from the Downloads area of the github project, into your \eclipse\dropins folder and restart Eclipse. Then go to the menu “Window”, “Show View”, “Other”, “Source Opener”, “Recent File Locations”, and put the resulting tab wherever you like.

The listener starts up by default, so it should be usable immediately. The first open-file click from Firefox will be slow while the Eclipse search engine initializes; the rest should be quite fast.

Eclipse will open directly to the line in the Java file when it receives the click from Firefox. To reopen a line, double-click any item in the “Recent File Locations” tab.

Screenshot of Eclipse on wicket-source-demo showing Source Opener tab and Java source

WicketSource for Firebug and SourceOpener for Eclipse communicate across a port. You can set a different port through the preferences (make sure they both match!) and optionally require a password as well.

You can also stop and start the listener in Eclipse (red square to stop, green play button to start). It will pick up preference changes automatically, so you may never need to manually stop or start it.

Feedback and comments are welcome! Let us know how it’s working for you!