Hijacking the Wicket AJAX Debug console

One very cool feature of Wicket is the AJAX debug window. The debug window is the place where Wicket logs client-side messages from its JavaScript code. Looking at these messages can help a lot in analyzing AJAX communication. The debug window looks like in the picture below.

If you are developing Javascript components for Wicket, wouldn’t it be nice to use this debug window for your own JavaScript components? It’s not hard to do at all. The steps are explained below.

Enabling the Debug Window

The Debug window is enabled by default. To enable it explicitly, follow these steps:

  • start your Wicket application in development mode (or start it in deployment mode and call getDebugSettings().setAjaxDebugModeEnabled(true) in the init method of your application)
  • load a page with at least one of Wicket’s AJAX components
  • you will now see a link “WICKET AJAX DEBUG” on the page which opens the debug window.

Rolling your own JavaScript Behavior

So, you are developing some kind of javascript to be used from a Wicket component. The way to do this is by defining a Behavior that includes the needed javascript files and calls the right javascript command at the right time. It looks something like this:

public class MyJavascriptBehavior extends Behavior{</pre>
  @Override
  public void renderHead(Component component, IHeaderResponse response) {
    response.renderJavaScriptReference("myJavascript.js");
    response.renderOnDomReadyJavaScript("myJavascriptCall()");
  }
}

The javascript file myJavascript.js contains some functionality you want to include. The javascript method myJavascriptCall() is called when the DOM is fully loaded. In the javascript file you want to output some debug info.

// myJavascriptFile.js
function myJavascriptCall(){
  // ...snip... arbitrary javascript logic
  alert('debug info');
}

Hijacking the Wicket Debug Window

Now, outputting debug info via alert() is not very sophisticated. Instead, we want to log the information to the wicket debug window. First, we have to include Wicket’s own javascript files in our behavior class. To achieve that, we write the method includeDebugJavascript():

public class MyJavascriptBehavior extends Behavior{</pre>
  @Override
  public void renderHead(Component component, IHeaderResponse response) {
    response.renderJavaScriptReference("myJavascript.js");
    response.renderOnDomReadyJavaScript("myJavascriptCall()");
    includeDebugJavascript(response, component.getApplication());
  }

  private void includeDebugJavascript(IHeaderResponse response, Application application) {
    if (application.getDebugSettings().isAjaxDebugModeEnabled()) {
      response.renderJavaScriptReference(WicketEventReference.INSTANCE);
      response.renderJavaScriptReference(WicketAjaxReference.INSTANCE);
      response.renderJavaScriptReference(
        new JavaScriptResourceReference(AbstractDefaultAjaxBehavior.class, "wicket-ajax-debug.js"));
      response.renderJavaScript("wicketAjaxDebugEnable=true;", "wicket-ajax-debug-enable");
    }
  }
}

That’s it. It’s the same mechanism the Wicket framework itself uses (in 1.5.3, that is; as of this writing, this mechanism was somewhat refactored in the trunk). Now, to log something to the wicket debug window from your javascript, modify your javascript as follows:

// myJavascriptFile.js</pre>
function myJavascriptCall(){
  // ...snip... arbitrary javascript logic
  logInfo("Hello Wicket Debug Window");
}

function logInfo(message){
  if (islogEnabled())
  WicketAjaxDebug.logInfo(msg);
}

function isLogEnabled(){
  if (typeof(WicketAjaxDebug)=="undefined") {
    return false;
  } else {
    return true;
  }
}

The detour with isLogEnabled() is neccessary, since the javascript variable WicketAjaxDebug is null if you don’t have the AJAX debug settings (see above) set to true. Calling the method logInfo() on a null reference causes an error, even in javascript. The methods logDebug() and logError() are also supported. For a clean and reusable component, you should wrap your javascript code in its own namespace, which was not done here.

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s