How to use AjaxLazyLoadPanel in Wicket

AjaxLazyLoadPanel definition :

A panel where you can lazy load another panel. This can be used if you have a panel/component that is pretty heavy in creation and you first want to show the user the page and the replace the panel when it is ready.

This feature is really impressive. Here we show you how do convert a normal panel to into this powerful AjaxLazyLoadPanel.

Original Panel

Normal Wicket panel.

<span wicket:id="price"><span>

add(new PricePanel("price"));

Lazy load Panel

Convert to Wicket AjaxLazyLoadPanel.

<span wicket:id="price"><span>

add(new AjaxLazyLoadPanel("price")
{
  @Override
  public Component getLazyLoadComponent(String id)
  {
       return PricePanel(id);
  }
});

Done, now the PricePanel has lazy loading effect. Nice

Beware!

One of the drawback of this AjaxLazyLoadPanel is it does not contains fallback version. If browser’s JavaScript is disabled, the lazy image will keep loading forever.

Here is a trick that play around with it.

1. Puts following code in Wicket’s application class

protected void init() {		
		getRequestCycleSettings().setGatherExtendedBrowserInfo(true);
}

2. Check it

WebClientInfo clientInfo = (WebClientInfo)WebRequestCycle.get().getClientInfo();
if(clientInfo.getProperties().isJavaEnabled()){
add(new AjaxLazyLoadPanel("price")
{
  @Override
  public Component getLazyLoadComponent(String id)
  {
       return PricePanel("price");
  }
});
}else{
  add(new PricePanel("price"));
}

Above function will run the AjaxLazyLoadPanel function if browser supported JavaScript, otherwise delegate to normal request.

Reference

1. How do detect is browser support JavaScript in Wicket