Previewable Wicket Pages

Ryan Sonnek bio photo By Ryan Sonnek

One of my favorite features of Wicket is the ability to preview a dynamic page without nasty embedded scriptlets or JSP custom tags. I believe Tapestry also has previewable pages since it works quite similar to Wicket.

Even the “holy grail”, Ruby on Rails, is no better than JSP for previewable web pages, which I find interesting since 37signals is such an advocate of working directly with the actual UI and not with mock ups. You would think they’d be frothing at the mouth for completely clickable UI’s from day one.

Wicket is a “component framework”, which means you can extract pieces of your page into reusable pieces. This has huge benefits for building applications quickly, and it truely is the only way to achieve Object Oriented web development. There is a downside to building reusable components though. Once you start extracting common pieces of your page into components, you lose previewability again. The good news is that I think this is a fixable problem.

Here’s an example where my test page has extracted out the login widget into a seperate component. Essentially, my page preview just went in the toilet…

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html>
<head>
  <title>Lame Non-Previewable Page</title>
</head>
<body>
  <div id="login">Text should be replaced</div>
</body>
</html>

Now, with just a bit of AJAX magic, I can preview my test page and have the browser dynamically pull in my extracted component. I’ve used scriptaculous for this kind of Javascript before, but this time I decided to give the dojo toolkit a try.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html>
<head>
  <title>Snazzy Dynamic Include</title>
<script type="text/javascript" src="dojo.js"></script>
<script language="JavaScript" type="text/javascript">
  dojo.require("dojo.io.*");
  dojo.io.bind({
    url: "Login.html",
    load: function(type, data, evt) {
      document.getElementById("testInclude").innerHTML = data;
    },
    mimetype: "text/plain"
  });
</script>
</head>
<body>
  <div id="login">Text should be replaced</div>
</body>
</html>

This is a pretty slick little example on how to get previewable pages for Wicket. I’ll try to put together another post soon to bring this concept to the next level.