Apache Wicket Ajax example with AjaxButton explained step by step below.

Prerequisite: Eclipse & JDK setup

If you don’t have Eclipse and JDK installed, follow this URL –

https://digitalappconsultancy.com/site/learning-java-hello-world-example/

Software used are listed below;

Eclipse 4.6.x
JDK 1.8.x
Apache Wicket 7.7.x
Apache Tomcat 8.5
Maven & Wicket (optional) Eclipse Plugin

Finally the project should look as below;

Step 1: Basic software setup;

If you already have them Jump to Step 2

1. Maven & Apache Wicket Plugin Install
2. Tomcat 8.5 server installation and setup

Refer – https://digitalappconsultancy.com/site/eclipse-tomcat-apache-wicket-maven-setup-with-hello-world-example/

Step 2: New Maven project

Create new Maven project -> Create Simple project (skip archetype selection) – Provide details as below;

Step 3: Update pom.xml & web.xml

Your web.xml should look as below;

<web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns="http://xmlns.jcp.org/xml/ns/javaee" xsi:schemaLocation="http://xmlns.jcp.org/xml/ns/javaee http://xmlns.jcp.org/xml/ns/javaee/web-app_3_1.xsd" id="WebApp_ID" version="3.1">
  <display-name>MyWebApp</display-name>
  
   <filter>
        <filter-name>MyWebAppApplication</filter-name>
        <filter-class>org.apache.wicket.protocol.http.WicketFilter</filter-class>
        <init-param>
          <param-name>applicationClassName</param-name>
          <param-value>com.webapp.WicketApplication</param-value>
        </init-param>
    </filter>
    <filter-mapping>
        <filter-name>MyWebAppApplication</filter-name>
        <url-pattern>/*</url-pattern>
    </filter-mapping>
</web-app>

 

Update Maven pom.xml to download tomcat plugin and Apache wicket framework and Junit framework.

<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
    xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd">
    <modelVersion>4.0.0</modelVersion>
    <groupId>MyWebApp</groupId>
    <artifactId>MyWebApp</artifactId>
    <version>0.0.1-SNAPSHOT</version>
    <packaging>war</packaging>
    <build>
        <sourceDirectory>src/main/java</sourceDirectory>
        <testSourceDirectory>src/test/java</testSourceDirectory>
        <plugins>
            <plugin>
                <artifactId>maven-compiler-plugin</artifactId>
                <version>3.5.1</version>
                <configuration>
                    <source>1.8</source>
                    <target>1.8</target>
                </configuration>
            </plugin>
            <plugin>
                <artifactId>maven-war-plugin</artifactId>
                <version>3.0.0</version>
                <configuration>
                    <warSourceDirectory>WebContent</warSourceDirectory>
                </configuration>
            </plugin>

            <!-- Tomcat Maven plugin to deploy war file -->
            <plugin>
                <groupId>org.apache.tomcat.maven</groupId>
                <artifactId>tomcat7-maven-plugin</artifactId>
                <version>2.2</version>
                <configuration>
                    <url>http://localhost:8080/manager/text</url>
                    <server>TomcatServer</server>
                    <path>/MyWebApp</path>
                </configuration>
            </plugin>
        </plugins>
    </build>

    <dependencies>
        <!-- Apache Wicket Jars -->
        <dependency>
            <groupId>org.apache.wicket</groupId>
            <artifactId>wicket-core</artifactId>
            <version>7.7.0</version>
        </dependency>
        
        <!-- https://mvnrepository.com/artifact/junit/junit -->
        <dependency>
            <groupId>junit</groupId>
            <artifactId>junit</artifactId>
            <version>4.12</version>
            <scope>test</scope>
        </dependency>
        
        <!-- Apache Wicket Testing need this jar -->
        <dependency>
            <groupId>javax.servlet</groupId>
            <artifactId>javax.servlet-api</artifactId>
            <version>3.0.1</version>
            <scope>provided</scope>
        </dependency>
    </dependencies>
</project>

 

Step 5: Create Wicket Person Page with Form Model

Complete WicketApplication.java source code provided below;

package com.webapp;

import org.apache.wicket.markup.html.WebPage;
import org.apache.wicket.protocol.http.WebApplication;

import com.webapp.page.PersonPage;

public class WicketApplication extends WebApplication
{
    @Override
    public Class<? extends WebPage> getHomePage()
    {
            return PersonPage.class;
    }

    @Override
    public void init()
    {
            super.init();
            // add your configuration here           
    }
}

 
Complete PersonModel.java source code provided below;

package com.webapp.page;

public class PersonModel {
    
    private String mobileNumber;
    private String firstName;
    private String lastName;
    
    
    /**
     * @return the mobileNumber
     */
    public String getMobileNumber() {
        return mobileNumber;
    }
    /**
     * @param mobileNumber the mobileNumber to set
     */
    public void setMobileNumber(String mobileNumber) {
        this.mobileNumber = mobileNumber;
    }
    /**
     * @return the firstName
     */
    public String getFirstName() {
        return firstName;
    }
    /**
     * @param firstName the firstName to set
     */
    public void setFirstName(String firstName) {
        this.firstName = firstName;
    }
    /**
     * @return the lastName
     */
    public String getLastName() {
        return lastName;
    }
    /**
     * @param lastName the lastName to set
     */
    public void setLastName(String lastName) {
        this.lastName = lastName;
    }
}

 
Complete PersonForm.java source code provided below;

package com.webapp.page;

import org.apache.wicket.ajax.AjaxRequestTarget;
import org.apache.wicket.ajax.markup.html.form.AjaxButton;
import org.apache.wicket.markup.html.form.Form;
import org.apache.wicket.markup.html.form.TextField;
import org.apache.wicket.model.CompoundPropertyModel;

public class PersonForm extends Form<Void> {

    private static final long serialVersionUID = 157873863293813131L;
    


    public PersonForm(String id) {		
        super(id);
        
        PersonModel model = new PersonModel();
        CompoundPropertyModel<PersonModel> compoundModel;
        
        setDefaultModel(compoundModel = new CompoundPropertyModel<PersonModel>(model));;
        
        add(new TextField<String>("mobileNumber", compoundModel.bind("mobileNumber")));
        add(new TextField<String>("lastName", compoundModel.bind("lastName")));
        add(new TextField<String>("firstName", compoundModel.bind("firstName")));
        
        
        add(new AjaxButton("ajaxButton") {

            private static final long serialVersionUID = -1938534673862856919L;
            
            @Override
            protected void onSubmit(AjaxRequestTarget target, Form<?> form) {
                super.onSubmit(target, form);
                
                PersonModel personModel = (PersonModel)form.getDefaultModelObject();
                if("1234567890".equals(personModel.getMobileNumber())){
                    personModel.setFirstName("Niranjan");
                    personModel.setLastName("Velagapudi");
                }else{
                    // Wipe out data as the search criteria didnt work
                    personModel.setFirstName("");
                    personModel.setLastName("");
                }
                target.add(form);
            }
        });

    }
    
}

 
Complete PersonPage.java source code provided below;

package com.webapp.page;

import org.apache.wicket.markup.html.WebPage;
import org.apache.wicket.request.mapper.parameter.PageParameters;

/**
 * @author Niranjan Velagapudi
 *
 */
public class PersonPage extends WebPage{

    private static final long serialVersionUID = 5946349607750478191L;
    

    public PersonPage(final PageParameters parameters) {
        super(parameters);
    	add(new PersonForm("personForm"));
    }
}

 
Complete PersonPage.html source code provided below;

<?xml version="1.0" encoding="UTF-8"?>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:wicket="http://wicket.apache.org">
<head>
    <title>Wicket Ajax Example</title>
    <link rel="stylesheet" type="text/css" href="style.css"/>
</head>
<body>
   <form id="personForm" method="post" wicket:id="personForm">
        <table>
            <tr>
                <td>
                 	<span>Mobile: </span><input type="text" wicket:id="mobileNumber" /><input type="submit" wicket:id="ajaxButton" value="Search" />
                </td>
            </tr>
            <tr>
                <td>
                 	<span>Fist Name: </span><input type="text" wicket:id="firstName" />
                </td>
            </tr>
            <tr>
                <td>
                 	<span>Last Name: </span><input type="text" wicket:id="lastName" />
                </td>
            </tr>
        </table>			
  </form>		
</body>
</html>

 

Step 6: Unit testing with JUnit Framework
Important feature comes with Apache Wicket framework is ability to unit test Markup (html view) via JUnits.

Create TestPersonPage class under src/test/java package as below;

package com.test.page;

import org.apache.wicket.util.tester.FormTester;
import org.apache.wicket.util.tester.WicketTester;
import org.junit.Before;
import org.junit.Test;
import com.webapp.WicketApplication;
import com.webapp.page.PersonPage;

/**
 * @author Niranjan Velagapudi
 *
 */
public class TestPersonPage {
    private WicketTester tester;

    @Before
    public void setUp() {
        tester = new WicketTester(new WicketApplication());
    }

    @Test
    public void pageRendersSuccessfully() {
        // start and render the test page
        tester.startPage(PersonPage.class);
        // assert rendered page class
        tester.assertRenderedPage(PersonPage.class);
    }
    
    @Test
    public void testAjaxCall(){
        // start and render the test page
        tester.startPage(PersonPage.class);
        // assert rendered page class
        tester.assertRenderedPage(PersonPage.class);
        
        FormTester formTester = tester.newFormTester("personForm");
        formTester.setValue("mobileNumber", "1234567890");
        
        tester.executeAjaxEvent("personForm:ajaxButton", "click");
        
        tester.assertModelValue("personForm:firstName", "Niranjan");
        tester.assertModelValue("personForm:lastName", "Velagapudi");

    }
}

 

 

Finally the project should look as below;

Right click on pom.xml and Run As – Maven with specific goal “tomcat7:deploy” for first time and to redeploy “tomcat7:redeploy”

If Deployment is successful, you should be able to view the Hello World page as below;

Access url – http://localhost:8080/MyWebApp

Now enter mobile number and click search button, Ajax call will be made and you will see response as below;

For further reading refer Apache Wicket Web Development Category posts.

Apache Wicket Ajax example with AjaxButton
Tagged on:     

Leave a Reply

Your email address will not be published. Required fields are marked *