Adding an activity monitor to your wicket application

Sometimes its useful in an application to have a list of users who are currently logged onto an application on a server.

To do this, you first need a SessionAttributeListener which listens for attributes being added to and removed from the session:

public class SessionAttributeListener implements HttpSessionAttributeListener {
	private static List activeUsers = Collections.synchronizedList(new ArrayList()); // listener is being called from multiple threads and ArrayList is unsynchronized

	public static List getActiveUsers() {
		return activeUsers;
	}

	@Override
	public void attributeAdded(HttpSessionBindingEvent event) {
		if (event.getName().equals("wicket:wicket.acpro:user.name"))
			activeUsers.add(event.getValue().toString());
	}

	@Override
	public void attributeRemoved(HttpSessionBindingEvent event) {
		if (event.getName().equals("wicket:wicket.acpro:user.name"))
			activeUsers.remove(event.getValue().toString());
	}

	@Override
	public void attributeReplaced(HttpSessionBindingEvent event) {
	}
}

Then from within your application login, you can set a session attribute when a user logs on

Session.get().setAttribute("user.name", getLoggedOnUser().getName());

You don’t need to remove the attribute on logout, as long as you are invalidating the session – this will automatically remove the attribute and invoke the attributeRemoved method of the listener.
The final step is to add an activity monitor display to your application which calls SessionAttributeListener.getActiveUsers() and displays the list.

How to display images in Wicket

For someone starting out with Wicket, it can be tricky to figure out basic things like how to display images. Here are basic three scenarios:


1. Simple fixed image – no wicket code required:
HTML:


This is fine as long as you don’t need any control over the image.


2. Image set from code:
HTML:


JAVA:

.add(new Image("search_icon", new ContextRelativeResource("/images/search_icon.png")))

The ContextRelativeResource method here tells wicket to load the image from the images folder in your application (the same path as used in the relative src attribute used in the simple HTML example 1).


3. Image set using CSS:
HTML:

CSS:

.search {
	background-image: url(images/search_icon.png);
	background-position: center center;
	background-repeat: no-repeat;
	width: 20px;
	height: 20px;
}

This approach is preferred for images which are really only part of the styling of the application (like say a green tick beside a list item) because it reduces the image to an an implicit part of a CSS class, allowing it to be restyled or removed without affecting the code. To change the CSS class of a component at runtime using wicket, you can use a wicket AttributeModifier to change the CSS class of the component.

Note: in the example above, the image path is relative to the referring stylesheet (so if the stylesheet is in the /CSS folder, the image will have to be in /CSS/images folder). However, since the image is simply part of the styles, it makes sense to keep such images together with the stylesheet.

.add(new AttributeModifier("class", true, new Model("search")));