Knowledge base‎ > ‎

Comma separated list: CSS or Wicket?

posted Apr 20, 2010, 4:19 AM by Szabolcs Szádeczky-Kardoss   [ updated Apr 22, 2010, 1:41 AM by István Soós ]
Recently I've encountered a problem of displaying comma-separated list items on a web page. It came natural to check if it can be done in CSS or not. This page explains the concept implemented in CSS, and on this example page you can check it yourself. It works in Safari and Firefox, but does not work in IE 7 - it just don't display any comma at all, the items are listed with spaces between them. Too bad :(
That will leave us to implement the comma separated list inside the application, in our case: in Wicket. The following small code fragments explain the basic idea:
<wicket:container wicket:id="list">
  <span wicket:id="comma"> </span>
  <span wicket:id="label">some value</span>
We created a container without markup; inside the container we have defined a "comma" component, and a "label" component. If we take a look at the Java code, it is pretty easy to understand how it goes, actual code fragment uses ListView:
   add(new ListView<String>("list", new MyListModel(myParentModel)) {
       private static final long serialVersionUID = 1L;
       protected void populateItem(final ListItem<String> item) {
           item.add(new Label("comma", ", ") {
               private static final long serialVersionUID = 1L;
               public boolean isVisible() {
                   return item.getIndex() != 0;
           item.add(new Label("label", item.getModel()));
The first comma component is not shown, while all the others are. It is really simple to implement - after you have the idea and design. Of course you might get rid of the <span> elements too, if that makes sense in your application.

published:2009-09-27, a:István, y:2009, l:wicket