[an error occurred while processing this directive]

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:

  1. LazyLoadApplication.java
  2. LazyLoad.java
  3. 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

                         

[an error occurred while processing this directive]