blog.armstrongconsulting.com

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<String> activeUsers = Collections.synchronizedList(new ArrayList<String>()); // listener is being called from multiple threads and ArrayList is unsynchronized
 
	public static List<String> 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 you application which calls SessionAttributeListener.getActiveUsers() and displays the list.

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:

<img src="images/search_icon.png"/>

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

<img wicket:id="search_icon"/>

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).

<div class="search"/>

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<String>("search2")));

About four years ago, we switched our office phone system from a proprietary ISDN PBX to Asterisk with Cisco 7940 handsets. It was an instant success and has been running without interruption ever since. It routes incoming faxes to email, provides voicemail, soft-phones and conference rooms, allows us to take our extensions with us wherever we are in the world, provides us with unlimited incoming and outgoing lines over SIP gateways and all the other amazing stuff which Asterisk provides. It was Asterisk which first made me realize that open-source systems can be a whole lot better than closed-source – especially in the proprietary world of telephony.

The only thing which bothered me about our Asterisk PBX was that it was running on a Dell server equipped with a rather obscure Junghanns quad-port ISDN board. It worried me that if either the server or the board died, it would take us quite some time to restore service.

What I really wanted was Asterisk running as a virtual machine, so I could back it up like all our other VMs and move it around within our network infrastructure as needed. Up until now, this wasn’t practical because of high resolution timer issues with the conferencing features. Finally, with the newest Asterisk versions (we’re using the latest beta of version 1.6.2) running on the newest Linux kernels (Debian), its feasible to run it as a VM.

So, as of today, we have our Asterisk PBX virtualized – no moving parts. It connects to our ISDN lines via a Voxtream Parlay voXip gateway. We’re running it on VMWare server 1.0.10 on a dual quad-core Xeon 5420 server with 12GB RAM (the server is running plenty of other VMs alongside the Asterisk VM) . It uses a scarcely noticeable amount of CPU during regular telephony where Asterisk is just connecting SIP end-points. Only conference-rooms, where the Asterisk server is transcoding multiple streams of voip traffic, actually require much CPU resources. Even there, based on our tests, we don’t expect any significant burden on the server.

Our first approach was to create a DefaultFocusBehavior (as described by Julian Sinai) and attach it to the component which should receive the focus. The problem with this is that after a validation error during a submit, you usually want the focus to jump to the first invalid field, so the user can easily correct his erroneous input. The problem with the DefaultFocusBehavior is that the component to which you added it still has it and will try to grab the focus again. We created two methods for handling focus in our BasePage class (from which all of our application pages are inherited) – setFocus and setFocusToFirstInvalidComponent. The first one is called during page initialization and the second on validation failure. They share enough class variables which allow them to ensure that only one component has the DefaultFocusBehavior at a time.

Wicket components have a convenient getString method to load a (translatable string from a properties file associated with the component (or any component in its hierarchy). It also allows you to provide parameters to those strings in the form “${count} new messages” where count is looked up as a property of the model you pass to getString.

Sometimes, however, I’d prefer to just have simple numbered parameters and provide them as varargs to getString(). So, in my properties file, I’d have “${0} new messages” and I’d call “getString(id, 15)” to get “15 new messages”. To do this, you need to add a method something like this:

String getStringWithParameters(String id, Object... args) {
 return getString(id, new Model<Object[]>(args));
}

This method takes your varargs and creates an object array which the standard getString function can use to look up your parameters by index.

A common issue which Wicket developers face is the need for an AJAX update of the HTML output of a repeater (such as a ListView) which is part of a HTML table (where the repeating element is represented by a single <tr wicket:id=”mylist”> line in the table). The problem is that you can’t just use “target.addComponent(mylist)” – you need some kind of container around the repeater. Using a nested table or div as a container may interfere with your table layout.

The solution is to use a <tbody wicket:id=”mylistcontainer”> tag around the <tr> which you can add to your page with a WebMarkupContainer and then pass to target.addComponent. It provides you with a container around one or more table rows which you can address from Wicket without messing up your table layout.

Here’s something which took me several days to figure out. If you have form fields within a TabbedPanel (or AjaxTabbedPanel), how do you ensure that they get validated and submitted correctly when the user switches tabs . The TabbedPanel unloads panels as the user switches tabs so only the currently selected tab gets submitted. One suggestion (from Julian Sinai) was to use AjaxFormValidatingBehavior as follows:

AjaxFormValidatingBehavior.addToAllFormComponents(form, “onblur”);

This ensures that form fields get submitted every time they lose the focus (which also happens when the user switches tabs). This however still leaves us with the problem that the tab switch has already occurred before you have a chance to react to validation errors.

The solution I eventually found was to prevent the user switching tabs until any form fields within the selected tab validate correctly.

I did this by overloading the newLink method of the TabbedPanel and returning an AjaxSubmitLink instead of the standard AjaxFallbackLink (wouldn’t it make sense to make AjaxSubmitLink the default if the Panel contains form fields?). Since the AjaxSubmitLink needs a form, I needed to additionally extend the AbstractTab used by the TabbedPanel to query its panel for a form.

Here’s the overload of the newLink method:

tabPanel = new TabbedPanel("tabs", tabs) {
	private static final long serialVersionUID = 1L;
 
	@Override
	protected WebMarkupContainer newLink(String linkId, final int index) {
		Form form = ((AbstractTabWithForm) tabs.get(getSelectedTab())).getForm();
 
		if (form != null) {
			return new AjaxSubmitLink(linkId, form) {
				private static final long serialVersionUID = 1L;
 
				@Override
				protected void onError(AjaxRequestTarget target, Form form) {
					super.onError(target, form);
					target.addComponent(tabPanel);
				}
 
				@Override
				protected void onSubmit(AjaxRequestTarget target, Form form) {
					setSelectedTab(index);
					if (target != null) {
						target.addComponent(tabPanel);
					}
				}
 
			};
		} else {
			return super.newLink(linkId, index);
		}
	}
};
tabPanel.setOutputMarkupId(true);
add(tabPanel);

Here’s the subclass of the AbstractTab to provide access to the form:

abstract class AbstractTabWithForm extends AbstractTab {
	private static final long serialVersionUID = 1L;
 
	public AbstractTabWithForm(IModel title) {
		super(title);
	}
 
	// override this if you have a form
	public Form getForm() {
		return null;
	}
}

Here’s how the tabs are added:

tabs.add(new AbstractTabWithForm(new Model("General")) {
	private static final long serialVersionUID = 1L;
	private BasePanel panel = null;
 
	@Override
	public Panel getPanel(String panelId) {
		try {
			if (panel == null)
				panel = new GeneralPanel(panelId, item);
		} catch (Exception e) {
			error(e.getMessage());
		}
		return panel;
	}
 
	@Override
	public Form getForm() {
		return panel.getForm();
	}
});

And here’s how it looks in practice – in the example below, the user is attempting to switch tabs before all required fields have been filled out in the current tab.

I needed to validate a list of email addresses entered into a Wicket text area (a cc: list of email addresses). To do this, I created a simple form validator which breaks up the list from the text area into individual email addresses and then uses the EmailAddressValidator to validate them individually. It illustrates a few Wicket techniques: (a) how to validate a field containing several values which need to be validated individually and (b) how to use a Validator against a string instead of a form component. Anyway, here’s the code in case its of use to anyone.

class CCValidator extends AbstractFormValidator implements Serializable {
	private static final long serialVersionUID = 1L;
	private final TextArea<String> cc;
 
	public CCValidator(TextArea<String> cc) {
		this.cc = cc;
	}
 
	public FormComponent<?>[] getDependentFormComponents() {
		return new FormComponent[] { cc };
	}
 
	public void validate(Form<?> form) {
		String cc_entered = cc.getConvertedInput();
		String[] ccList = cc_entered.split("\r\n");
		for (String email : ccList) {
			if (!isValidEmailAddress(email)) {
				Map<String, Object> map = super.variablesMap();
				map.put("email_address", email);
				error(cc, "invalid_cc", map);
			}
		}
	}
 
	private boolean isValidEmailAddress(final String emailAddress) {
		Validatable<String> v = new Validatable<String>(emailAddress);
		EmailAddressValidator.getInstance().validate(v);
		return v.isValid();
	}
}

To use it, add it to the form as follows:

form.add(new CCValidator(cc));
// where cc is the TextArea where the cc list should be entered

We just started using JRebel on a wicket project with hibernate and Spring. JRebel (formerly known as JavaRebel) provides true hot-swap development under Eclipse – i.e. you never have to republish and wait for hibernate and Spring to reload everything – whenever you save a class JRebel notices and simply reloads the class into the JVM. This greatly increases productivity on larger projects and, perhaps more importantly, removes a major annoyance factor relative to other languages which handle this better.

Installation was a bit confusing because JRebel does not watch for changed classes in the directory where Eclipse puts them by default (at least that was the case for our installation of Eclipse on Mac OS X). To workaround this, you need to add a rebel.xml file to the WEB-INF/classes directory of your project as follows:


<?xml version="1.0" encoding="ISO-8859-1"?>
<application
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xmlns="http://www.zeroturnaround.com"
xsi:schemaLocation="http://www.zeroturnaround.com/alderaan/rebel-2_0.xsd">
<classpath fallback="true">
<dir name="/Users/userx/Documents/workspace/projectx/build/classes"/>
</classpath>
</application>


where the “dir name” element is set to the directory where Eclipse writes the compiled .class files for your project.

In eclipse, you need to modify the launch configuration for tomcat and add the following to the arguments:


-noverify
-javaagent:/path/to/jrebel.jar
-Drebel.trace.log=true
-Drebel.wicket_plugin=true


Labels for checkboxes weren’t working as I expected in wicket panels (i.e. when I clicked the label, the checkbox didn’t react). Looking at the output html I saw that the id of the checkbox had been changed by wicket, so the “label for” was no longer associated with the checkbox. The solution was to use the label without the for (and nest the checkbox within the label tag).

Instead of:

<label for="option1">
  <input id="option1" type="checkbox" wicket:id="option1"/>Option 1
</label>

use:

<label>
  <input type="checkbox" wicket:id="option1"/>Option 1
</label>