Apache Wicket Panel Example with Hello World Example 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 sofware 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 Home Page with Menu, Header, Footer panels.

Complete HeaderPanel.java provided below

package com.webapp.page;

import org.apache.wicket.markup.html.panel.Panel;

public class HeaderPanel extends Panel {

    private static final long serialVersionUID = 5218374612129395403L;

    public HeaderPanel(String id) {
        super(id);		
    }
}

 

Complete HeaderPanel.html provided below

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8 " />
</head>
<body>
    <wicket:panel>
        <table width="100%" style="border: 0px none;">
            <tbody>
                <tr>
                    <td>
                        <h1>Header Panel Goes here...</h1>
                    </td>
                </tr>
            </tbody>
        </table>
    </wicket:panel>
</body>
</html>

Complete MenuPanel.java provided below

package com.webapp.page;

import org.apache.wicket.markup.html.panel.Panel;

public class MenuPanel extends Panel {

    private static final long serialVersionUID = 5218374612129395403L;

    public MenuPanel(String id) {
        super(id);		
    }
}

 

Complete MenuPanel.html provided below

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
</head>
<body>
    <wicket:panel>
        <table width="100%" style="border: 0px none;">
            <tbody>
                <tr>
                    <td>
                        <h1>Menu Panel Goes here...</h1>
                    </td>
                </tr>
            </tbody>
        </table>
    </wicket:panel>
</body>
</html>

Complete FooterPanel.java provided below

package com.webapp.page;

import org.apache.wicket.markup.html.panel.Panel;

public class FooterPanel extends Panel {

    private static final long serialVersionUID = 5218374612129395403L;

    public FooterPanel(String id) {
        super(id);		
    }
}

Complete FooterPanel.html provided below

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
</head>
<body>
    <wicket:panel>
        <table width="100%" style="border: 0px none;">
            <tbody>
                <tr>
                    <td>
                        <h1>Footer Panel Goes here...</h1>
                    </td>
                </tr>
            </tbody>
        </table>
    </wicket:panel>
</body>
</html>

 

Complete TemplatePage.java provided below

package com.webapp.page;

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

public class TemplatePage extends WebPage {

    private static final long serialVersionUID = 5218374612129395403L;

    public static final String CONTENT_ID = "contentComponent";

    private Component headerPanel;
    private Component menuPanel;
    private Component footerPanel;

    public TemplatePage(){
        add(headerPanel = new HeaderPanel("headerPanel"));
        add(menuPanel = new MenuPanel("menuPanel"));
        add(footerPanel = new FooterPanel("footerPanel"));
        add(new Label(CONTENT_ID, "Put your content here"));
    }

    
    public Component getHeaderPanel() {
        return headerPanel;
    }

    public Component getMenuPanel() {
        return menuPanel;
    }

    public Component getFooterPanel() {
        return footerPanel;
    }
}

 

Complete TemplatePage.html provided below

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
</head>
<body>
<table width="100%" border="0">
  <tr>
    <td colspan="2" bgcolor="#b5dcb3">
     <div id="header" wicket:id="headerPanel">header</div>
    </td>
  </tr>
  <tr valign="top">
    <td bgcolor="#b5dcb3" width="20%">
     <div id="menu" wicket:id="menuPanel">menu</div>
    </td>
    <td bgcolor="#b5dcb3" width="80%" height="200">
       <wicket:child/>
    </td>
  </tr>
  <tr>
    <td colspan="2" bgcolor="gray">
    <div id="footer" wicket:id="footerPanel">footer</div>
    </td>
  </tr>
</table>
</body>

</html>

 

Complete HomePage.java provided below

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

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

/**
 * @author xh09
 *
 */
public class HomePage extends TemplatePage{

    private static final long serialVersionUID = -7465108755276912649L;
    
    public HomePage(){
        super();		
        replace(new Label(CONTENT_ID, "Hello World!"));
    }

}

 

Complete HomePage.html provided below

<html>
<head>
</head>
<body>
  
    <div style="margin: auto; width: 40%;">
     
    <wicket:extend>
          <span wicket:id="contentComponent" id="contentComponent">Message goes here</span>
    </wicket:extend>
    </div>   

</body>
</html>

 

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.HomePage;

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

    @Override
    public void init()
    {
            super.init();
    }
}

 

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

package com.test.page;

import org.apache.wicket.util.tester.WicketTester;
import org.junit.Before;
import org.junit.Test;

import com.webapp.WicketApplication;
import com.webapp.page.HomePage;

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

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

    @Test
    public void pageRendersSuccessfully() {
        // start and render the test page
        tester.startPage(HomePage.class);
        // assert rendered page class
        tester.assertRenderedPage(HomePage.class);
    }
}

 

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

For further reading refer Apache Wicket Web Development Category posts.

Apache Wicket Panel Example for simple web site
Tagged on:     

Leave a Reply

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