Apache Wicket Login Page with Form Model object 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

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 Login Page with form Model

1. Create LoginPage.java which is home page as application URL invoked.
2. Create LoginPage.html which is view page as application URL invoked.
3. Create LoginForm.java which is model form for the Login page.

Complete WicketApplication.java provided below

package com.webapp;

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

import com.webapp.page.LoginPage;

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

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

 

Complete LoginPage.java 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 LoginPage extends WebPage{

    /**
     * 
     */
    private static final long serialVersionUID = 5946349607750478191L;
    

    public LoginPage(final PageParameters parameters) {
        super(parameters);
    	add(new LoginForm("loginForm"));
    }
}

 

Complete LoginPage.html 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 Login Form Model</title>
    <link rel="stylesheet" type="text/css" href="style.css"/>
</head>
<body>
   <form id="loginForm" method="post" wicket:id="loginForm">
 	    <p wicket:id="loginStatus" />
        <fieldset>
             <span>UserName: </span><input type="text" wicket:id="username" />
            <BR>
             <span>Password: </span><input type="password" wicket:id="password" /> 
            <BR>
            <p>
                <input type="submit" name="Login" value="Login"/>
            </p>
        </fieldset>	
  </form>		
</body>
</html>

Complete LoginForm.java provided below

/**
/**
 * 
 */
package com.webapp.page;

import org.apache.wicket.markup.html.basic.Label;
import org.apache.wicket.markup.html.form.Form;
import org.apache.wicket.markup.html.form.PasswordTextField;
import org.apache.wicket.markup.html.form.TextField;
import org.apache.wicket.model.CompoundPropertyModel;

/**
 * @author Niranjan
 *
 */
public class LoginForm extends Form {

	/**
	 * 
	 */
	private static final long serialVersionUID = 157873863293813131L;
	
	private String username;
	private String password;
	private String loginStatus;
	
	public LoginForm(String id) {		
		super(id);
		setDefaultModel(new CompoundPropertyModel(this));

		add(new TextField("username"));
		add(new PasswordTextField("password"));
		add(new Label("loginStatus"));
	}

	public final void onSubmit() {	
		if ("test".equals(username) && "test".equals(password)){
			loginStatus = "Success Login";
			
		}else{
			loginStatus = "Wrong username or password !";
		}
	}

}

 

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 TestLognPage.java class under src/test/java package as below;

/**
 * 
 */
package com.test.page;

import static org.junit.Assert.assertTrue;

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.LoginForm;
import com.webapp.page.LoginPage;

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

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

    @Test
    public void loginpageRendersSuccessfully() {
        // start and render the test page
        tester.startPage(LoginPage.class);
        // assert rendered page class
        tester.assertRenderedPage(LoginPage.class);
    }
    
    @Test
    public void submitLogin(){
        // start and render the test page
        tester.startPage(LoginPage.class);
        // assert rendered page class
        tester.assertRenderedPage(LoginPage.class);
        
        FormTester formTester = tester.newFormTester("loginForm");
        
        //set credentials
        formTester.setValue("username", "test");
        formTester.setValue("password", "test");		
        //submit form
        formTester.submit();
        
        tester.assertLabel("loginForm:loginStatus", "Success Login");	
        
    }
}

 

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 Login page as below;

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

For further reading refer Apache Wicket Web Development Category posts.

Share this post

Apache Wicket Login Page with Form Model object
Tagged on:     

Leave a Reply

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