Lazy Load Application example in Wicket

In this section of Wicket tutorial we are going to describe you how the ajax lazy load component can be added into your application to make your application much effective.

In this application we are using three of the files as:

LazyLoadApplication.java
LazyLoad.java
LazyLoad.html

LazyLoadApplication calls LazyLoad class which is responsible for rendering the lazy load component on the HTML file.

LazyLoadApplication.java


package com.roseindia.wicket;



import org.apache.wicket.protocol.http.WebApplication;

public class LazyLoadApplication extends WebApplication {

  

  public LazyLoadApplication(){

  

  }

  public Class getHomePage(){

  return LazyLoad.class;

  }

}

LazyLoad.java


package com.roseindia.wicket;



import org.apache.wicket.Component;

import org.apache.wicket.markup.html.basic.Label;

import org.apache.wicket.extensions.ajax.markup.html.AjaxLazyLoadPanel;

import org.apache.wicket.markup.html.WebPage;

import org.apache.wicket.markup.html.image.Image;

import org.apache.wicket.model.Model;



public class LazyLoad extends WebPage{

public LazyLoad()

  {

  add(new Image("image", new Model("beach1.gif")));

  add(new AjaxLazyLoadPanel("lazy")

  {

  @Override

  public Component getLazyLoadComponent(String id)

  {

  try{

  Thread.sleep(3000);

  }

  catch (InterruptedException e){

  throw new RuntimeException(e);

  }

  return new Label(id, "Beach
Image");

  }

  });

  }

}

LazyLoad.html


<html>

  <head>

  <title>Lazy Load - Wicket</title>

  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

  </head>

  <body>

 <div wicket:id="lazy" id="lazytag"></div>

  <img wicket:id="image"/> 

  </body>

</html>

One most important thing is to make entry of LazyLoadApplication class into the web.xml file. These entry lines are as follows:

<filter>
   <filter-name>LazyLoadApplication</filter-name>
   <filter-class>org.apache.wicket.protocol.http.WicketFilter</filter-class>
   <init-param>
   <param-name>applicationClassName</param-name>
   <param-value>com.roseindia.wicket.LazyLoadApplication</param-value>
   </init-param>
   <init-param>
<param-name>debug</param-name>
<param-value>2</param-value>
   </init-param>
</filter>
<filter-mapping>
<filter-name>LazyLoadApplication</filter-name>
   <url-pattern>/wicket/lazy/*</url-pattern>
</filter-mapping>

Output:

Here is the page view after lazy loading.

Download Source Code

Lazy Load Application example in Wicket

Lazy Load Application example in Wicket

Lazy Load Application example in Wicket

Tutorials