This example shows you how to use Wicket’s Ajax behaviors and components by building a simple counter that updates through Ajax link clicks.
In all the Wicket examples, you have to put all files in the same package
directory. This means putting the markup files and the java files next to one
another. It is possible to alter this behavior, but that is beyond the scope
of this example. The only exception is the obligatory
web.xml file which
should reside in the
WEB-INF/ directory of your web application root
In this example we assume you already have read and understood the other examples which give you information on the structure and nature of Wicket applications. Specifically read and understand the Hello, World example.
First we’ll create a page that just counts the number of times a link has been clicked. In the following markup you’ll see a link and a label.
The link component will refresh the page and the label will replace the text ‘nr of times’ with the count. Take a look at the following Java file to see how it works on the Java side:
In this class we created a
Model subclass that increases its counter
getObject method gets called, and returns its value. We set
this model on the label component, so that each time the label gets rendered
the counter gets increased.
The link doesn’t do anything, just listen to the requests and update the page. If you run this code in your application (download the Quickstart project and copy/paste the code in the homepage for a quick experience).
The page gets fully refreshed with each link click. That is not very web 2.0, so let’s make it more modern by adding some Ajax stuff.
To make this a more modern UI we’ll have to change a couple of things. First
we need to make the link an Ajax link. Wicket provides several types of Ajax
links, but the best one for our purposes is the
AjaxFallbackLink, as it
provides a fallback to a normal request in case no Ajax is available.
As you can see, the
Link has been replaced with the
AjaxFallbackLink, and the
onClick method now takes a new argument: the
AjaxRequestTarget. If you want a
component to be updated in the Ajax request, you’ll have to add them to the
target. So let’s alter the file to make it possible to add the label to the
We’ve moved the instantiation of the label to the beginning of the page constructor and made a local, final variable. This way we can reference the label in the event handler of the link component.
We also had to call
setOutputMarkupId(true) on the label to be able to
update the component when the request is returned to the client browser. If
we don’t, Wicket will not know how to update the markup in the client.
If you put this code into your page’s class, then you’ll have a working Ajax updating counter.
The most important lesson here is that in order to update components using
Ajax is that you need to add those components to the
that the components that are to be updated in that request, should have