- VolkomenJuist.nl - http://www.volkomenjuist.nl/blog -

AjaxTabbedPanel in combination with AjaxLazyLoadPanel

Wicket (extensions) offers a AjaxTabbedPanel to take care of your tabs. The constructor of the AjaxTabbedPanel expects a wicket id (obviously) and a list of ITabs. The implementation of this interface should return the panel via getPanel(String panelId) which will be the ‘actual’ tab. Out-of-the-box Wicket (extensions) offers an abstract implementation of this interface (AbstractTab).

What I want to achieve is that an AjaxIndicator (loading image) will be shown on the place were the actual panel will come till it is completely loaded. Especially when you have a lot of components to render this can be handy. See image below.



My solution was to create a class (AbstractLazyLoadTab) on top of the AbstractTab (implements ITab) which will take care of this. It will use the AjaxLazyLoadPanel.

public abstract class AbstractLazyLoadTab extends AbstractTab {
         //removed some lines

	public Panel getPanel(String panelId) {
		return new AjaxLazyLoadPanel(panelId){

			private static final long serialVersionUID = 1L;

			public Component getLazyLoadComponent(String markupId) {
				return getLazyLoadPanel(final String markupId);

        public abstract Panel getLazyLoadPanel(final String markupId);

Now you can use this class as you normally would do when you use AbstractTab.

When your page (or components higher in the hierarchy) implements IAjaxIndicatorAware to show another loading layer it is possible that you now have two loading layers on top of each other. One on the tab and one which will e.g. block the whole page. To avoid that I created an other class which extends the AjaxTabbedPanel and implements the IAjaxIndicatorAware interface.

public class TabbedComponent extends AjaxTabbedPanel implements IAjaxIndicatorAware{
         //removed some lines
	public String getAjaxIndicatorMarkupId() {
		//Our tab will take care of the loading layer, so return null.
		return null;

Now you can use the classes like this:

  List<ITab> tabs=new ArrayList<ITab>();
    tabs.add(new AbstractLazyLoadTab(new Model("first tab")) {
        public Panel getLazyLoadPanel(String panelId) {
           return new TabPanel1(panelId);

    add(new TabbedComponent("tabs", tabs)

Another solution

If you prefer to have a waiting icon on the right side of the tab itself, you can override the newLink method of AjaxTabbedPanel and use the IndicatingAjaxFallbackLink instead of the AjaxFallbackLink. You will probably have to add the following code to your css file.

span.wicket-ajax-indicator {
float: left;

More information about this solution please click here [1]

Buffer [2]