It is not a secret that the SRMvision platform is developped using the Apache Wicket framework.

As our application became bigger and so our team, it's getting harder to find the correct Wicket class beneath the view of the page we get in our browsers.

To help the team in this process, I made a simple Chrome extension and a IntelliJ IDEA plugin allowing to send class names to the IDE from the web browser (at the cost of a very simple class in your project, disabled in deployment mode).

Getting your project ready

In the chrome-wicket-idea-example github repository, you have a very simple example of what needs to be done to enable navigation between your browser and your project opened in your IDE. Have a look at the WicketApplication class (specifically in the the init() method) and at the DebugComponentBeforeRenderListener class (it is where the 'simple' magic happen). The good thing is you only need to use this class in your project (confirmed working with Wicket 1.4, 1.5, and 6), and to mimic the initializer logic to get started.

Please notice that you can specify which classes you want to track in your markup (by restricting on package names) at the listener's instanciation.
To test the sample project, you can run the embedded jetty server by running :

mvn jetty:run

Wicket Open In IDEA

IDEA part

The IntelliJ plugin listens for classnames to open on a http socket (10462, overridable in plugin settings).

You can get the IDEA plugin in its github repository, to install it, you have to select "Install plugin from disk" from the "Plugins" category in your IDE settings.

Chrome part

The Chrome extension is really simple, like my TrelloScrum fork, it is not (yet) available on the Chrome Web Store, thus, you have to download the release here and drag and drop it on your chrome://extensions page.
If you want, you can tweak its settings, via the "Options" page :

  • IDE Host : if you change the setup of the plugin in your IDE (or run your IDE on another machine than your browser), you might need to change the host and port to reflect this.
  • Context menu presence host : if you want the context menu icon to appear only on sites where it should, you can narrow the domains here.

To use it, you only have to right click on an item in your "enhanced" web application and select "Wicket debug this".

From there you'll get a modal window listing the matching classes names (sorted by parent order, the first is the closer to the element you pointed to, the next one is the parent class and so on). If there is not any opened modal when you try to use it, it means the extension did not detect any classname in the markup.

Each classname, when clicked, is sent to your IDE which will in turn opens the class matching the classname so you can edit it. The lower part of the modal window will inform you about the status of your last action :

  • If the plugin is not enabled, or the IDE not running : it will display an error message
  • If all went like expected : it will display a confirmation message

I hope it will help other teams using this great framework, or it will give ideas to user of others frameworks.

comments powered by Disqus