Java Thoughts

CSS load order with Wicket and an external jar

2009-06-29T17:33:00.000-07:00

I had a problem with the CSS from a provided jar (wicketstuff-jquery) overriding my local CSS. To get around this, I made sure the jar's CSS loaded first:


      add(CSSPackageResource.getHeaderContribution(JQTabbedPanel.class, "jquery.tabs.css"));
      add(CSSPackageResource.getHeaderContribution(MyWicketPage.class, "MyWicketPage.css"));

Wicket is clever enough to not load the same CSS twice. I knew which class and CSS file load by looking at the generated source:

<link rel="stylesheet" type="text/css" href="resources/org.wicketstuff.jquery.tabs.JQTabbedPanel/jquery.tabs.css" />

Replacing Wicket's FeedbackPanel with jGrowl

2009-06-23T12:57:00.000-07:00

I wanted to replace the standard Wicket FeedbackPanel with a more modern growl-like presentation based on jGrowl. There are several ways to do this, but I chose Alex Objelean's JGrowlBehavior as my starting point. Our needs were simple. We have two types of feedback messages: component-level errors on form fields, which we display under the form field using Al Maw's ShinyFormVisitor, and session-level messages for everything else. We only want to display the session-level messages using JGrowlBehavior, so my version of JGrowlBehavior is quite simple. This works for both full server round trips (the button labeled "Normal OK" in the demo below), and Ajax (the button labeled "Ajax OK").

Demo

JGrowlBehavior.java

/**
* Attach to any component to display jGrowl messages.
*
* Displays only session-level messages. If you need component-level
* messages, see http://pastebin.com/f6db2ec0e for an example. Basically,
* instead of Session.get().getFeedbackMessages(), you would call
* getComponent().getFeedbackMessage().
*
* Requires the following be included: "jquery.js", "jquery.ui.all.js",
* "jquery.jgrowl.js", "jquery.jgrowl.css". These can be downloaded
* from http://plugins.jquery.com/files/jGrowl-1.2.0.tgz.
*
* @author jsinai
* Based on an example by Alex Objelean, see the above link.
*/
public class JGrowlBehavior extends AbstractDefaultAjaxBehavior
{
 private static final long serialVersionUID = 1L;

 /**
  * Displays an info message that is sticky. The default is non-sticky.
  * Sample usage: session.getFeedbackMessages().add(new FeedbackMessage(null,
  * "my message", JGrowlBehavior.INFO_STICKY));
  */
 public static final int INFO_STICKY = 250;

 @Override
 protected void respond(AjaxRequestTarget target)
 {
  final String feedbackMsg = renderFeedback();
  if (!StringUtils.isEmpty(feedbackMsg))
  {
   target.appendJavascript(feedbackMsg);
  }
 }

 @Override
 public void renderHead(final IHeaderResponse response)
 {
  super.renderHead(response);
  final String feedbackMsg = renderFeedback();
  if (!StringUtils.isEmpty(feedbackMsg))
  {
   response.renderOnDomReadyJavascript(feedbackMsg);
  }
 }

 private String renderFeedback()
 {
  this.getComponent().getFeedbackMessage();
  final FeedbackMessages fm = Session.get().getFeedbackMessages();

  final Iterator<FeedbackMessage> iter = fm.iterator();
  final StringBuilder sb = new StringBuilder();
  while (iter.hasNext())
  {
   final FeedbackMessage message = iter.next();
   if ((message.getReporter() != null) || message.isRendered())
   {
    // If a component-level message, don't show it
    continue;
   }
   final String cssClassSuffix = (message.getLevel() == INFO_STICKY) ? "INFO" : message
     .getLevelAsString();
   final Serializable serializable = message.getMessage();
   final String msg = (serializable == null) ? StringUtils.EMPTY : serializable.toString();
   sb.append("$.jGrowl(\"").append(msg).append('\"');
   sb.append(", {");
   sb.append("theme: \'jgrowl-").append(cssClassSuffix).append("\'");
   if (message.getLevel() > FeedbackMessage.INFO)
   {
    sb.append(", sticky: true");
   }
   sb.append("}");
   sb.append(");");
   message.markRendered();
  }
  return sb.toString();
 }
}

JGrowlPage.java

/**
* @author jsinai
*/
public class JGrowlPage extends WebPage {

 public JGrowlPage() {
  super();
  add(CSSPackageResource.getHeaderContribution(JGrowlPage.class,
    "JGrowlPage.css"));

  Form<?> form = new Form("form") {

   @Override
   protected void onSubmit() {
    Session.get().error("Test error");
    Session.get().warn("Test warning");
    Session.get().info("Test info");
    Session.get().getFeedbackMessages().add(
      new FeedbackMessage(null, "Test sticky info",
        JGrowlBehavior.INFO_STICKY));
   }
  };
  add(form);

  AjaxButton b = new AjaxButton("ajaxbutton", form) {

   @Override
   protected void onSubmit(AjaxRequestTarget target, Form<?> form) {
    target.addComponent(form);
   }
  };
  form.add(b);
  form.add(new JGrowlBehavior());
 }
}

JGrowlPage.html

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<wicket:head>
 <script type="text/javascript" src="js/jquery.js"></script>
 <script type="text/javascript" src="js/jquery.ui.all.js"></script>
 <script type="text/javascript" src="js/jquery.jgrowl.js"></script>
 <link rel="stylesheet" href="css/jquery.jgrowl.css" />
 <title>Wicket/jGrowl Demo</title>
</wicket:head>

<body>
<h1>Wicket/jGrowl Demo</h1>
<form wicket:id="form">
<input type="submit" value="Normal OK"/>
<input type="submit" value="Ajax OK" wicket:id="ajaxbutton"/>
</form>
</body>
</html>

JGrowlPage.css

@CHARSET "UTF-8";

div.jGrowl div.jgrowl-ERROR {
 background-color: #BF0B0B;
}
div.jGrowl div.jgrowl-WARNING {
 background-color: orange;
 color: black;
}
div.jGrowl div.jgrowl-INFO {
 background-color: #0C5F0C;
}

Calling Wicket from Javascript

2009-06-12T16:24:00.000-07:00

I needed to call into Wicket code from a jQuery function. Building on the sample code from Calling Wicket from Javascript, I created an end-to-end working example. In my case I wanted to manipulate a row in my data table when a user clicked a jQuery widget in that row. I needed to pass the markup id from the widget to the Wicket handler. In my case, My item type is DefaultMutableTreeNode. Note that contrary to what the wiki page says, I did not need to put a script tag in my html code.

MyDataView.java

@Override
protected void populateItem(final Item<DefaultMutableTreeNode> item)
{
 super.populateItem(item);
 // Important!!
 item.setOutputMarkupId(true);
 ...
}

MyDataPanel.java

public class MyDataPanel extends DataPanel
{

 public MyDataPanel(String id, final HtDataView dataView,
   WebPage parent)
 {
  ...

  final AbstractDefaultAjaxBehavior behave = new AbstractDefaultAjaxBehavior()
  {
   private static final long serialVersionUID = 1L;

   @Override
   protected void respond(final AjaxRequestTarget target)
   {
    final String paramMarkupId = RequestCycle.get().getRequest().getParameter("markupId");
    MyDataPanel.this.visitChildren(Item.class,
    new Component.IVisitor<Item<DefaultMutableTreeNode>>()
    {
     public Object component(Item<DefaultMutableTreeNode> item)
     {
      if (StringUtils.equals(paramMarkupId, item.getMarkupId()))
      {
       ...your code here...
      }
      return STOP_TRAVERSAL;
     }
    });
   }
  };
  parent.add(behave);
  final CharSequence url = behave.getCallbackUrl();
  add(new AbstractBehavior()
  {
   private static final long serialVersionUID = 1L;

   @Override
   public void renderHead(IHeaderResponse response)
   {
    String js = "function callWicket(markupId) { var wcall = wicketAjaxGet ('"
    + url + "&markupId='+markupId, function() { }, function() { } ) }";
    response.renderJavascript(js, "myScript");
   }
  });
...

MyJQueryStuff.js

$.fn.toggleBranch = function() {
... 
     var idAttr = $(this).attr("id");
   callWicket(idAttr);
...

Google Wave

2009-05-28T11:53:00.000-07:00

I saw the first demo of Google Wave today at Google I/O. It's a collaboration platform that combines the best characteristics of email, bulletin boards, instant messaging. It also has some of the characteristics of a social network site. It started out as the Next Big Thing from the Rasmussen brothers, the inventors of Google Maps. It's been a couple of years in development and it's not yet publicly released. It consists of the client program, a set of APIs, and a protocol.

The user interface is really well designed, but its real strength is the real time updates, taking the IM paradigm to the next level, i.e. collaboration. This is a really great feature because it means you can collaborate on the same "wave" (conversation) and see everyone's updates in real time.

While it didn't start that way, it seems now to be aimed at stealing some of Facebook's thunder. Google wants to do an end run around Facebook by open sourcing the source code, but even more importantly, by allowing anyone to host a Wave service. This will enable enterprises to host their own private instance; but the really powerful thing is that instances can be federated, i.e. they can communicate with each other, but they've taken care to make sure that privacy is maintained.

The user interface is built using GWT. This is a huge endorsement for GWT, which has suffered from a reputation of being a toy that isn't used for the heavy-duty customer-facing apps. Lars Rasmussen, who has demonstrated he's a great Javascript programmer, now prefers GWT to Javascript programming. I may have to tear myself away from Wicket and try it.

The APIs and protocol will be available at the same time as the product itself.

A trick to guarantee Spring load order without using depends-on

2009-03-27T09:28:00.000-07:00

There are times when you want one Spring bean instantiated before another. If bean A depends on bean B, you are guaranteed that B will be instantiated before A. But what if there is no such dependency? In older (i.e. pre-annotation) versions of Spring, the solution is to use the depends-on attribute in the bean definition in your application context. But if you are using annotations exclusively, depends-on isn't available.

The trick is simple: inject an unused dependency using @Resource.

A.java

@Service
public class A
{
 @SuppressWarnings("unused")
 @Resource
 private B unusedButNeededForSpringBeanLoadOrder;
...

A jQuery tree table for Wicket

2009-03-01T11:19:00.000-08:00

I needed to enhance my Wicket DataView, which uses an html table and a particular look and feel, to render as a treetable in certain cases. The Wicket built-in TreeTable does not meet my needs, because it renders table cells as divs. Also I like the idea of finding easy ways to integrate powerful javascript plugins with Wicket.

I found that what I wanted to do was indeed possible with just one line of javascript: $("#treetable").treeTable(). It doesn't get simpler than that.

I found two popular tree table jQuery plugins, namely treeTable and jQTreeTable. After some playing around, I decided that treeTable was simpler and met my needs. To set up my Wicket webapp to use it, I downloaded the .js file to src/main/webapp/js, the CSS file to to src/main/webapp/css, and the necessary images (which are a bit harder to get at than they should be): toggle-expand-dark.png, toggle-collapse-dark.png, toggle-collapse-light.png, toggle-expand-light.png to to src/main/webapp/images.

The sample code below is the simplest way I could think of to show how to marry the jQuery tree table to Wicket, namely using a Loop. There are many other ways to do it, including what I am using in production, namely the DataPanel-DataProvider-DataView pattern. The picture above is a screenshot of my sample code.

The code that actually renders the tree table is a small part of the whole (i.e. the Loop); the rest is there to build the model, and other supporting code. Pay closest attention to the header in the html code.

As of this writing, I'm using jQuery 1.2.6 and Wicket 1.4-rc2.

TreeTable.html

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

<html xmlns="http://www.w3.org/1999/xhtml">
  <wicket:head>
    <script type="text/javascript" src="js/jquery.js"></script>
    <script type="text/javascript" src="js/jquery.treeTable.js"></script>
    <link href="css/jquery.treeTable.css" rel="stylesheet" type="text/css" />
    <script type="text/javascript">
        $(document).ready(function()  {
          $("#treetable").treeTable();
        });
    </script>
   </wicket:head>
<body>
 <table id="treetable" border="1">
  <tr>
   <th>ID</th>
   <th>Name</th>
   <th>Description</th>
  </tr>
  <tr wicket:id="row">
   <td wicket:id="id"></td>
   <td wicket:id="name"></td>
   <td wicket:id="description"></td>
  </tr>
 </table>
</body>
</html>

TreeTable.java

public class TreeTable extends WebPage {

 public TreeTable() {
  super();

  // Create a TreeModel or any kind of hierarchical data model
  final TreeModel treeModel = getTreeModel();
  // It's convenient to have an ordered list of tree nodes to iterate over
  final List<DefaultMutableTreeNode> treeAsList = treeToList(treeModel);
  // This map lets a child node look up the html id of its rendered parent tag
  final Map<DefaultMutableTreeNode, String> treeMap = new HashMap<DefaultMutableTreeNode, String>();

  add(new Loop("row", treeAsList.size()) {
   private static final long serialVersionUID = 3443157723178494017L;

   @Override
   protected void populateItem(LoopItem item) {
    final int index = item.getIteration();
    final DefaultMutableTreeNode node = treeAsList.get(index);
    final MyModelObject model = (MyModelObject) node
      .getUserObject();
    // Table cells
    item.add(new Label("id", model.id));
    item.add(new Label("name", model.name));
    item.add(new Label("description", model.description));
    // Build the tree hierarchy
    // The id is necessary for the parent-child relationship
    item.setOutputMarkupId(true);
    treeMap.put(node, item.getMarkupId());
    final DefaultMutableTreeNode parentNode = (DefaultMutableTreeNode) node
      .getParent();
    if (parentNode != null) {
     final String parentId = treeMap.get(parentNode);
     item.add(new AttributeAppender("class", new Model<String>(
       "child-of-" + parentId), " "));
    }
   }
  });
 }

 private List<DefaultMutableTreeNode> treeToList(TreeModel treeModel) {
  final List<DefaultMutableTreeNode> ret = new ArrayList<DefaultMutableTreeNode>();
  final DefaultMutableTreeNode node = (DefaultMutableTreeNode) treeModel
    .getRoot();
  recurse(ret, node);
  return ret;
 }

 private void recurse(List<DefaultMutableTreeNode> ret,
   DefaultMutableTreeNode node) {
  ret.add(node);
  for (Enumeration<?> e = node.children(); e.hasMoreElements();) {
   final DefaultMutableTreeNode child = (DefaultMutableTreeNode) e
     .nextElement();
   recurse(ret, child);
  }
 }
 /** A sample tree model */
 private TreeModel getTreeModel() {

  final DefaultMutableTreeNode ROOT = new DefaultMutableTreeNode(
    new MyModelObject("ROOT", "This is root",
      "Root is the base of the tree"));

  final DefaultMutableTreeNode A = new DefaultMutableTreeNode(
    new MyModelObject("A", "This is A", "A is a child of ROOT"));
  ROOT.add(A);
  final DefaultMutableTreeNode B = new DefaultMutableTreeNode(
    new MyModelObject("B", "This is B", "B is a child of ROOT"));
  ROOT.add(B);
  final DefaultMutableTreeNode AA = new DefaultMutableTreeNode(
    new MyModelObject("AA", "This is AA", "AA is a child of A"));
  A.add(AA);
  final DefaultMutableTreeNode BB = new DefaultMutableTreeNode(
    new MyModelObject("BB", "This is B", "BB is a child of B"));
  B.add(BB);

  final DefaultTreeModel tree = new DefaultTreeModel(ROOT);
  return tree;
 }
 /** A sample model object for the tree nodes */
 private class MyModelObject implements Serializable {
  private static final long serialVersionUID = -3058898204144314012L;
  private final String id, name, description;

  public MyModelObject(String id, String name, String description) {
   this.id = id;
   this.name = name;
   this.description = description;
  }
 }
}

To get the expand and collapse icons to render the way I preferred, I made a minor change to the javascript to make the margin and padding be 100% CSS-driven.

In jquery.treeTable.js, I changed the line:

cell.prepend('<span style="margin-left: -' + options.indent + 'px;
 padding-left: ' + options.indent + 'px" class="expander"></span>');

To:

cell.prepend('<span class="expander"></span>');

And in jquery.treeTable.css, I added the last two lines (margin-left and padding-left) to ".treeTable tr td .expander":

.treeTable tr td .expander {
  background-position: left center;
  background-repeat: no-repeat;
  cursor: pointer;
  padding: 0;
  zoom: 1; /* IE7 Hack */  
  margin-left: -3px;
  padding-left: 15px;
}

Adding jQuery tooltips to Wicket pages

2009-02-19T09:26:00.000-08:00

Tooltips are little popup windows that appear on mouse over and are one handy way to provide context-sensitive help to users. It's easy to add tooltips to form fields (or any other tags, really) using jQuery and Wicket. See the screenshot for an example.

Here's how to add tooltips to your Wicket forms. I'm using the label tag to associate the text next to the field with its field, and assigning the tooltip to the label field also. This means that the user will see the tooltip whether they mouse over the label or the field. The first example is the simplest, where I provide a string for the tooltip directly in the code. The second example uses Wicket's powerful model capability, which means you can get the tooltip string from a properties file, a bean property, even a database.

There are many jQuery plugins that can display tooltips. I'm using this one., which I found easy to use and very well-behaved on various browsers. There are lots of options for styling, but I'm using the default style.

I'm using version 1.4-rc2 of Wicket, version 1.2.6 of jQuery, and version 1.3 of the jQuery Tooltip plugin. I put the .js files in the folder src/main/webapp/js of my maven project, and the .css file in the folder src/main/webapp/css of my maven project.

Tooltips.html

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

<html xmlns="http://www.w3.org/1999/xhtml">
<wicket:head>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery.tooltip.js"></script>
<script type="text/javascript">
    $(function() {
     $('.tooltip').tooltip();
    });
</script>
<link rel="stylesheet" href="css/jquery.tooltip.css" />
</wicket:head>

<body>
<form action="" wicket:id="myform">
<fieldset>
 <label for="one" wicket:id="label.one">My text field 1:</label>
 <input id="one" wicket:id="text.one" type="text"/>
</fieldset>
<fieldset>
 <label for="two" wicket:id="label.two">My text field 2:</label>
 <input id="two" wicket:id="text.two" type="text"/>
</fieldset>
</form>
</body>
</html>

Tooltips.java

public class Tooltips extends WebPage {

public Tooltips() {
  super();

  Form<String> form = new Form<String>("myform");
  add(form);
  
  SimpleAttributeModifier am1 = new SimpleAttributeModifier("title", "hi tooltip 1");
  AttributeAppender tt = new AttributeAppender("class", new Model<String>("tooltip"), " ");
  Label label1 = new Label("label.one", new Model<String>("My Form Field Label 1:"));
  label1.add(am1);
  label1.add(tt);
  form.add(label1);
  TextField<String> textField1 = new TextField<String>("text.one");
  textField1.add(am1);
  textField1.add(tt);
  form.add(textField1);
  
  AttributeModifier am2 = new AttributeModifier("title", true, new Model<String>("hi tooltip 2"));
  Label label2 = new Label("label.two", new Model<String>("My Form Field Label 2:"));
  label2.add(am2);
  label2.add(tt);
  form.add(label2);
  TextField<String> textField2 = new TextField<String>("text.two");
  textField2.add(am2);
  textField2.add(tt);
  form.add(textField2);

}
}

JPA and multiple persistence units

2009-02-06T09:11:00.000-08:00

I have JPA/EJB3 @Entities in two separate jars that are loaded by my webapp. As strange as this sounds, it's not that easy to define ORM entities in more than one jar file and have your application load them. It seems this is not a common requirement, yet for a really modular application, it seems obvious to me that you might do this.

One supposedly standard way to solve this is to use the jar-file tag in persistence.xml. But it doesn't solve the problem because you have to use absolute URLs, which is not workable for production.

I found the solution in this post, which was to override persistence unit processing. In addition to the following code, I had to set up my Spring configuration in a particular way to make it all work properly:

import org.springframework.orm.jpa.persistenceunit.MutablePersistenceUnitInfo;
import org.springframework.orm.jpa.persistenceunit.PersistenceUnitPostProcessor;

/**
* This merges all JPA entities from multiple jars. To use it, all entities must
* be listed in their respective persistence.xml files using the <class> tag.
*
* @see http://forum.springsource.org/showthread.php?t=61763
*/
public class MergingPersistenceUnitPostProcessor implements PersistenceUnitPostProcessor
{
 Map<String, List<String>> puiClasses = new HashMap<String, List<String>>();

 public void postProcessPersistenceUnitInfo(MutablePersistenceUnitInfo pui)
 {
  List<String> classes = puiClasses.get(pui.getPersistenceUnitName());
  if (classes == null)
  {
   classes = new ArrayList<String>();
   puiClasses.put(pui.getPersistenceUnitName(), classes);
  }
  pui.getManagedClassNames().addAll(classes);

  final List<String> names = pui.getManagedClassNames();
  classes.addAll(pui.getManagedClassNames());
 }
}

To use it, I found that this only works if do all of the following:

All your entities need to be mentioned in your persistence.xml files. Normally you don't have to do this is if you set up entity scanning in your Spring config
All your persistence units use the same name, and furthermore it has to be the default name, namely "default"
You have to use a particular entity manager factory, namely LocalContainerEntityManagerFactoryBean
You have to have define your persistence provider in persistence.xml, in our case org.hibernate.ejb.HibernatePersistence
Each persistence.xml file needs a unique name, because they are enumerated in the application context.

Here is an example of a persistence.xml:

<?xml version="1.0" encoding="UTF-8"?>
<persistence version="1.0"
 xmlns="http://java.sun.com/xml/ns/persistence" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
 xsi:schemaLocation="http://java.sun.com/xml/ns/persistence http://java.sun.com/xml/ns/persistence/persistence_1_0.xsd">
 <persistence-unit name="default" transaction-type="RESOURCE_LOCAL">
 
  <provider>org.hibernate.ejb.HibernatePersistence</provider>
  
  <!-- Entities have to be enumerated here for MergingPersistenceUnitPostProcessor -->
  <class>com.my.Foo</class>
...

Here is an excerpt from my application context. The whole point is that I can now have as many persistence.xml files as I like, in different jar files:

<bean id="pum"
 class="org.springframework.orm.jpa.persistenceunit.DefaultPersistenceUnitManager">
 <property name="persistenceXmlLocations">
  <list>
   <value>classpath*:META-INF/persistence1.xml</value>
   <value>classpath*:META-INF/persistence2.xml</value>
  </list>
 </property>
 <property name="persistenceUnitPostProcessors">
       <bean class="com.my.MergingPersistenceUnitPostProcessor"/>
 </property>
</bean>
<bean id="entityManagerFactory" class="org.springframework.orm.jpa.LocalContainerEntityManagerFactoryBean">
 <property name="persistenceUnitManager" ref="pum"/>
</bean>

JPA / EJB3 Persistence and EhCache

2009-02-03T13:24:00.000-08:00

We had an issue with a particular web page that took too long to load. We could have done a whole lot of code optimization, but we thought we'd give a second level cache a try, since it's something we needed to do anyway. The bottom line is that it gave us a significant boost in performance, for very little additional work.

We are using Spring, JPA/EJB3, and Wicket. After some investigation, Ehcache seemed like the best choice because it's popular, it's free and it's very well supported.

We only had time for the absolutely minimal implementation. Fortunately, all we needed to do was add an annotation to the entities we wanted cached, edit persistence.xml, and add ehcache.xml. We didn't even have to add ehcache as a Maven dependency because Hibernate's EJB3 implementation (hibernate-entitymanager) was already depending on it.

src/main/java/com/my/Foo.java

...
@Entity
@Cache(usage=CacheConcurrencyStrategy.NONSTRICT_READ_WRITE)
public class Foo implements Serializable {
...

We are using NONSTRICT_READ_WRITE as our strategy but to be frank, we copied this from an example and it seems to work fine.

src/main/resources/META-INF/persistence.xml

<?xml version="1.0" encoding="UTF-8"?>
<persistence version="1.0"
 xmlns="http://java.sun.com/xml/ns/persistence" 
 xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
 xsi:schemaLocation="http://java.sun.com/xml/ns/persistence http://java.sun.com/xml/ns/persistence/persistence_1_0.xsd">

 <persistence-unit name="default" transaction-type="RESOURCE_LOCAL">
 
  <properties>
...

   <!-- 2nd level cache -->
   <property name="hibernate.cache.provider_class"
    value="net.sf.ehcache.hibernate.SingletonEhCacheProvider" />
   <property name="net.sf.ehcache.configurationResourceName"
    value="/ehcache.xml" />
   <property name="hibernate.cache.use_query_cache" value="true" />
   <property name="hibernate.cache.use_second_level_cache"
    value="true" />
   <property name="hibernate.generate_statistics" value="true" />

  </properties>
 </persistence-unit>
</persistence>

The key piece of information here is that we are using SingletonEhCacheProvider. If you don't do this, you'll get new instances of your entities when cached versions are what you really want.

src/main/resources/ehcache.xml

<ehcache>

    <diskStore path="java.io.tmpdir"/>

    <defaultCache
            maxElementsInMemory="10000"
            eternal="false"
            timeToIdleSeconds="120"
            timeToLiveSeconds="120"
            overflowToDisk="true"
            diskPersistent="false"
            diskExpiryThreadIntervalSeconds="120"
            memoryStoreEvictionPolicy="LRU"/>

     <cache name="com.my.Foo"
           maxElementsInMemory="1000"/>

</ehcache>

We used the defaults for all the settings. You have to enumerate all the entities you want cached in ehcache.xml. And that's it!

Wicket and Default Focus Behavior

2009-01-29T16:10:00.000-08:00

This seems to come up a lot: "Is there a behavior (or some other way) for having a field receive the focus when the page loads? For instance, in a login form, you'd want the focus to go to the username field". I've solved this a couple of different ways before, but when I found James Carman's tip I realized I already had a convenient place to automatically enable this behavior for every form in my Wicket app.

I'm already using Alastair Maw's technique for attaching error messages to form fields. This visits all form components and attaches an error behavior to each one. This would be another behavior that would just be attached to the first editable form field. Turns out it works really well. I decided I only wanted to set focus on a text field or a dropdown, but you can decide for yourself.

public class ShinyFormVisitor implements IVisitor, Serializable
{
 private static final long serialVersionUID = 9060018214520265174L;
 private final Set<FormComponent> visited = new HashSet<FormComponent>();
 private boolean found = false;

 public Object component(Component c)
 {
  if (!visited.contains(c) && c instanceof FormComponent && !(c instanceof Button))
  {
   final FormComponent fc = (FormComponent) c;
   visited.add(fc);
   fc.add(new ValidationMsgBehavior());
   fc.add(new ErrorHighlightBehavior());
   if (!found && fc.isEnabled() && fc.isVisible() && (fc instanceof DropDownChoice || fc instanceof AbstractTextComponent))
   {
    found = true;
    fc.add(new DefaultFocusBehavior());
   }
  }
  return IVisitor.CONTINUE_TRAVERSAL;
 }
}

In the above, a DefaultFocusBehavior is attached to the first form field of the right type. Now for DefaultFocusBehavior itself:

/**
* @see http://www.nabble.com/Default-Focus-Behavior--td15934889.html
*/
public class DefaultFocusBehavior extends AbstractBehavior
{
 private static final long serialVersionUID = -4891399118136854774L;

 private Component component;

 @Override
 public void bind(Component component)
 {
  if (!(component instanceof FormComponent))
  {
   throw new IllegalArgumentException("DefaultFocusBehavior: component must be instanceof FormComponent");
  }
  this.component = component;
  component.setOutputMarkupId(true);
 }

 @Override
 public void renderHead(IHeaderResponse iHeaderResponse)
 {
  super.renderHead(iHeaderResponse);
  iHeaderResponse.renderOnLoadJavascript("document.getElementById('"
    + component.getMarkupId() + "').focus();");
 }
}

Using Wicket with Spring 2.5 annotations

2008-12-03T09:52:00.000-08:00

We upgraded to Spring 2.5 and wanted to make use of the latest annotations in conjunction with JPA and Wicket's @SpringBean annotation. We are using Wicket 1.3.4 as of this writing. I felt it's worth blogging about, because even though it looks straightforward, there was pain and suffering required to get to what you see below.

Starting from the Wicket end, here's what we wanted to end up with. The middleware team created an API for the GUI to use.

MyBasePage.java

...
public class MyBasePage extends WebPage {
...
 @SpringBean(name="myApiImpl")
 private MyAPI myApi;
...

For a component like a Wicket page, this is all you need to do to get access to the spring bean. It will be automatically injected for you, provided everything is set up correctly (more on this below). Note the name attribute, which we found was necessary. It's the name of the API implementation class, with the first letter in lowercase.

For a non-component class like a data provider, you need to add a line to the constructor:

MyDataProvider.java

...
public class MyDataProvider extends SortableDataProvider {
...
 @SpringBean(name="myApiImpl")
 private MyAPI myApi;

 public MyDataProvider()
 {
  ...
  // Injects the spring bean(s)
  InjectorHolder.getInjector().inject(this);
 }
...

Your Wicket application class needs to add a spring component instantiation listener:

MyApplication.java

...
public class MyApplication extends WebApplication {
...
 private static final String[] appContexts = {"applicationContext.xml"};
 
 @Override
 protected void init()
 {
...
  final ApplicationContext ctx = new ClassPathXmlApplicationContext(
    appContexts);
  addComponentInstantiationListener(new SpringComponentInjector(this, ctx));
 }
...

Your web.xml has to have a JPA OpenEntityManagerInViewFilter and a Spring ContextLoaderListener:

web.xml

<?xml version="1.0" encoding="UTF-8"?>
<web-app ...>
 <context-param>
  <param-name>contextConfigLocation</param-name>
  <param-value>classpath:applicationContext.xml</param-value>
 </context-param>

 <filter>
  <filter-name>openEntityManagerInViewFilter</filter-name>
  <filter-class>
   org.springframework.orm.jpa.support.OpenEntityManagerInViewFilter
  </filter-class>
 </filter>

 <filter-mapping>
  <filter-name>openEntityManagerInViewFilter</filter-name>
  <url-pattern>/*</url-pattern>
 </filter-mapping>

 <listener>
  <listener-class>
   org.springframework.web.context.ContextLoaderListener
  </listener-class>
 </listener>
...
</web-app>

Now on to the middleware. Our API implementation has the @Service annotation, which designates it as a Spring service component. As far as I can tell, there's nothing too special about being a service component versus just an @Component, except that it makes it more readable. I think if you're using Spring Web Flow, it has more meaning. Note the injection of our DAO using the @Resource annotation:

MyApiImpl.java

...
@Service
public class MyApiImpl implements MyAPI, Serializable {
...
 @Resource private MyDao dao;
...

The DAO implementation has the @Repository annotation, which designates it as a Spring DAO component, which does have some meaning in that it does exception translation from ugly JDBC exceptions to better Spring exceptions. Note we found we had to inject an extended PersistenceContext. This is not thread safe, but we haven't had any problems with it. We made the methods that persist data transactional using @Transactional. I've included one of them as an example. The generic objects with type T are persistent objects that are annotated with @Entity.

MyDaoImpl.java

...
@Repository
public class MyDaoImpl implements MyDao {
...
 private EntityManager entityManager;
...
 @PersistenceContext(type = PersistenceContextType.EXTENDED)
 public void setEntityManager(final EntityManager entityManager)
 {
  this.entityManager = entityManager;
 }
...
 @Transactional
 public  void saveObject(final T t) {
  try {
   entityManager.persist(t);
   entityManager.flush();
  }
  catch (Exception e) {
...
  }
 }
...

Finally, our Spring application context is quite small because most of what it does is enable all the annotations. The JPA persistence.xml file is quite standard and therefore not shown.

applicationContext.xml

<?xml version="1.0" encoding="UTF-8"?>
<beans xmlns="http://www.springframework.org/schema/beans" ...>

    <bean id="entityManagerFactory" class="org.springframework.orm.jpa.LocalEntityManagerFactoryBean">
 <property name="persistenceUnitName" value="MYPERSISTENCEUNIT"/>
    </bean>

    <!-- For @Transactional -->
    <tx:annotation-driven transaction-manager="txManager" />

    <!-- For @PersistenceContext -->
    <bean class="org.springframework.orm.jpa.support.PersistenceAnnotationBeanPostProcessor" />
    <!-- Translates native resource exceptions to Spring's 
  DataAccessException hierarchy -->
    <bean class="org.springframework.dao.annotation.PersistenceExceptionTranslationPostProcessor"/>
    <!-- For JSR-250 annotations such as @Resource -->
    <bean class="org.springframework.context.annotation.CommonAnnotationBeanPostProcessor"/>

    <bean id="txManager" class="org.springframework.orm.jpa.JpaTransactionManager">
        <property name="entityManagerFactory" ref="entityManagerFactory"/>
        <property name="dataSource" ref="dataSource"/>
    </bean>

    <bean id="dataSource" class="org.apache.commons.dbcp.BasicDataSource">
        <!-- The usual properties -->
    </bean>
 
    <!-- Registers Spring's standard post-processors for annotation-based
  configuration like @Repository -->
    <context:annotation-config />
    <!-- From this package on down is what Spring will scan for its 
  annotations like @Repository -->
    <context:component-scan base-package="com.my"/>

</beans>

Installing Archiva

2008-11-21T16:10:00.000-08:00

Archiva is an open-source proxy for Maven. It allows you to create an internal repository for your company that you can back up or check in, and makes downloads of dependencies much faster. This is how I installed it.

As of the time of writing, the current version is 1.1.3. Using a browser, I first downloaded the WAR distribution to a CentOS box. I tried to deploy it in tomcat 6.0.18, first running under the default version of java, which was 5, then under java 1.6.0_10. Unfortunately, despite following all the tomcat-specific instructions, it wouldn't run, so I downloaded the standalone distribution instead.

I couldn't run the standalone distribution either, until I installed java 6. To uninstall the default jdk:

$ yum remove java

I downloaded and ran jdk-6u10-linux-i586-rpm.bin from java.sun.com. This installs Java 6.

Having downloaded apache-archiva-1.1.3-bin.zip (the standalone distribution), I unzipped it to /opt, then ran /opt/apache-archiva-1.1.3/bin/archiva.

In our case, we created the DNS name "repo" for the box. So the app was visible at http://repo:8080/archiva/.

I then needed to point my maven builds at the new repository. On my development machine, I created settings.xml (see below) in <maven home>, which in my case is ~/.m2. This tells maven to use our internal repo as the proxy for all downloaded artifacts (the line <mirrorOf>*</mirrorOf>). This can be changed to limit the set of artifacts for which you want to use archiva.

<settings>
<mirrors>
<mirror>
<id>archiva.default</id>
<url>http://repo:8080/archiva/repository/internal</url>
<mirrorOf>*</mirrorOf>
</mirror>
</mirrors>
</settings>

To prime the archiva repository, I removed everything in my local repository (~/.m2/repository) and did a clean build. Archiva automatically downloads and stores the artifacts in /opt/apache-archiva-1.1.3/data/repositories/internal, which you can back up, or check in, if you are paranoid about such things. You can then browse to see what was downloaded at http://repo:8080/archiva/browse.

I then provided all our developers with the settings.xml file, and I was done. Note: you can forgo settings.xml and instead put the same info in your pom.xml files, but this way the pom.xml files are more portable and isolated from the corporate repository.

Migration to Spring

2008-06-23T16:30:00.000-07:00

We've decided to migrate to Spring. We are already using Hibernate, but want to improve our server architecture to use Dependency Injection. Why am I blogging about this when so much has been written about it? Believe it or not, a lot of Java shops still haven't migrated their apps to Spring, but are thinking about it, and the more recipes there are out there, the easier it is for people to do.

Why Spring and not EJB3? The differences are minimal for the features we care about. For example, we are fine with using XML configuration for dependency injection instead of EJB3-style annotations. We do not use stateful session beans, which seems to be one of the few EJB features that Spring does not support.

The benefits we believe we will get are:

Loosely-coupled objects

Simpler transaction code

Less dependency on JBoss

Loosely-coupled objects

Before we embarked on this migration, we already had a pretty good architecture based on the DAO/DTO pattern, and a facade that insulates our presentation layer from the server's implementation. The most compelling reason to use Dependency Injection, other than it incrementally improves our architecture and our flexibility, is that it makes our code much easier to test. You can now test one component in isolation from all the others on which it doesn't depend. Before this change, when you ran a single unit test, the test would pull in the whole code base. In fact, before this change, you had to deploy the entire code base to the app server to test a single method. Now you can run (and debug!) a single method in a unit test in the IDE.

An example of incremental improvement is that all of our DAO objects are created by factory classes. Spring allows us to get rid of all the factory code altogether. While it's not a lot of code, every line of code has a maintainence cost. Until the advent of technologies like Spring, it was quite a bit of work to create a truly loosely-coupled architecture. At some point I would inevitably find myself creating an implementation in code, thereby creating coupling. Spring solves the problem once and for all, allowing you to properly program to interfaces rather than implementations. Loose coupling is one of those best practices that has more benefits down the line than initially meets the eye.

Simpler transaction code

One of Spring's advantages is the reduction of the amount of code you have to write and maintain. In the case of transactions, you can get rid of all the code that obtains a Hibernate session, starts a transaction, and rolls it back for each type of error that's encountered. The code is instead replaced by (at a minimum) one annotation per DAO class. Another significant benefit is that Spring automatically rolls back transactions in the event of an exception, unless you tell it otherwise. It also takes care of closing the session. Both of these features reduce two common causes of bugs.

Less dependency on JBoss

One of Spring's advantages is that you need not depend on an application server to provide EJB services. In fact, by using Spring and Hibernate, you can dispense altogether with the traditional EJB container. Also, we have certain partners that prefer we use a different app server than JBoss. While JBoss and other app servers have implemented Spring and Hibernate's pioneering ideas in the form of EJB3, we would rather take the initial step of switching to Spring before going all the way to EJB3.

How we did it

Slow start

The first question was how to inject the Spring-instantiated singleton beans into our existing code without requiring major surgery. We wanted to ease into Spring, and not have to take a year to rewrite our entire code base. In my past experience, I added a context loader listener to the web application, then accessing the web application context from a servlet. In our case, the server code is packaged in an EAR file, and the presentation layer is in separate application, packaged in a separate WAR file. We wanted to keep any knowledge that Spring is even being used out of the presentation layer code. So we ended up creating a bean lookup class called SpringContextLoader, which has static getters for all the beans. This was a good way to get started, because any call like:

FooFactory.getFooInstance()

could be search-and-replaced with

SpringContextLoader.getFooInstance()

But over time we changed as many of these as possible to use dependency injection. The nice thing was that it didn't all have to be done at once.

SpringContextLoader itself gets a handle to the Spring application context as follows:

package com.my.server.spring;

public class SpringContextLoader
{
 private static ApplicationContext ctx;
 public static ApplicationContext getApplicationContext()
 {
   if (ctx == null)
   {
  ctx = new ClassPathXmlApplicationContext(
   "com/my/server/spring/applicationContext.xml");
   }
   return ctx;
 }
 ...

All that is required is to colocate the Spring configuration file, applicationContext.xml, next to SpringContextLoader.java. The webapp didn't need to even be told that Spring was being used. In our case, all our services are started by a JMX bean, so we changed the first line of the "start" method of this bean to call:

 SpringContextLoader.getApplicationContext()

This takes care of instantiating the Spring beans before they are used.

The GUI code also uses the SpringContextLoader to get at the beans that it needs. At some point I would like to replace this with EJB3 annotation-based injection.

Transactions

I won't go over the contents of applicationContext.xml that relate to dependency injection, since it's covered so well in many other places. But I will do so when it comes to transactions.

To move from coding Hibernate sessions directly to using Spring's Hibernate support and Spring transactions, this is the pattern we started with:

public class FooDAOImpl implements FooDAO {
   public void saveFoo(Foo foo) throws MyFooException {
       try {
           Context ctx = new InitialContext();
           SessionFactory sessionFactory =
           (SessionFactory) ctx.lookup("java:/hibernate/SessionFactory");
           Session session = sessionFactory.openSession();
           Transaction tx = session.beginTransaction();
           fooDTO = new FooDTO(foo);
           session.save(fooDTO);
           tx.commit();
       } catch (Exception e) {
           tx.rollback();
           throw MyFooException(e);
       } finally {
           if (session != null && session.isOpen()) {
           session.close();
       }
   }
}

This is the pattern we ended with:

public class FooDAOImpl extends HibernateDaoSupport implements FooDAO {
   @Transactional(rollbackFor={MyFooException.class})
   public void saveFoo(Foo foo) throws MyFooException {
       try {
           FooDTO fooDTO = new FooDTO(foo);
           getHibernateTemplate().save(fooDTO);
       } catch (Exception e) {
           throw MyFooException(e);
       }
   }
}

The application context

As you can see, there's a lot less code. To achieve it, here's what needed to go in applicationContext.xml. We obtain the session factory from JNDI, but in your case you may do it differently. The session factory also takes care of resolving all the hibernate mapping files (not shown):

<beans xmlns="http://www.springframework.org/schema/beans"
 xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
 xmlns:tx="http://www.springframework.org/schema/tx"
 xsi:schemaLocation="http://www.springframework.org/schema/beans
        http://www.springframework.org/schema/beans/spring-beans-2.0.xsd
        http://www.springframework.org/schema/aop
        http://www.springframework.org/schema/aop/spring-aop-2.0.xsd
        http://www.springframework.org/schema/tx
        http://www.springframework.org/schema/tx/spring-tx-2.0.xsd">

<!-- Spring/Hibernate Session Factory (obtained from JDNI) -->
<bean id="sessionFactory"
class="org.springframework.jndi.JndiObjectFactoryBean">
   <property name="jndiName">
       <value>java:/hibernate/SessionFactory</value>
   </property>
</bean>
<!-- Spring/Hibernate Transaction Support (in our case, JTA provided by JBoss) -->
<bean id="txManager"
   class="org.springframework.transaction.jta.JtaTransactionManager">
       <property name="userTransactionName">
           <value>UserTransaction</value>
       </property>
       <property name="transactionManagerName" value="java:/TransactionManager"></property>
</bean>
<!-- Spring/Hibernate Template -->
<bean id="hibernateTemplate"
   class="org.springframework.orm.hibernate3.HibernateTemplate">
   <property name="sessionFactory">
       <ref bean="sessionFactory" />
   </property>
</bean>
<!-- This is a bean post processor.
It gets a chance to look at every bean in this file as it is created.
If the bean contains the @Transactional annotation,
a transactional proxy is automatically created to wrap it.
 -->
<tx:annotation-driven transaction-manager="txManager" />
 
<!-- Bean definitions start here -->

Problems

Session was already closed

We ran into the dreaded "org.hibernate.SessionException: Session was already closed" quite a bit. The problem appears to happen when static singletons that were not instantiated by Spring attempted to access Spring beans during the initialization process.

The solution to most of these was to delay all such accesses till after initialization occurred, typically by lazily accessing the beans the first time they are needed instead of in the singleton's constructors.

But this did not solve all of the cases. The source of the rest turned out to be that we were mixing transaction managers. We were using the Hibernate transaction manager in Spring, while the rest of the code was using the JTA transaction manager that was configured in the JBoss setup. We changed the following:

<bean id="txManager"
 class="org.springframework.orm.hibernate3.HibernateTransactionManager">
 <property name="sessionFactory" ref="sessionFactory" />
</bean>

To:

<bean id="txManager"
 class="org.springframework.transaction.jta.JtaTransactionManager">
 <property name="userTransactionName">
   <value>UserTransaction</value>
 </property>
 <property name="transactionManagerName" value="java:/TransactionManager"></property>
</bean>

Proxy problems

Another thing that took a while to understand was "org.springframework.beans.TypeMismatchException: Failed to convert property value of type [$ProxyNN] to required type Foo". This happens because we are using AOP autoproxying: Spring creates a subclass at runtime called a proxy that contains the additional transactional code. It turns out there are two ways in which proxies can be created: JDK dynamic proxies, which works with interfaces, the other one utilizes CGLib and is based on concrete classes (you can read more on this here). Even though we include cglib.jar in our deployment, for some reason there are cases where Spring could not instantiate a proxied subclass of a concrete class like Foo. The solution was to create an interface IFoo, and change the code to operate on IFoo instead of Foo. This is better practice anyway and it solved the problem.

Could not unbind factory from JNDI

Another type of exception we got was related to resolving a JNDI name when creating the Hibernate session factory:

[SessionFactoryObjectFactory] Could not unbind factory from JNDI
 javax.naming.NoInitialContextException:
 Need to specify class name in environment or system property,
 or as an applet parameter, or in an application resource file:
 java.naming.factory.initial
 at javax.naming.spi.NamingManager.getInitialContext()

It turned out to be an unnecessary attribute in our hibernate.cfg.xml file:

<session-factory name="TestSessionFactory">

Needed to be changed to:

<session-factory>

There is no need to specify a session factory in hibernate.cfg.xml since it's already supplied by Spring.

Spawning a thread for a lengthy operation in Wicket

2008-04-17T15:49:00.000-07:00

Sometimes you need to do time-consuming tasks and for whatever reason, you cannot perform that operation using Ajax. I needed to support the upload of files that could potentially take a long time, and since the file upload field in Wicket doesn't support Ajax, it got me thinking of a generic way to do this. Note that although I applied this technique to a file upload, it can be used for anything.

What I came up with was a page that shows a message to the user that the lengthy operation is occurring (in the form of a spinner/wait icon and some text), and when the operation completes the spinner is hidden and the message changes. The lengthy operation itself happens in a separate thread.

If the user leaves the page while the operation is running and then returns, he will see the busy message, and the form fields are disabled. If he returns to the page after the operation completes, he sees the normal page, that is, he can start another operation if he likes.

This is a summary of what I needed this page to do:

Don't run the operation using Ajax; instead start a background thread

Allow users to leave the page, perform other tasks, then return to see if the operation has completed

Display a spinner and a message during the operation, and use Ajax to hide the spinner and change the message when the operation completes

Disable the form fields while the operation is running to prevent the user from running another operation in parallel

The solution consists of the UploadPage.java that spawns the thread that performs the operation, and MySession.java that saves the state of the operation in the session:

UploadPage.java

package wicket.quickstart;

import java.io.IOException;
import java.io.InputStream;

import org.apache.wicket.AttributeModifier;
import org.apache.wicket.ajax.AjaxSelfUpdatingTimerBehavior;
import org.apache.wicket.behavior.HeaderContributor;
import org.apache.wicket.markup.html.WebMarkupContainer;
import org.apache.wicket.markup.html.WebPage;
import org.apache.wicket.markup.html.basic.Label;
import org.apache.wicket.markup.html.form.Button;
import org.apache.wicket.markup.html.form.Form;
import org.apache.wicket.markup.html.form.upload.FileUpload;
import org.apache.wicket.markup.html.form.upload.FileUploadField;
import org.apache.wicket.model.AbstractReadOnlyModel;
import org.apache.wicket.model.PropertyModel;
import org.apache.wicket.util.time.Duration;

public class UploadPage extends WebPage
{
  private static final long serialVersionUID = 4692700450356316897L;

  /**
   * Transient because no need to serialize
   */
  private transient FileUpload uploadFile;

  public UploadPage()
  {
    add(HeaderContributor.forCss(UploadPage.class, "UploadPage.css"));

    // Reset the completion flag. It's used to display a message that is
    // only displayed once in the status label, using ajax when the upload
    // is complete. When the user visits the page again, we don't want to
    // display this message.
    getMySession().setUploadComplete(false);

    final WebMarkupContainer spinner = new WebMarkupContainer("spinner");
    // This AttributeModifier is used to hide the spinner when the upload is
    // finished.
    final AttributeModifier am = new AttributeModifier("style", true,
        new AbstractReadOnlyModel()
        {
          private static final long serialVersionUID = 2013912742253160111L;

          public Object getObject()
          {
            return (getMySession().isUploading()) ? ""
                : "display:none";
          }
        });
    spinner.add(am);
    spinner.add(new AjaxSelfUpdatingTimerBehavior(Duration.seconds(5)));
    add(spinner);

    final Label status = new Label("uploadstatus",
        new AbstractReadOnlyModel()
        {
          private static final long serialVersionUID = 938943178761943953L;

          @Override
          public Object getObject()
          {
            if (getMySession().isUploading())
            {
              return getString("uploading");
            }
            else if (getMySession().isUploadComplete())
            {
              return getString("uploadcomplete");
            }
            else
            {
              return "";
            }
          }
        });
    status.add(new AjaxSelfUpdatingTimerBehavior(Duration.seconds(5)));
    add(status);

    final Form myform = new Form("myform");

    final FileUploadField uploadField = new FileUploadField("uploadFile",
        new PropertyModel(this, "uploadFile"));
    uploadField.setEnabled(!getMySession().isUploading());
    myform.add(uploadField);

    final Button cancel = new Button("cancel")
    {
      private static final long serialVersionUID = 691332069442892669L;

      @Override
      public void onSubmit()
      {
        setResponsePage(HomePage.class);
      }
    };
    cancel.setEnabled(!getMySession().isUploading());
    myform.add(cancel);

    final Button ok = new Button("ok")
    {
      private static final long serialVersionUID = -590104379892310699L;

      @Override
      public void onSubmit()
      {
        if (getMySession().isUploading())
          return;
        // Start a thread that will continue running even if the user
        // goes to another page.
        final ImportThread it = new ImportThread(getMySession(),
            uploadFile);
        it.start();
        // Refresh the page in order to disable the form field and
        // buttons.
        setResponsePage(UploadPage.class);
      }
    };
    ok.setEnabled(!getMySession().isUploading());
    myform.add(ok);

    add(myform);
  }

  public FileUpload getImportFile()
  {
    return uploadFile;
  }

  public void setImportFile(FileUpload uploadFile)
  {
    this.uploadFile = uploadFile;
  }

  /** This class does the actual uploading */
  private static class ImportThread extends Thread
  {
    private final MySession session;
    private final FileUpload uploadFile;

    public ImportThread(MySession session, FileUpload uploadFile)
    {
      this.session = session;
      this.uploadFile = uploadFile;
    }

    @SuppressWarnings("static-access")
    public void run()
    {
      session.setIsUploading(true);
      try
      {
        @SuppressWarnings("unused")
        final InputStream in = uploadFile.getInputStream();
        // Do something with input stream here...
        // Sleep to simulate time-consuming work
        Thread.sleep(10000);
        session.setUploadComplete(true);
      }
      catch (IOException e)
      {
        session.error(e.getMessage());
      }
      catch (InterruptedException e)
      {
        session.error(e.getMessage());
      }
      finally
      {
        session.setIsUploading(false);
      }
    }
  }

  public MySession getMySession()
  {
    return (MySession) getSession();
  }
}

UploadPage.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
       xmlns:wicket="http://wicket.sourceforge.net/" xml:lang="en"
       lang="en">
<body>
     <p><wicket:link><a href="HomePage.html">Home</a></wicket:link></p>
 <div class="spinner" wicket:id="spinner">&nbsp;</div>
     <div class="uploadstatus">
         <span wicket:id="uploadstatus">[Importing]</span>
     </div>
     <div class="uploadform">
     <form wicket:id="myform">
       <table>
       <tr>
       <td>File:</td><td><input type="file" wicket:id="uploadFile" /></td>
       </tr>
       <tr>
       <td><input type="submit" wicket:id="ok" value="OK" /></td>
       <td><input type="submit" wicket:id="cancel" value="Cancel" /></td>
       </tr>
       </table>
     </form>
     </div>
</body>
</html>

UploadPage.css

div.spinner {
   float: left;
   margin-left: 15px;
   margin-bottom: 15px;
   padding-left: 16px;
   background-image:url(/app/resources/org.apache.wicket.ajax.AbstractDefaultAjaxBehavior/indicator.gif);
   background-repeat: no-repeat;
   width: 16;
   height: 16;
   background-color: transparent;
}


div.uploadstatus {
   float: left;
   margin-left: 20px;
   margin-bottom: 15px;
   width: 90%;
}

div.uploadform {
   float: left;
   width: 100%;
}

UploadPage.properties

uploading=Uploading file, please wait...
uploadcomplete=File upload is complete.

MySession.java

package wicket.quickstart;

import org.apache.wicket.Request;
import org.apache.wicket.protocol.http.WebSession;

public final class MySession extends WebSession
{
  private static final long serialVersionUID = 159108722454986819L;

  /** Tracks the status of the lengthy process of uploading. 
   * These are declared volatile to make sure the JVM writes the value
   * of the flag from the ImportThread to the Wicket thread.
   */
  private volatile boolean uploading, uploadComplete;

  protected MySession(Request req)
  {
    super(req);
  }

  public boolean isUploading()
  {
    return uploading;
  }

  /**
   * Set when the upload thread starts, and reset when the upload ends or
   * fails.
   */
  public void setIsUploading(boolean uploading)
  {
    this.uploading = uploading;
  }

  public boolean isUploadComplete()
  {
    return uploadComplete;
  }

  /**
   * Set when the upload thread succeeds, and reset when the upload page is
   * reloaded.
   */
  public void setUploadComplete(boolean uploadComplete)
  {
    this.uploadComplete = uploadComplete;
  }
}

An Ajax Button with an Overlay Div and Wait Indicator

2008-03-19T16:33:00.000-07:00

I needed an Ajax button that disables the web page and displays a spinner (a.k.a. wait indicator, working indicator, wait icon, hourglass) while working. The disabling is done by superimposing a div over the entire visible part of the page that has a 50% alpha blending value.

This example uses existing Wicket 1.3.0, but is probably backwards compatible. It's been tested on Firefox and Internet Explorer.

The code was inspired by the Veil component by Igor Vaynberg in wicketstuff-minis. My goal was to make this as minimal as possible to provide a skeleton you can build upon. Igor's component is more general and more capable, but I needed a point solution.

First, an example of how to use it:

HomePage.java

package wicket.quickstart;


import org.apache.wicket.ajax.AjaxRequestTarget;
import org.apache.wicket.markup.html.WebPage;
import org.apache.wicket.markup.html.basic.Label;
import org.apache.wicket.markup.html.form.Form;
import org.apache.wicket.model.Model;
import org.apache.wicket.model.PropertyModel;


public class HomePage extends WebPage
{
 private static final long serialVersionUID = 1L;

 private int counter;

 public HomePage()
 {
  final Label counterLabel = new Label("counter", new PropertyModel(this,
    "counter"));
  counterLabel.setOutputMarkupId(true);
  add(counterLabel);

  final Form myform = new Form("myform");
  myform.add(new MyAjaxButton("button", new Model("Test"), "mybody")
  {
   private static final long serialVersionUID = 1L;

   @Override
   protected void onSubmit(AjaxRequestTarget target, Form form)
   {
    try
    {
     // Add some delay to demonstrate the effect
     Thread.sleep(1000);
    }
    catch (InterruptedException e)
    {
     // Ignore
    }
    // Update the counter label
    counter++;
    target.addComponent(counterLabel);
   }
  });
  add(myform);
 }

 public int getCounter()
 {
  return counter;
 }
}

HomePage.html

<?xml version="1.0"?>
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:wicket="http://wicket.sourceforge.net/" xml:lang="en"
lang="en">
  <head>
    <title>Wicket Quickstart Archetype Homepage</title>
  </head>

  <body id="mybody">
      <strong>Wicket Quickstart Archetype Homepage</strong>

      <p>Counter: 
      <span wicket:id="counter">counter value</span>
      </p>

      <form wicket:id="myform">
        <input type="submit" wicket:id="button" />
      </form>
  </body>
</html>

Now the code for MyAjaxButton. This is the class that implements the mask:

MyAjaxButton.java

package wicket.quickstart;

import org.apache.wicket.ResourceReference;
import org.apache.wicket.ajax.IAjaxCallDecorator;
import org.apache.wicket.ajax.markup.html.form.AjaxButton;
import org.apache.wicket.behavior.HeaderContributor;
import org.apache.wicket.markup.html.resources.JavascriptResourceReference;
import org.apache.wicket.model.IModel;

/**
 * Superclass for all Ajax buttons that display a mask over the whole
 * page and a spinner on top of that.
 * 
 * @author jsinai
 */
public abstract class MyAjaxButton extends AjaxButton
{
 private static final ResourceReference JS = new JavascriptResourceReference(
   MyAjaxButton.class, "MyAjaxButton.js");
 private static final ResourceReference CSS = new ResourceReference(
   MyAjaxButton.class, "MyAjaxButton.css");

 private final String markupId;
 
 public MyAjaxButton(String id, IModel m, String markupId)
 {
  super(id, null);
  this.setModel(m);
  this.markupId = markupId;
  add(HeaderContributor.forJavaScript(JS));
  add(HeaderContributor.forCss(CSS));
 }

 /**
  * The call decorator is what displays the mask and spinner
  */
 @Override
 protected IAjaxCallDecorator getAjaxCallDecorator()
 {
  return new IAjaxCallDecorator()
  {
   private static final long serialVersionUID = 1L;

   public CharSequence decorateScript(CharSequence script)
   {
    return "Mask.show('" + markupId + "');" + script;
   }
   public CharSequence decorateOnFailureScript(CharSequence script)
   {
    return "Mask.hide('" + markupId + "');" + script;
   }
   public CharSequence decorateOnSuccessScript(CharSequence script)
   {
    return "Mask.hide('" + markupId + "');" + script;
   }
  };
 }
}

The Javascript for the button implements the masking behavior:

MyAjaxButton.js

/**
 Inspired by the Veil component by Igor Vaynberg in wicketstuff-minis
 http://wicketstuff.org/confluence/display/STUFFWIKI/wicketstuff-minis
 wicketstuff-minis is released under the Apache 2 License
 http://apache.org/licenses/LICENSE-2.0.html 
*/
Mask = { };
 
/**
 Shows a mask and a spinner over the element with the specified id
*/
Mask.show = function(targetId)
{
  var target=document.getElementById(targetId);
  var mask=document.createElement("div");
  mask.innerHTML="&nbsp;";
  mask.className="wicket-mask";
  mask.style.cursor="not-allowed";
  mask.style.zIndex="5000";
  mask.id="wicket_mask_"+targetId;
  document.body.appendChild(mask);
  Mask.offsetMask(mask);

  var spinner=document.createElement("div");
  spinner.innerHTML="&nbsp;";
  spinner.className="wicket-spinner";
  spinner.style.cursor="not-allowed";
  spinner.style.zIndex="6000";
  spinner.id="wicket_spinner_"+targetId;
  document.body.appendChild(spinner);
  Mask.centerSpinner(spinner);
}

/**
 Hides the mask and spinner
*/
Mask.hide = function(targetId)
{
  var mask=document.getElementById("wicket_mask_"+targetId);
  if (mask!=null) {
   mask.style.display="none";
   document.body.removeChild(mask);
  }
  var spinner=document.getElementById("wicket_spinner_"+targetId);
  if (spinner!=null) {
   spinner.style.display="none";
   document.body.removeChild(spinner);
  }
}

/**
 * Places the spinner at the center of the viewport.
 */ 
Mask.centerSpinner = function(spinner)
{
  var width = document.body.clientWidth;
  var height = document.body.clientHeight;
  
  var offsetX =   document.body.scrollLeft;
  var offsetY =  document.body.scrollTop;
  
  var left = (width / 2) - 24 + offsetX;
  var top = (height / 2) - 24 + offsetY;
  
  spinner.style.left = left + "px";
  spinner.style.top = top + "px";
}
 
/**
 * Offsets the mask to the scroll position.
 */ 
Mask.offsetMask = function(mask)
{
  var offsetX =   document.body.scrollLeft;
  var offsetY =  document.body.scrollTop;
  
  mask.style.left = offsetX + "px";
  mask.style.top = offsetY + "px";
}

The CSS determines the alpha blending and size of the mask, and which spinner we are using:

MyAjaxButton.css

/**
 Inspired by the Veil component by Igor Vaynberg in wicketstuff-minis
 http://wicketstuff.org/confluence/display/STUFFWIKI/wicketstuff-minis
 wicketstuff-minis is released under the Apache 2 License
 http://apache.org/licenses/LICENSE-2.0.html 
*/
div.wicket-mask {
 position:absolute;top:0;left:0;
 width:100%;height:100%;
 background:rgb(230,230,230);
 opacity:.50;
 filter:alpha(opacity=50);
 -moz-opacity:0.5;
 text-decoration:none;
}
div.wicket-spinner {
 position:absolute;
 background-image:url(/app/resources/org.apache.wicket.ajax.AbstractDefaultAjaxBehavior/indicator.gif);
 background-repeat: no-repeat;
 width: 16;
 height: 16;
 background-color: transparent;
}

A simple context-sensitive help system using Wicket (redux)

2008-02-05T12:39:00.000-08:00

In this post, I showed a simple context-sensitive online help system using Wicket. I wanted to enhance this capability to support these features:

Load arbitrary html files without requiring an associated Wicket class
Support anchors within html files
Supply the names of the html files and anchors in properties files
Support internationalised help
Pop up the help in an external window, enabling the user to keep working in the main browser window
Reuse the same help window every time the user clicks a help button
Use an image button for the help link
Supply internationalized alt text for the help button
Automatically make the help button invisible if no help file name is supplied

I am using Wicket 1.3.0, but it should work for prior releases too.

Example

First, an example of how to use it:

MyWebPage.java

...
 add(new HelpButtonPanel("help"));
...

MyWebPage.html

...
   <div wicket:id="help" class="help"></div>
...

MyWebPage.properties

...
# This translates to the URL /doc/MyWebPage.html#
help.filename=MyWebPage
help.anchor=
...

The Implementation

HelpButtonPanel.java

import org.apache.commons.lang.StringUtils;
import org.apache.wicket.AttributeModifier;
import org.apache.wicket.ResourceReference;
import org.apache.wicket.markup.html.image.Image;
import org.apache.wicket.markup.html.link.ExternalLink;
import org.apache.wicket.markup.html.link.PopupSettings;
import org.apache.wicket.markup.html.panel.Panel;
import org.apache.wicket.model.AbstractReadOnlyModel;
import org.apache.wicket.model.IModel;
import org.apache.wicket.model.StringResourceModel;

/**
* A help button that pops up a separate window.
*
* The help is expected to be in the "doc" directory, a sibling to WEB-INF.
*
* The help filename is required, the anchor is optional. These strings go in a
* property file. Do NOT provide the .html extension. Example:
*
* help.filename=foohelpfilename
*
* help.anchor=foohelpanchorname
*
*/
public class HelpButtonPanel extends Panel
{
 private final StringResourceModel helpFilenameModel, anchorModel;

 /**
  * Use this constructor for the main help button on a page. It reads the
  * strings help.filename, help.anchor from the web page properties.
  */
 public HelpButtonPanel(String id)
 {
  this(id, null);
 }

 /**
  * Use this constructor for other help on a page. It reads the strings
  * help.filename, help.anchor from the model you supply.
  */
 public HelpButtonPanel(String id, IModel model)
 {
  super(id);

  if (model == null)
   model = new WebPageModel();

  // Read the strings "help.filename", "help.anchor" from the supplied
  // property model
  helpFilenameModel = new StringResourceModel("help.filename", this,
    model);
  anchorModel = new StringResourceModel("help.anchor", this, model);

  // Create the link to pop up the help
  final HelpLink helplink = new HelpLink("helplink", this,
    helpFilenameModel, anchorModel);
  add(helplink);

  // The help link is an image
  final Image img = new Image("helpimg", new ResourceReference(
    ImageAnchor.class, "help.png"));
  helplink.add(img);

  // Alt text for the image
  final StringResourceModel altModel = new StringResourceModel("help",
    this, null);
  img.add(new AttributeModifier("alt", altModel));
 }

 /** Hide the help button if no help file is supplied. */
 @Override
 protected void onBeforeRender()
 {
  setVisible(!StringUtils.isEmpty(helpFilenameModel.getString()));
  super.onBeforeRender();
 }

 /** A model that reads the help filename from the web page's properties file */
 private class WebPageModel extends AbstractReadOnlyModel
 {
  private static final long serialVersionUID = 6407656031992546286L;

  @Override
  public Object getObject()
  {
   return getWebPage().getModelObject();
  }
 }

 /** A link that pops up an external window containing the help text */
 private static class HelpLink extends ExternalLink
 {
  private static final long serialVersionUID = 4409345256205400217L;

  public HelpLink(String id, HelpButtonPanel parent,
    IModel helpFilenameModel, IModel anchorModel)
  {
   // Format in HelpButtonPanel.properties:
   // /doc/{filename}.html#{anchor}
   super(id, new StringResourceModel("helplink.href", parent, parent
     .getModel(), new Object[]
   { helpFilenameModel, anchorModel }));

   final PopupSettings p = new PopupSettings(PopupSettings.RESIZABLE
     | PopupSettings.SCROLLBARS);
   p.setWidth(400).setHeight(400).setTop(23);
   // Set the window name so we can reuse the same window instance.
   p.setWindowName("HelpWindow");
   setPopupSettings(p);
  }
 }
}

There is a reference above to ImageAnchor. This is a technique I use to load images from a common location. See this post for where I blogged about it.

HelpButtonPanel.html

<html xmlns:wicket>
<wicket:panel>
   <a wicket:id="helplink">
     <img wicket:id="helpimg" alt="Help" border="0" />
   </a>
</wicket:panel>
</html>

At the beginning of this post I said this solution supports internationalised help. How does it do this? Well, since the names of the help files are pulled from properties files, for which there can be one for each locale, the names of the help files can be different for each locale. An enhancement would be to automatically look for all the variations of the filename using locale, style and variation.

A Year of Wicket

2008-01-11T14:46:00.000-08:00

Update: screenshots of this product can be seen at IBM Redbooks. Note: there are many more screens in the application than are shown here. There's quite a bit of Ajax used that isn't evident from the screenshots, such as for page navigation and tabs.

I've been working with Wicket for almost a year. We've just released our first product that uses Wicket for the user interface, and so it seems like a good time to take stock. Unfortunately, it's not a public site, it's an installable enterprise product, so I can't show it to you. If you don't want to read further, here's the executive summary: Wicket rocks!

I was hired as the GUI Architect for this project. I came to it with many years of GUI experience, mostly using Swing, but without a lot of web development experience.

Because of my Java and Swing background, I was drawn to Wicket. It maps fairly closely to the Swing model of development. So does GWT, but when I evaluated it, it seemed so different from other J2EE frameworks that I felt it was a step too far. No HTML, and no WAR files, for example. This made my colleagues nervous, who were used to Struts and PHP. Me too, as a matter of fact.

I had done some pretty serious prototyping for another project with Tapestry, and there were certain things I liked, like runtime bytecode generation. But the learning curve was pretty steep. At one point I needed to create a custom component, and to do so I needed to learn about engine services and other arcane things that I felt made the process too hard. By contrast, custom components are Wicket's bread and butter, and they are very easy to build.

I also took a close look at JSF. It seemed overly complex to me, and not much of a departure from the Struts era. It came across as a technology designed by committee, with the combination of several complementary libraries required to get the job done, and there are still too many configuration files.

So we decided to use Wicket. Luckily, my management and colleagues were open-minded enough to give it a try. The application was a management console for an enterprise application. It did not require high user traffic, so were weren't concerned about what people talk about as the biggest issue with Wicket, namely scalability. We certainly have had no performance problems ourselves.

Right out of the gate I was able to create a framework with Wicket 1.2.6 that my colleagues could fill out, consisting of a navigation tree, a base page, database-driven tables, graphic buttons, page headers, tabbed panels, and a CSS-based look and feel.

One of Wicket's advantages is the strict separation of design from behavior, that is, HTML from code. While we did not have a web designer on the team who built the HTML (the developers did this), and therefore didn't get any mileage from the separation in that sense, we definitely gained from having all the behavior in Java code, because it gave us all the power of refactoring, compile-time error checking, and maximum reusability.

What I mean by maximum reusability is that I could create a component with quite a bit of logic behind it, e.g. a button that disables itself based on various combinations of server state, and all it would take to add it to a page would be <input type="submit" wicket:id="button" /> in the HTML, and new MyButton("button") in the Java code. In other words, it looks no different than adding an ordinary button. I could then change the behavior of MyButton as needed without affecting the HTML. And of course, there are no XML files to worry about keeping up to date, like struts-config.xml.

I made a big effort to encourage reusability on the team, which of course is one of the big reasons to use Wicket. So we made sure there was no cut-and-paste reuse, and instead if a component did not have a necessary feature, I spent the time to add that feature. This paid off in spades later in the project, since if a bug was found or the look and feel needed tweaking, it typically only needed a change in one place. The number of bugs related to errors in the Wicket code was tiny. All the bugs were about the business behavior, that is, misunderstandings between product management and engineering, which is where you want any bugs to be.

We had some unusual requirements, for example, there were some legacy applets that we needed to support because we didn't have the time to convert them to Wicket. It turned out to be easy to get the applets to communicate with the server using Wicket. We also embedded the applet page in a zero-height frame to avoid reloading the applets with each page view. The web pages were displayed in another frame. Again, Wicket was able to support this.

As a result of all this, we actually stayed ahead of our middle tier colleagues for much of the product cycle. I was very pleased with the result.

Observations

Models

Anyone who learns Wicket will tell you that the key to mastering it is understanding how models work. Models are the "M" in "MVC", and all decent frameworks are architected this way. But Wicket takes it to its logical extreme, meaning that all data, including resources, should be obtained through models, and it takes a bit of getting used to.

Fragments

The most complex reusable component we built was a custom form. In our case, I wanted all our forms to look the same, using the same mix of basic form controls. So I wanted a way to build forms entirely in code. I achieved this by using Wicket fragments. These are like mini panels and are very useful.

The result is that a client can create a very powerful form control using one line of code, e.g. a text field that has an attached label, marks the form as dirty using the onchange event, lays itself out in a pleasing way, can hide itself and its label dynamically (using Ajax), can disable itself based on session properties, and using a common CSS look and feel. Oh, and supports accessibility by using the label tag properly. No doubt I did it this way because of my Swing background, but it paid off for us. Interestingly, by the time it was done, it looked much like a GWT widget, but that's probably because GWT was also inspired by Swing.

Upgrade to Wicket 1.3

After our first release, we decided to upgrade, which I was nervous about, but it's always the best option when using an open source library so you can get support from the team and stay current with features and bug fixes. This turned out to be OK but not painless. Certainly it was a lot easier than going from Tapestry 4 to 5, which pretty much required a complete rewrite. The migration guide helped somewhat (it was incomplete and not very explanatory) but it still required a fair amount of work and investigation. One example: you now need to supply a MarkupProvider for fragments; I still don't know why, since it's not explained adequately anywhere. But we got it done without much code surgery, which shows that Wicket cares about backwards compatibility.

Ajax conversion

After we upgraded to Wicket 1.3, we decided the time had come to convert as much of our interface to use Ajax as possible in order to make the user experience more interactive and up to date. This is where Wicket really shone, but was also where we ran into some difficulties. It was surprisingly easy to Ajaxify the paging tables and to create lazy loading panels (panels that fill themselves lazily in when loading a page), a little less so to Ajaxify tabbed panels, and not easy to figure out how to create an Ajax button that pops up a confirmation (yes/no) dialog before proceeding with the submit action. The latter is because for someone like myself, who is much more at home with Java than Javascript, finding out how to do anything out of the ordinary with Wicket and Ajax is painful. This is one area where the docs and examples can be improved, particularly with so many applications going Ajax. In the end, though, we were very pleased with how little code change it required to the application as a whole.

Separation between presentation and business logic

One of the criteria in my choice of Wicket was, does it promote good separation between presentation and business logic? Our experience says yes. We have a well-defined API layer that the middleware provides, and the Wicket code makes calls to it (exclusively from Java code) at exactly the right level of abstraction. For example, when you add an employee to the employees table, you would do it in the onSubmit() method of the Add Employee button. Furthermore, you handle exceptions in the same place, which 90% of the time, add an error message to the feedback panel on the same page. It ends up being a small amount of localized code, all in the same place.

Resources and Localization

Wicket has a nice model whereby it looks for resource strings in the properties file for the component in question, and if it doesn't find it there, it walks up the component hierarchy to find it. This worked well for us, but sometimes it can be difficult to work out where Wicket is trying to find a resource. Some people prefer to put all strings in one file; Wicket supports this too, but I feel it's easier to tame resource string proliferation if the strings are closest to where they are used.

We made use of the "style" session attribute for branding purposes. The style is intended to "skin" your application but it works well for branding too. It works by adding another suffix to the filename of a properties file that it's looking for.

One of the things that could be improved is the explanation of resource-related APIs. For example I still don't know when I should use component.getString(), ResourceReference, or StringResourceModel. As with most mature frameworks, over time the number of APIs has proliferated, and sometimes it's hard to keep them straight. This is a pity given Wicket's very clear mission of simplicity.

Wicket Bench

We ended up using a free Eclipse plugin called Wicket Bench, which is surprisingly useful. When you open a Wicket page (a Java class), it looks for other files with the same name but different suffixes (e.g. html, css, properties) and loads them in different tabs in the same view, so it's easy to switch between them.

Maven

When we upgraded to Wicket 1.3 we decided to switch from Ant to Maven for our builds, with mixed results. First of all, the middleware team didn't want to switch to Maven, and Maven doesn't play too well in a heterogeneous environment. Second, I found I had to add Ant tasks to Maven to do simple things like deploying my WAR file to JBoss. It blows me away that Maven doesn't have a simple copy task built in.

On the plus side, it was trivial to upgrade from Wicket 1.3 BETA, to RC, to GA by just changing the pom.xml file. And the Maven integration with Eclipse is very nice.

Links

Tip: make sure you create links lazily. That is, don't create the web page that is the destination of the link until onClick() is called. This was our biggest performance bottleneck. Fortunately, Wicket 1.3 has deprecated the constructor that takes a WebPage and so it encourages you to do the right thing.

Data Tables

We've found there tends to be a proliferation of the trio of classes that implements a paging data table, namely DataProvider, DataPanel and DataView, along with their supporting properties files. Keeping them in sync can be a pain. It would be nice if there was a single class in the API that implements the common case where all three are used once to implement one table, i.e. where there's no reuse of a DataProvider for other tables.

Things I'd love to see

I can't wait for the release that was going to be Wicket 2.0, namely a reorganization of the API to provide better error messages and support for generics. One of the hardest things to deal with is the obscurity of error messages. In this one sense I preferred Tapestry.

Summary

I wholeheartedly recommend Wicket!

A Wicket 1.3 Ajax button with a confirmation dialog

2008-01-11T13:51:00.000-08:00

This example is exactly the kind of thing I like to post: a small example that solves a general problem. In this case it's how to add a confirmation dialog to a Wicket Ajax button. This is harder than it needs to be because it's one of the few areas in Wicket that I feel is not adequately documented (the area in question being marrying Javascript with Wicket). My use case is the usual deletion warning: "Are you sure you want to delete?". This might work for Wicket 1.2.6, but I've only tested it on 1.3.

The solution is to add an AjaxCallDecorator to your button, as follows:

MyAjaxDeleteButton.java

public class MyAjaxDeleteButton extends IndicatingAjaxButton
{
 private static final long serialVersionUID = -8294444630452310166L;

 private final IModel confirm;

 public MyAjaxDeleteButton(String id, IModel confirm, IModel label)
 {
  super(id, null);
  this.setModel(label);
  this.confirm = confirm;
 }

 @Override
 protected IAjaxCallDecorator getAjaxCallDecorator()
 {
  return new AjaxPreprocessingCallDecorator(super.getAjaxCallDecorator())
  {
   private static final long serialVersionUID = 7495281332320552876L;

   @Override
   public CharSequence preDecorateScript(CharSequence script)
   {
    return "if(!confirm('" + confirm.getObject()
      + "')) return false;" + script;
   }
  };
 }
}

Note that the confirmation message is passed in as a model. This is because, if you use a localized string, and you look it up using Localizer.getString() in the constructor of your page, Wicket will complain because it can't properly navigate the component hierarchy to resolve localized properties until after all components have been constructed. If you use a model, you won't have this problem.

Example of how to use it:

MyDataPanel.java

...
 private class DeleteButton extends MyAjaxDeleteButton
 {
  private static final long serialVersionUID = 4966354164332401574L;

  private DeleteButton()
  {
   // MyDataPanel.properties contains:
   // confirmdelete=Are you sure you want to delete?
   // delete=Delete
   super("delete", new StringResourceModel("confirmdelete", MyDataPanel.this,
     null), new StringResourceModel("delete", MyDataPanel.this,
     null)); 
  }
  @Override
  protected void onSubmit(AjaxRequestTarget target, Form form)
  {
   // Update the feedback panel
   final MyBasePage page = (MyBasePage) this.getWebPage();
   target.addComponent(page.getFeedback());
   
   // Do the actual deletion here...

   // Update the data panel
   target.addComponent(MyDataPanel.this);
  }
 }
...

Note that I'm adding my feedback panel to the Ajax target. This way, any errors will be shown as well. This does depend on calling feedback.setOutputMarkupId(true) in your base page.

Suckerfish dropdowns for Wicket (redux)

2007-12-19T10:03:00.000-08:00

I have contributed the code from my original post to Wicket Stuff as the projects wicketstuff-suckerfish and wicketstuff-suckerfish-examples.

I've made some improvements to the original code. Dropdowns are built hierarchically from Wicket Fragments so in theory there's no limit to how many levels deep you can go; and associating a link with any menu item is optional, so for example you can have a top-level menu bar with no links, just labels. I've tested it with IE6, IE7 and FF2.

This project shows how useful Wicket Fragments can be. My original post didn't use fragments and was limited to one level of dropdowns. Using fragments kept the code short and allows an unlimited number of levels of dropdowns (although the CSS will need to be improved to go beyond two levels).

An example to show the second improvement (a top-level menu bar with no links, just labels, taken from the code in wicketstuff-suckerfish-examples):

// Create the menubar
final SuckerfishMenuPanel mb = new SuckerfishMenuPanel("menuBar");
add(mb);

// Create a menu. Clicking on the menu itself will take you to the home page
final SuckerfishMenuPanel.MenuItem mi = new SuckerfishMenuPanel.MenuItem(
  new BookmarkablePageLink(SuckerfishMenuPanel.LINK_ID,
    HomePage.class), "Home");
mb.addMenu(mi);

// Create a second menu without a link to the home page
final SuckerfishMenuPanel.MenuItem mi2 = new SuckerfishMenuPanel.MenuItem(
  "Home");
mb.addMenu(mi2);

Discussion of the code (from wicketstuff-suckerfish):

From SuckerfishMenuPanel.html:
The menu bar is an unordered list of menu item fragments:

<ul id="nav">
  <li id="topmenuitems">
 <span id="menuitemfragment">link</span>
  </li>
</ul>

A menu item fragment contains a link fragment and an unordered list of menu item fragments:

<wicket:fragment id="MENUITEMFRAGMENT">
    <span id="linkfragment">link</span>
    <ul id="menuitemlist">
      <li id="menuitemlinks">
          <span id="menuitemfragment">link</span>
      </li>
    </ul>
</wicket:fragment>

A "link fragment" can in fact be one of two types of fragments, because the link part is optional: one with a hyperlink, and one consisting just of text. The following shows the type with a hyperlink. It consists of an anchor that embeds a span:

<wicket:fragment id="LINKFRAGMENT">
    <a href="#" id="linkid" class="childmenu">
        <span id="linktext" class="childmenutext">Link Text</span>
    </a>
</wicket:fragment>

A text fragment is a degenerate link fragment without the hyperlink:

<wicket:fragment id="TEXTFRAGMENT">
    <span id="linktext" class="childmenutext">Link Text</span>
</wicket:fragment>

This structure allows you to embed menu item fragments to any depth.

Here's the code for MenuItemFragment. It takes a MenuItem as a constructor argument, and depending on whether a Link is provided, it constructs a LinkFragment or a TextFragment. It then recursively creates more MenuItemFragments by passing the list of children of the MenuItem to a SubMenuListView.

One standard Wicket trick to note is the use of a WebMarkupContainer. This is used for the UL tag, for which there is no standard Wicket component. We need it so that we can optionally hide it if the UL has no children. You might ask, why construct it only to then hide it? That's the way Wicket works. If it's referred to in the html, it must be constructed.

private final class MenuItemFragment extends Fragment
{
 private static final long serialVersionUID = 0L;

 public MenuItemFragment(MenuItem menuItem)
 {
  super("menuitemfragment", "MENUITEMFRAGMENT",
    SuckerfishMenuPanel.this);
  // Add the menu's label (hyperlinked if a link is provided)
  if (menuItem.getLink() != null)
  {
   add(new LinkFragment(menuItem.getLink(), menuItem.getLabel()));
  }
  else
  {
   add(new TextFragment(menuItem.getLabel()));
  }
  final WebMarkupContainer menuitemul = new WebMarkupContainer(
    "menuitemlist");
  add(menuitemul);
  // Hide the <ul> tag if there are no submenus
  menuitemul.setVisible(menuItem.getChildren().size() > 0);
  // Add the submenus
  menuitemul.add(new SubMenuListView("menuitemlinks", menuItem
    .getChildren()));
 }
}

Branding a Wicket application with Maven 2

2007-12-04T12:13:00.001-08:00

This is a follow up to my post on how to brand a Wicket application using Ant filtering. This is an update on how to do the same thing with Maven. It's a repeat of that post, but with the Ant section changed to use Maven instead.

The Style feature in Wicket is for skinning your application, which for a corporate site is another way of saying branding. Having set the style property in the session, it is then available to you anywhere in the application where you need to use it. In addition, the property file resolver automatically takes style into account. There is also some support built into ResourceReference to enable resolution of resources other than property files.

First some examples of how to use this solution, then how to implement it.

Simplest Example

Index.java

add(new Label("page.title", getString("page.title")));

Index.html

<span wicket:id="page.title">Page Title Goes Here</span>

Index_companya.properties

page.title=Welcome to Company A!

Index_companyb.properties

page.title=Welcome to Company B!

There are two properties files, distinguished by "_brand", and Wicket automatically resolves them.

An alternative to the above, showing how to do the same thing with one properties file:

This is an alternative to creating separate properties files for each brand. The style property in the session gives you the flexibility to put all the branding strings in one property file. This can be useful if you have complex strings containing lots of variable interpolations, or if you want to minimize the number of properties files that need to be sent to a translator.

Index.properties

page.title=Welcome to ${pageTitleBrand}!
page.title.companya=Company A
page.title.companyb=Company B

Index.java

...
add(new Label("page.title", new StringResourceModel("page.title", this, new Model(this))));
...
public String getPageTitleBrand()
{
return getString("page.title."+this.getSession().getStyle());
}

Example of branding CSS (style sheets)

Index.css

/* Image supplied by branded CSS */
#top-section {
position: relative;
left: 0;
top: 0;
}

Index._companya.css

#top-section {
background-image: url("/app/images/banner_companya.gif");
}

Index._companyb.css

#top-section {
background-image: url("/app/images/banner_companyb.gif");
}

Index.java

/* All CSS styles except for those that are branded */
add(HeaderContributor.forCss(Index.class, "Index.css"));
/* Branded CSS */
add(HeaderContributor.forCss(new ResourceReference(Index.class,
"Index.css", null, this.getSession().getStyle())));

Here we make use of Wicket's support for styles in ResourceReference. Of course, it would be nicer if Wicket's support for the resolution of CSS (and other resource file types) was as automatic as for property files. That is, if you use the constructor ResourceReference(Index.class, "Index.css") it should automatically look for Index_brand.css.

Branding Images

FaviconLink.java

public class FaviconLink extends ExternalLink
{
public FaviconLink()
{
super("favicon", "/app/images/favicon_"+Session.get().getStyle()+".ico");
}
}

Note that in this case we use Session.get().getStyle() because ExternalLink does not have instance access to the session. Fortunately, it's easy enough to get at it.

How it works

A convenient way to initialize the the session with the brand is to set it in web.xml:

web.xml

...
<filter>
<filter-name>myapp</filter-name>
<filter-class>
 org.apache.wicket.protocol.http.WicketFilter
</filter-class>
<init-param>
   <param-name>applicationClassName</param-name>
   <param-value>wicket.quickstart.QuickStartApplication</param-value>
</init-param>
<init-param>
   <param-name>brand</param-name>
   <param-value>companya</param-value>
 </init-param>
</filter>
...

QuickStartSession.java

...
protected QuickStartSession(final WebApplication application)
{
super(application);
// Read brand from web.xml
String brand = ((WebApplication) Application.get()).getWicketFilter()
.getFilterConfig().getInitParameter("brand");
if (brand == null)
{
brand = "companya";
}
this.setStyle(brand);
}
...

Now to use Maven filtering to set the brand. Put your pre-filtered web.xml in src/main/resources (or wherever you like, actually):

web.xml

...
  <init-param>
    <param-name>brand</param-name>
    <param-value>${brand}</param-value>
  </init-param>
...

pom.xml

...
<build>
  <resources>
    <resource>
      <!-- Copies web.xml to target/classes and filters ${brand} in the process -->
      <filtering>true</filtering>
      <directory>src/main/resources</directory>
      <includes>
        <include>**/web.xml</include>
      </includes>
    </resource>
  </resources>
  <plugin>
    <groupId>org.apache.maven.plugins</groupId>
    <artifactId>maven-war-plugin</artifactId>
    <configuration>      
        <!-- Gets the filtered web.xml from target/classes -->
        <webXml>target/classes/web.xml</webXml>
    </configuration>
  </plugin>
</build>
...

This will copy web.xml from src/main/resources to the location target/classes and in the process replace the branding token. Then the war target builds the WAR using the filtered web.xml.

An Ajax tabbed panel with lazy loading tabs and a wait indicator for Wicket

2007-11-30T11:03:00.000-08:00

I needed an Ajax Tabbed Panel with tabs that load only when clicked and and a wait indicator (a.k.a. hourglass or wait cursor) when the tab is being loaded. This example just shows how to use existing Wicket 1.3 components for those who haven't used these components before.

First, an example of how to use it:

MyTabPage.java

public class MyTabPage extends WebPage
{
 private static final long serialVersionUID = 1L;

 public MyTabPage()
 {
  add(HeaderContributor.forCss(MyTabPage.class, "MyTabPage.css"));

  final List tabs = new ArrayList();
  
  tabs.add(new MyTab("Tab One")
  {
   private static final long serialVersionUID = 1L;
   @Override
   public Panel createPanel()
   {
    return new TabOnePanel();
   }
  });
  tabs.add(new MyTab("Tab Two")
  {
   private static final long serialVersionUID = 1L;
   @Override
   public Panel createPanel()
   {
    return new TabTwoPanel();
   }
  });
  final MyTabbedPanel tabpanel = new MyTabbedPanel("tabpanel", tabs);
  add(tabpanel);
 }
}

MyTabPage.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
  xmlns:wicket="http://wicket.sourceforge.net/" xml:lang="en"
  lang="en">

 <body>
   <div wicket:id="tabpanel">[tabbed panel will be here]</div>
 </body>
</html>

The CSS for the project:

MyTabPage.css

div.mytabpanel div.tab-row{
  float:left;
  width: 100%;
  border-bottom: 1px solid #3e6581;
  background-color: #e6e6e6;
}

div.mytabpanel div.tab-row ul {
  margin:0;
  list-style:none;
}
  
div.mytabpanel div.tab-row li {
  float:left;
  width: 10%;
}
  
div.mytabpanel div.tab-row a {
  display:block;
  text-decoration:none;
  font-weight:bold;
  color:#949494;
}
  
div.mytabpanel div.tab-row li.selected a {
  color:#333;
}
 
div.mytab {
  padding: 5em;
}

The tabbed panel class:

MyTabbedPanel.java

public class MyTabbedPanel extends Panel
{
 private static final long serialVersionUID = 1L;

 private final TabbedPanel tabbedPanel;

 public MyTabbedPanel(String id, List tabs)
 {
  super(id);

  tabbedPanel = new AjaxTabbedPanel("mytabpanel", tabs)
  {
   private static final long serialVersionUID = 1L;
   // Override newLink to supply an IndicatingAjaxLink (wait cursor)
   @Override
   protected WebMarkupContainer newLink(String linkId, final int index)
   {
    final WebMarkupContainer c = new IndicatingAjaxLink(linkId)
    {
     private static final long serialVersionUID = 1L;

     public void onClick(AjaxRequestTarget target)
     {
      setSelectedTab(index);
      if (target != null)
      {
       target.addComponent(MyTabbedPanel.this);
      }
      onAjaxUpdate(target);
     }
    };
    return c;
   }
  };
  tabbedPanel.setOutputMarkupId(true);
  MyTabbedPanel.this.setOutputMarkupId(true);
  add(tabbedPanel);
 }

 public static class MyTab extends AbstractTab
 {
  private static final long serialVersionUID = 1L;

  private Panel p;

  public MyTab(String label)
  {
   super(new Model(label));
  }
  @Override
  public Panel getPanel(String panelId)
  {
   if (p == null)
   {
    // Lazily create the panel
    p = createPanel();
    if (!TabbedPanel.TAB_PANEL_ID.equals(p.getId()))
    {
     throw new IllegalArgumentException(
       "Panel id must be TabbedPanel.TAB_PANEL_ID");
    }
    p.setOutputMarkupId(true);
   }
   return p;
  }
  protected Panel createPanel()
  {
   throw new IllegalArgumentException("Must provide a panel");
  }
 }
}

MyTabbedPanel.html

<?xml version="1.0"?>
<html xmlns="http://www.w3.org/1999/xhtml"
 xmlns:wicket="http://wicket.sourceforge.net/" xml:lang="en" lang="en">
<body>
<wicket:panel>
 <div wicket:id="mytabpanel" class="mytabpanel"></div>
</wicket:panel>
</body>
</html>

Finally, a simple panel displayed by a tab:

TabOnePanel.java

public class TabOnePanel extends Panel
{
 private static final long serialVersionUID = 1L;

 public TabOnePanel()
 {
  super(TabbedPanel.TAB_PANEL_ID);

  add(new Label("mylabel", "Tab One Contents"));
 }
}

TabOnePanel.html

<?xml version="1.0" encoding="UTF-8"?>
<html xmlns="http://www.w3.org/1999/xhtml">
  <body>
    <wicket:panel>
      <div wicket:id="mylabel" class="mytab"></div>
 </wicket:panel>
  </body>
</html>

Warning on page exit for Wicket 1.2.x

2007-11-16T20:19:00.000-08:00

I needed to warn the user if s/he leaves a form that hasn't been submitted. I was surprised that this requirement wasn't very commonly solved on the Net, and even less so for Wicket. There are more complicated solutions out there, but none of them was super simple. This is the simplest solution I could come up with.

After researching it I found out that to make this warning work you need to trap the Javascript event called onbeforeunload. This event is especially for this purpose and is supported by the major browsers. If you return a string from this event (typically "Are you sure you want to leave this page?"), the browser will display this string in a confirm dialog. If the user clicks OK, the page is unloaded and the form is submitted (or the link is followed), but if the user clicks Cancel, control returns to the page and the form is not submitted.

My solution consists of one form and one short javascript file. First, an example of how to use it:

WarnOnExitPage.java

public class WarnOnExitPage extends WebPage
{
 private static final long serialVersionUID = 1L;

 private String name;
 private String email;

 public WarnOnExitPage(final PageParameters parameters)
 {
  final WarnOnExitForm form = new WarnOnExitForm("myform");

  final TextField nameField = new TextField("namefield",
    new PropertyModel(this, "name"));
  // Note the use of a specialized addFormField method. This
  // appends the necessary javascript.
  form.addFormField(nameField);

  final TextField emailField = new TextField("emailfield",
    new PropertyModel(this, "email"));
  form.addFormField(emailField);

  // Note the use of a specialized addButton method. This
  // appends the necessary javascript.
  form.addButton(new Button("okbutton")
  {
   private static final long serialVersionUID = 1L;

   @Override
   protected void onSubmit()
   {
    setResponsePage(HomePage.class);
   }
  });
  add(form);
 }

 public String getName()
 {
  return name;
 }

 public void setName(String name)
 {
  this.name = name;
 }

 public String getEmail()
 {
  return email;
 }

 public void setEmail(String email)
 {
  this.email = email;
 }
}

WarnOnExitPage.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
  xmlns:wicket="http://wicket.sourceforge.net/" xml:lang="en"
  lang="en">
<head>
 <title>Wicket Quickstart Archetype Homepage</title>
</head>

<body>

 <strong>Wicket Quickstart Archetype Homepage</strong>

 <form wicket:id="myform">
   <fieldset>
     <table>
       <tr>
         <td>Name:</td>

         <td>
           <input wicket:id="namefield" type="text" />
         </td>
       </tr>

       <tr>
         <td>Email:</td>

         <td>
           <input wicket:id="emailfield" type="text" />
         </td>
       </tr>

       <tr>
         <td> </td>

         <td>
           <input wicket:id="okbutton" type="submit" />
         </td>
       </tr>
     </table>
   </fieldset>
 </form>

 <wicket:link>
 <a href="HomePage.html">HomePage</a>
 </wicket:link>

</body>
</html>

Now the solution:

WarnOnExitForm.java

public class WarnOnExitForm extends Form
{
 private static final long serialVersionUID = 1L;

 private boolean firstTimeThru = true;

 public WarnOnExitForm(String id)
 {
  super(id);
  // Don't confirm when the user hits the enter key
  add(new SimpleAttributeModifier("onsubmit", "dontConfirm();"));
  // Turn off autocomplete because IE will not register an entry
  // as a change if it came from the autocomplete cache
  add(new SimpleAttributeModifier("autocomplete", "off"));
  add(HeaderContributor.forJavaScript(WarnOnExitForm.class, "WarnOnExit.js"));
 }

 public void addFormField(FormComponent c)
 {
  add(c);
  c.add(new SimpleAttributeModifier("onchange", "setDirty();"));
  // onblur is not always reliable when it comes to the back
  // button, but it works for other situations
  c.add(new SimpleAttributeModifier("onblur", "setDirty();"));
 }

 public void addButton(Button b)
 {
  add(b);
  // Don't confirm when the user hits a form button
  b.add(new SimpleAttributeModifier("onclick", "dontConfirm();"));
 }

 /** We must add attributes to the page's body tag in onAttach()
   * because the body tag is not available at construction time
   */
 @Override
 protected void onAttach()
 {
  super.onAttach();

  if (firstTimeThru)
  {
   final WebMarkupContainer c = getWebPage().getBodyContainer()
     .getBodyContainer();
   c.add(new SimpleAttributeModifier("onload",
     "FORMCONFIRM=true;FORMISDIRTY=false;"));
   c.add(new SimpleAttributeModifier("onbeforeunload",
     "return warnOnPageExit('" + getString("formdirtymessage")
       + "');"));
   firstTimeThru = false;
  }
 }
}

WarnOnExitForm.properties

formdirtymessage=You have attempted to leave this page. \
If you have made any changes to the fields without clicking \
the OK button, your changes will be lost. Are you sure you \
want to exit this page?

WarnOnExit.js

function warnOnPageExit(formdirtymessage)
{
 if (FORMCONFIRM && FORMISDIRTY){return formdirtymessage};
}
function setDirty()
{
 FORMISDIRTY=true;
}
function dontConfirm()
{
 FORMCONFIRM=false;
}

As you can see, the solution is a simple one. However, it does gloss over some things:

Wicket modifies the body tag when you add an Ajax behavior to your page. This could overwrite your body tag modifications
onAttach() is not available in Wicket 1.3
getBodyContainer() is not available in Wicket 1.3

Suckerfish dropdowns for Wicket

2007-11-15T09:23:00.000-08:00

Note: there is an updated post on this topic.

We wanted to add Suckerfish dropdowns to our Wicket site. Suckerfish dropdowns were first mentioned on A List Apart and have since become very popular as super-simple, lightweight, easy-to-use Javascript menus. The licensing is liberal too, see the "Free source" section on the Copyright page. Since then they have been refined as "Son of Suckerfish".

As is common with Wicket, this turned out to be easy to do. All we need was single-level menus (i.e. no sub-submenus), but it should be straightforward to extend this to support that. I also wanted to keep it as simple as possible for illustration purposes. The solution consists of just one class.

Note: this has only been tested with Wicket 1.3.0.

First an example of how to use it.

MyWebPage.java

...
// Create the menubar
final SuckerfishMenuPanel mb = new SuckerfishMenuPanel("menuBar");
add(mb);
// Create a menu
SuckerfishMenuPanel.MenuItem mi =
 new SuckerfishMenuPanel.MenuItem(new
     BookmarkablePageLink(SuckerfishMenuPanel.LINK_ID, MyFirstPage.class),
         "myFirstLabel");
mb.addMenu(mi);
// Create a submenu
SuckerfishMenuPanel.MenuItem submi =
 new SuckerfishMenuPanel.MenuItem(new
     BookmarkablePageLink(SuckerfishMenuPanel.LINK_ID, MySecondPage.class),
         "mySecondLabel");
mi.addMenu(submi);
...

MyWebPage.html

...
 <div wicket:id="menuBar" class="menubar">[MenuBar Here]</div>
...

Now the implementation. Note that these menus consist of Links. This gives you the freedom to pass in whatever type of Link you need, except for ExternalLink, which unfortunately does not inherit from Link.

SuckerfishMenuPanel.java

/**
* See http://www.alistapart.com/articles/dropdowns/
* License is at
* http://www.alistapart.com/copyright/, see "Free source"
* Currently only supports one level of dropdowns
*/
public class SuckerfishMenuPanel extends Panel
{
private static final long serialVersionUID = -21832859336423477L;

public static final String LINK_ID = "linkid";
public static final String LINK_TEXT_ID = "linktext";
private final List topMenuItems = new ArrayList();

public SuckerfishMenuPanel(String id)
{
super(id);
// Add the Suckerfish CSS
add(HeaderContributor.forCss(SuckerfishMenuPanel.class,
 "SuckerfishMenuPanel.css"));
// Add the top menus
add(new ListView("menubarlinks", new PropertyModel(this, "topMenuItems"))
{
private static final long serialVersionUID = -5875124377225299067L;

@Override
protected void populateItem(ListItem item)
{
 final MenuItem menuItem = (MenuItem) item.getModelObject();
 item.add(menuItem.getLink());
 final WebMarkupContainer menuitemul = new WebMarkupContainer("menuitemul");
 item.add(menuitemul);
 // Hide the ul tag if there are no submenus
 menuitemul.setVisible(menuItem.getChildren().size() > 0);
 // Add the submenus
 final ListView menuitemlinks =
        new ListView("menuitemlinks", menuItem.getChildren())
 {
  private static final long serialVersionUID = -2997784619579088676L;

  @Override
  protected void populateItem(ListItem item)
  {
   final MenuItem menuItem = (MenuItem) item
     .getModelObject();
   item.add(menuItem.getLink());
  }
 };
 menuitemul.add(menuitemlinks);
}
});
}
/** Add one menu item */
public void addMenu(MenuItem menu)
{
if (!menu.link.getId().equals(LINK_ID))
{
throw new IllegalArgumentException(
  "The id must be SuckerfishMenuPanel.LINK_ID");
}
topMenuItems.add(menu);
}
/** Add all menus at once */
public void setMenuItems(List menuItems)
{
this.topMenuItems.clear();
this.topMenuItems.addAll(menuItems);
}
/** Lightweight menu object that stores a menu Link and its label */
public static class MenuItem
{
private final Link link;
private final List subMenuItems = new ArrayList();

public MenuItem(Link link, String label)
{
this.link = link;
this.link.add(new Label(LINK_TEXT_ID, label));
}
/** Add one menu item */
public void addMenu(MenuItem menu)
{
if (!menu.link.getId().equals(LINK_ID))
{
 throw new IllegalArgumentException(
   "The id must be SuckerfishMenuPanel.LINK_ID");
}
subMenuItems.add(menu);
}
/** Add all menus at once */
public void setMenuItems(List menuItems)
{
this.subMenuItems.clear();
for (MenuItem child : menuItems)
{
 addMenu(child);
}
}

public Link getLink()
{
return link;
}

public List getChildren()
{
return subMenuItems;
}
}
}

SuckerfishMenuPanel.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:wicket="http://wicket.sourceforge.net/" xml:lang="en" lang="en">
<wicket:head>
<script language="JavaScript" type="text/javascript">
myHover = function() {
var sfEls = document.getElementById("nav").getElementsByTagName("LI");
for (var i=0; i<sfEls.length; i++) {
sfEls[i].onmouseover=function() {
this.className+=" myhover";
}
sfEls[i].onmouseout=function() {
this.className=this.className.replace(new RegExp(" myhover\\b"), "");
}
}
}
if (window.attachEvent) window.attachEvent("onload", myHover);
</script>
</wicket:head>
<body>
<wicket:panel>
    <ul id="nav">
      <li wicket:id="menubarlinks">
       <a href="#" wicket:id="linkid"
         class="topmenu"><span wicket:id="linktext">Link Text</span></a>
        <ul wicket:id="menuitemul">
         <li wicket:id="menuitemlinks">
          <a href="#" wicket:id="linkid"
             class="childmenu"><span wicket:id="linktext">Link Text</span></a>
         </li>
        </ul>
      </li>
    </ul>
</wicket:panel>
</body>
</html>

The CSS below is for horizontal menus. It can be changed to accommodate vertical menus. I'm using a background image (gradient.gif). You will either need to supply your own or just use a plain background.

SuckerfishMenuPanel.css

#nav, #nav ul {
float: left;
width: 99.9%;
list-style: none;
line-height: 1;
font-weight: bold;
padding: 0;
margin: 0;
border: 1px solid #3e6581;
background:#BCCDDB
url(/images/gradient.gif)
repeat-x 0% 0%;
}
#nav a {
display: block;
width: 10em;
w\idth: 6em;
color: #7C6240;
text-decoration: none;
padding: 0.25em;
}
#nav a.topmenu {
width: 10em;
text-align: center;
width: auto;
}
#nav a.topmenu span {
color: white;
}
#nav a.childmenu {
width: 13em;
}
#nav a.childmenu span {
color: white;
}
#nav li {
float: left;
padding-left: 0.5em;
padding-right: 0.5em;
padding-top: 0.5em;
padding-bottom: 0.5em;
width: auto;
background:#BCCDDB
url(/images/gradient.gif)
repeat-x 0% 0%;
}
#nav li ul {
position: absolute;
left: -999em;
height: auto;
width: 14.4em;
w\idth: 13.9em;
font-weight: normal;
margin: 0;
}
#nav li li {
padding-right: 1em;
width: 13em
padding-left: 0;
padding-top: 0.25em;
padding-bottom: 0.25em;
}
#nav li ul a {
width: 13em;
w\idth: 9em;
}

#nav li ul ul {
margin: -1.75em 0 0 14em;
}
#nav li:hover ul ul, #nav li:hover ul ul ul, #nav li.myhover ul ul, #nav li.myhover ul ul ul {
left: -999em;
}
#nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li.myhover ul, #nav li li.myhover ul, #nav li li li.myhover ul {
left: auto;
}
#nav li:hover, #nav li.myhover {
background:#C8D7E3
url(/images/gradient-highlighted.gif)
repeat-x;
}

An Ajax Select All checkbox for Wicket

2007-09-27T13:44:00.000-07:00

I had a need to enable and disable a button based on whether an item in a list was checked. I also wanted a Select All checkbox that would change the state of the button and all the checkboxes in the list. And finally, I wanted the Select All checkbox to deselect if any of the checkboxes in the list was unchecked.

Wicket has CheckGroupSelector, CheckGroup and Check that all work together to change the state of a group of checkboxes, but they are not Ajax-enabled.

I wanted the simplest possible solution that would achieve this. Luckily, Wicket (1.2.6) came to the rescue yet again and made it quite easy.

I couldn't just Ajax-enable Check because it does not inherit from FormComponent and therefore you cannot add an AjaxFormComponentUpdatingBehavior to it, which is the easiest way to Ajax-enable a form item. So instead I use AjaxCheckBox in two places, for Select All and in the list.

My list class is called MyAjaxEnabledList. Tester.java contains a form that embeds a MyAjaxEnabledList. The MyAjaxEnabledList constructor is passed a list of items of type MyListItem. MyListItem implements the interface MyAjaxEnabledList.ISelected, which guarantees the presence of the methods get/setSelected() that the checkbox requires.

The key is the onUpdate() method of the anonymous subclass of MyAjaxEnabledList. It enables or disables the delete button based on the list's check group model. This is the feature that is not available if you use CheckGroupSelector, CheckGroup and Check

Tester.java

public class Tester extends WebPage
{
 private static final long serialVersionUID = 7859298577765782995L;

 final Button delete;

 public Tester()
 {
  final List items = Arrays.asList(new MyListItem[]
  { new MyListItem("one"), new MyListItem("two") });

  final MyAjaxEnabledList myList = new MyAjaxEnabledList(
    "mylist", items)
  {
   private static final long serialVersionUID = -6274910651773243643L;

   @Override
   protected void onUpdate(AjaxRequestTarget target)
   {
    target.addComponent(delete);
    delete.setEnabled(getCheckGroupModel().size() > 0);
   }
  };

  delete = new Button("delete", new Model("Delete"))
  {
   private static final long serialVersionUID = -2732052672075770498L;

   @Override
   protected void onSubmit()
   {
    for (MyListItem s : myList.getCheckGroupModel())
    {
     System.out.println("You are deleting: " + s);
    }
    setResponsePage(Tester.class);
   }
  };
  delete.setEnabled(false);
  delete.setOutputMarkupId(true);

  Form form = new Form("myform");
  form.add(myList);
  form.add(delete);
  add(form);
 }

 class MyListItem implements MyAjaxEnabledList.ISelected
 {
  private String item;
  private boolean selected;

  public MyListItem(String item)
  {
   this.item = item;
  }

  public boolean isSelected()
  {
   return selected;
  }

  public void setSelected(boolean selected)
  {
   this.selected = selected;
  }

  @Override
  public String toString()
  {
   return item;
  }
 }
}

Tester.html

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

<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:wicket="http://wicket.sourceforge.net/" xml:lang="en"
lang="en">
  <body>
    <form wicket:id="myform">
      <span wicket:id="mylist">
      </span>
      <input type="submit" wicket:id="delete" />
    </form>
  </body>
</html>

MyAjaxEnabledList contains two uses of MyAjaxCheckBox. This is a subclass of AjaxCheckBox that implements the method isChecked() (see below). The first use is the Select All ("allChecked"), and the second is in the list ("selected"). Both update the client ("MyAjaxEnabledList.this.onUpdate(target)") in addition to updating the check group model.

MyAjaxEnabledList.java

public class MyAjaxEnabledList extends
  Panel
{
 private static final long serialVersionUID = -8101172306096365329L;

 /** Maintains a list of checked items. */
 private final List checkGroupModel = new ArrayList();
 /** The list of items in the table */
 private final List rows = new ArrayList();
 /** True if all items are selected */
 private boolean allChecked;

 public MyAjaxEnabledList(String id, final List items)
 {
  super(id);
  this.rows.addAll(items);
  final List checks = new ArrayList();
  final MyAjaxCheckBox checkGroup = new MyAjaxCheckBox("allChecked",
    new PropertyModel(this, "allChecked"))
  {
   private static final long serialVersionUID = -5765551380737131761L;

   @Override
   protected void onUpdate(AjaxRequestTarget target)
   {
    final boolean isSelected = isChecked();
    if (isSelected)
    {
     checkGroupModel.addAll(rows);
    }
    else
    {
     checkGroupModel.clear();
    }
    for (MyAjaxCheckBox check : checks)
    {
     target.addComponent(check);
    }
    for (ISelected row : rows)
    {
     row.setSelected(isSelected);
    }
    MyAjaxEnabledList.this.onUpdate(target);
   }
  };
  add(checkGroup);

  // Initialize the table
  add(new ListView("rows", new PropertyModel(this, "rows"))
  {
   private static final long serialVersionUID = -7831503487781845806L;

   // Casting model object to T
   @SuppressWarnings("unchecked")
   @Override
   protected void populateItem(ListItem item)
   {
    final T row = (T) item.getModelObject();
    item.setModel(new CompoundPropertyModel(row));
    MyAjaxCheckBox check = new MyAjaxCheckBox("selected")
    {
     private static final long serialVersionUID = -5766661380737131761L;

     @Override
     protected void onUpdate(AjaxRequestTarget target)
     {
      if (isChecked())
      {
       if (!checkGroupModel.contains(row))
        checkGroupModel.add(row);
      }
      else
      {
       checkGroupModel.remove(row);
      }
      setAllChecked(checkGroupModel.size() == rows.size());
      target.addComponent(checkGroup);
      MyAjaxEnabledList.this.onUpdate(target);
     }
    };
    checks.add(check);
    item.add(check);
    item.add(new Label("item", row.toString()));
   }
  });
 }

 public List getCheckGroupModel()
 {
  return checkGroupModel;
 }

 /** Subclasses can override */
 protected void onUpdate(AjaxRequestTarget target)
 {
  // Does nothing
 }

 public List getRows()
 {
  return rows;
 }

 public void setRows(List rows)
 {
  this.rows.clear();
  this.rows.addAll(rows);
 }

 public boolean isAllChecked()
 {
  return allChecked;
 }

 public void setAllChecked(boolean allChecked)
 {
  this.allChecked = allChecked;
 }

 public interface ISelected
 {
  public boolean isSelected();

  public void setSelected(boolean selected);
 }
}

MyAjaxEnabledList.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:wicket="http://wicket.sourceforge.net/" xml:lang="en"
lang="en">
  <body>
    <wicket:panel>
      <table>
        <tbody>
          <tr>
            <th>
            <input type="checkbox" wicket:id="allChecked" />

            Selected</th>

            <th>
              <wicket:message key="columntitle">
               </wicket:message>
            </th>
          </tr>

          <tr wicket:id="rows">
            <td>
              <input type="checkbox" wicket:id="selected" />
            </td>

            <td>
              <span wicket:id="item">Item</span>
            </td>
          </tr>
        </tbody>
      </table>
    </wicket:panel>
  </body>
</html>

Finally, here is MyAjaxCheckBox:

MyAjaxCheckBox.java

/**
 * An AjaxCheckBox with some convenience methods
 */
public abstract class MyAjaxCheckBox extends AjaxCheckBox
{
 private static final long serialVersionUID = 1L;

 public MyAjaxCheckBox(final String id)
 {
  this(id, null);
 }

 public MyAjaxCheckBox(final String id, IModel model)
 {
  super(id, model);
 }
 
 public boolean isChecked()
 {
  final String value = getValue();
  if (value != null)
  {
   try
   {
    return Strings.isTrue(value);
   }
   catch (StringValueConversionException e)
   {
    return false;
   }
  }
  return false;
 }
}

Qwicket, maven and eclipse

2007-09-23T19:24:00.000-07:00

I want to start using JPA with Wicket, and the quickest way was to start with Qwicket, a project that already has done the heavy lifting. I also wanted to get a bit more experience with maven, which is touted as a successor to ant. Furthermore, I wanted to be able to build and run my maven-managed application from eclipse. And lastly, I wanted to use MySQL. Qwicket does come with maven support, but it's managed from an ant script. I wanted native maven support.

Here's what I did to change qwicket so it fits my requirements:

This assumes MySQL is installed and running.
Create a schema called qwicket in the MySQL catalog. You can just leave it empty.
Install maven 2 for the command line (http://maven.apache.org/download.html)
Install the eclipse maven 2 plugin (http://m2eclipse.codehaus.org)
Start a DOS shell (this will work for other shells too)
I'm using C:\eclipseproj as my eclipse project directory, but it could be anything:

C:\eclipseproj>mvn archetype:create -DgroupId=qwicket -DartifactId=qwicket
    -DarchetypeArtifactId=maven-archetype-webapp

Note the last argument. It creates an appropriate directory structure for a web application.

C:\eclipseproj>cd qwicket
C:\eclipseproj>mvn eclipse:eclipse

In eclipse, import the project into your workspace:

File --> Import --> Import Existing Projects into Workspace

Edit pom.xml as follows:

pom.xml

<project xmlns="http://maven.apache.org/POM/4.0.0"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/maven-v4_0_0.xsd">
<modelVersion>4.0.0</modelVersion>
<groupId>qwicket</groupId>
<artifactId>qwicket</artifactId>
<packaging>war</packaging>
<version>1.0-SNAPSHOT</version>
<name>qwicket Maven Webapp</name>
<url>http://maven.apache.org</url>

<properties>
 <wicket.version>1.2.6</wicket.version>
 <jetty.version>6.1.4</jetty.version>
</properties>

<dependencies>
 <dependency>
  <groupId>junit</groupId>
  <artifactId>junit</artifactId>
  <version>3.8.1</version>
  <scope>test</scope>
 </dependency>
 <!--  WICKET DEPENDENCIES -->

 <dependency>
  <groupId>wicket</groupId>
  <artifactId>wicket</artifactId>
  <version>${wicket.version}</version>
 </dependency>
 <dependency>
  <groupId>wicket</groupId>
  <artifactId>wicket-extensions</artifactId>
  <version>${wicket.version}</version>
 </dependency>

 <!-- LOGGING DEPENDENCIES -->

 <dependency>
  <groupId>org.slf4j</groupId>
  <artifactId>slf4j-log4j12</artifactId>
  <version>1.0.1</version>
 </dependency>

 <!--  JETTY DEPENDENCIES FOR TESTING  -->

 <dependency>
  <groupId>org.mortbay.jetty</groupId>
  <artifactId>jetty</artifactId>
  <version>${jetty.version}</version>
  <scope>provided</scope>
 </dependency>
 <dependency>
  <groupId>org.mortbay.jetty</groupId>
  <artifactId>jetty-util</artifactId>
  <version>${jetty.version}</version>
  <scope>provided</scope>
 </dependency>
 <dependency>
  <groupId>org.mortbay.jetty</groupId>
  <artifactId>jetty-management</artifactId>
  <version>${jetty.version}</version>
  <scope>provided</scope>
 </dependency>

 <!--  SPRING and HIBERNATE -->

 <dependency>
  <groupId>org.springframework</groupId>
  <artifactId>spring</artifactId>
  <version>2.0</version>
 </dependency>
 <dependency>
  <groupId>org.hibernate</groupId>
  <artifactId>hibernate</artifactId>
  <version>3.2.0.ga</version>
 </dependency>
 <dependency>
  <groupId>org.hibernate</groupId>
  <artifactId>hibernate-annotations</artifactId>
  <version>3.2.0.ga</version>
 </dependency>
 <dependency>
  <groupId>wicket</groupId>
  <artifactId>wicket-spring-annot</artifactId>
  <version>1.2.6</version>
 </dependency>

 <!--  EMAIL -->

 <dependency>
  <groupId>commons-email</groupId>
  <artifactId>commons-email</artifactId>
  <version>1.0</version>
 </dependency>

 <!--  MYSQL -->

 <dependency>
  <groupId>mysql</groupId>
  <artifactId>mysql-connector-java</artifactId>
  <version>3.1.14</version>
 </dependency>

</dependencies>
<build>
 <finalName>qwicket</finalName>
 <resources>
  <resource>
   <filtering>false</filtering>
   <directory>src/main/resources</directory>
  </resource>
  <resource>
   <filtering>false</filtering>
   <directory>src/main/java</directory>
   <includes>
    <include>**</include>
   </includes>
   <excludes>
    <exclude>**/*.java</exclude>
   </excludes>
  </resource>
 </resources>
 <plugins>
  <plugin>
   <groupId>org.mortbay.jetty</groupId>
   <artifactId>maven-jetty-plugin</artifactId>
  </plugin>
  <plugin>
   <groupId>org.apache.maven.plugins</groupId>
   <artifactId>maven-compiler-plugin</artifactId>
   <configuration>
    <source>1.5</source>
    <target>1.5</target>
   </configuration>
  </plugin>
 </plugins>
</build>
</project>

Now we are ready to work with qwicket.

Unpack qwicket.zip to qwickettmp

In the Windows file explorer:

Delete qwicket\src\main\java

Copy qwickettmp\src\java to qwicket\src\main

Delete qwicket\src\main\webapp

Copy qwickettmp\src\web to qwicket\src\main, rename to webapp

Right click on the project in eclipse, add the java folder to the source path

Copy qwicket\src\main\webapp\WEB-INF\classes\log4j.properties to src\main\resources (I'm not sure why log4j doesn't pick it up from the original location)

Note that webapp\classes\application.properties is not used in my implementation.

Open qwicket.myapp.util.Start.java

Change the lines

     ptabs.setContextPath("/");
    ptabs.setWar("build/war");

     ptabs.setContextPath("/qwicket");
    ptabs.setWar("target/qwicket.war");

Edit applicationContext.xml as follows:

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE beans PUBLIC "-//SPRING//DTD BEAN//EN" "http://www.springframework.org/dtd/spring-beans.dtd">

<beans>
 <bean id="dataSource" class="org.springframework.jdbc.datasource.DriverManagerDataSource">
     <property name="driverClassName">
         <value>com.mysql.jdbc.Driver</value>
     </property>
     <property name="url">
         <value>jdbc:mysql://localhost/qwicket</value>
     </property>
     <property name="username"><value>your username here</value></property>
     <property name="password"><value>your password here</value></property>
 </bean>

<!-- Hibernate SessionFactory -->
 <bean id="sessionFactory" class="qwicket.myapp.QwicketSessionFactory" abstract="false" singleton="true" lazy-init="default" autowire="default" dependency-check="default">
     <property name="dataSource">
         <ref local="dataSource" />
     </property>
 <property name="annotatedClasses">
  <list>
   <value>qwicket.myapp.model.User</value>
  </list>
 </property>
     <property name="hibernateProperties">
         <props>
             <prop key="hibernate.dialect">org.hibernate.dialect.MySQLDialect</prop>
             <prop key="hibernate.show_sql">true</prop>
         </props>
     </property>
 </bean>

<!-- Services -->
<bean id="userService"
 class="qwicket.myapp.service.impl.UserServiceImpl">
 <property name="userDao" ref="userDAO" />
</bean>

<!-- End Services -->

<!-- DAOs -->
<bean id="userDAO" class="qwicket.myapp.dao.impl.UserDaoImpl">
 <property name="sessionFactory">
  <ref local="sessionFactory" />
 </property>
</bean>
<!-- End DAOs -->

<!-- Application -->
<bean id="QwicketApplication"
 class="qwicket.myapp.QwicketApplication" />
</beans>
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE beans PUBLIC "-//SPRING//DTD BEAN//EN" "http://www.springframework.org/dtd/spring-beans.dtd">

<beans>
 <bean id="dataSource" class="org.springframework.jdbc.datasource.DriverManagerDataSource">
     <property name="driverClassName">
         <value>com.mysql.jdbc.Driver</value>
     </property>
     <property name="url">
         <value>jdbc:mysql://localhost/qwicket</value>
     </property>
     <property name="username"><value>root</value></property>
     <property name="password"><value>admin</value></property>
 </bean>

<!-- Hibernate SessionFactory -->
 <bean id="sessionFactory" class="qwicket.myapp.QwicketSessionFactory" abstract="false" singleton="true" lazy-init="default" autowire="default" dependency-check="default">
     <property name="dataSource">
         <ref local="dataSource" />
     </property>
 <property name="annotatedClasses">
  <list>
   <value>qwicket.myapp.model.User</value>
  </list>
 </property>
     <property name="hibernateProperties">
         <props>
             <prop key="hibernate.dialect">org.hibernate.dialect.MySQLDialect</prop>
             <prop key="hibernate.show_sql">true</prop>
         </props>
     </property>
 </bean>

<!-- Services -->
<bean id="userService"
 class="qwicket.myapp.service.impl.UserServiceImpl">
 <property name="userDao" ref="userDAO" />
</bean>

<!-- End Services -->

<!-- DAOs -->
<bean id="userDAO" class="qwicket.myapp.dao.impl.UserDaoImpl">
 <property name="sessionFactory">
  <ref local="sessionFactory" />
 </property>
</bean>
<!-- End DAOs -->

<!-- Application -->
<bean id="QwicketApplication"
 class="qwicket.myapp.QwicketApplication" />
</beans>

Now to set up eclipse to build the application:

Open the External Tools Dialog from the toolbar

Select "m2 build" in tree

Click the New icon

For Name type "qwicket war"

For Base directory click Browse Workspace, select qwicket

For Goals type "clean compile war:war" (an alternative is "clean package")

Click Apply, then Run

To run the application:

Open the Run Dialog from the toolbar

Click Java Application in the tree

Click the New icon

For Project: Browse, then select qwicket

For the Main class: Browse, then select qwicket.myapp.util.Start

Click Apply, then Run

Note: you can also run the app using maven: "mvn jetty:run". If you choose to do this, there's no longer a need for Start.java. Also, maven will automatically build and package your war if necessary.