Apache Wicket Panel and Bootstrap Integration with Hello World program 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 Panel classes as below;

1. Create Wicket FooterPanel and HeaderPanel classes which extends Template Panel class.
2. Create HomePage component which extends the TemplatePage component.
3. HeaderPanel, TemplatePanel and FooterPanel uses CSS from bootstrap sample template (which can be customized further according to your needs)

Complete HeaderPanel.java source code 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 source code provided below;

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8 " />
</head>
<body>
    <wicket:panel>
        <nav class="navbar navbar-inverse">
            <div class="container-fluid">
                <div class="navbar-header">
                    <button type="button" class="navbar-toggle" data-toggle="collapse"
                        data-target="#myNavbar">
                        <span class="icon-bar"></span> <span class="icon-bar"></span> <span
                            class="icon-bar"></span>
                    </button>
                    <a class="navbar-brand" href="#">Logo</a>
                </div>
                <div class="collapse navbar-collapse" id="myNavbar">
                    <ul class="nav navbar-nav">
                        <li class="active"><a href="#">Home</a></li>
                        <li><a href="#">Helpdesk</a></li>
                    </ul>
                    <ul class="nav navbar-nav navbar-right">
                        <li><a href="#"><span class="glyphicon glyphicon-log-out"></span>Logout</a></li>
                    </ul>
                </div>
            </div>
        </nav>
    </wicket:panel>
</body>
</html>

 
Complete FooterPanel.java source code 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 source code provided below;

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
</head>
<body>
    <wicket:panel>
        <footer class="container-fluid text-center">
            <p>Footer Text</p>
        </footer>
    </wicket:panel>
</body>
</html>

 
Complete TemplatePage.java source code 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(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 source code provided below;

<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet"
    href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script
    src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script
    src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<style>
/* Remove the navbar's default margin-bottom and rounded borders */
.navbar {
    margin-bottom: 0;
    border-radius: 0;
}

/* Set height of the grid so .sidenav can be 100% (adjust as needed) */
.row.content {
    height: 450px
}

/* Set gray background color and 100% height */
.sidenav {
    padding-top: 20px;
    background-color: #f1f1f1;
    height: 100%;
}

/* Set black background color, white text and some padding */
footer {
    background-color: #555;
    color: white;
    padding: 15px;
}

/* On small screens, set height to 'auto' for sidenav and grid */
@media screen and (max-width: 767px) {
    .sidenav {
        height: auto;
        padding: 15px;
    }
    .row.content {
        height: auto;
    }
}
</style>
</head>
<body>

    <div id="header" wicket:id="headerPanel">header</div>
    <wicket:child />
    <div id="footer" wicket:id="footerPanel">footer</div>
</body>

</html>

 
Complete HomePage.java source code provided below;

package com.webapp.page;

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

public class HomePage extends TemplatePage{

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

}

 
Complete HomePage.html source code provided below;

<html>
<head>
</head>
<body>

    <div style="margin: auto; width: 40%;">

        <wicket:extend>

            <div class="container-fluid text-center">
                <div class="row content">
                    <div class="col-sm-2 sidenav">
                        <p>
                            <a href="#">Link 1 here</a>
                        </p>
                        <p>
                            <a href="#">Link 2 here</a>
                        </p>
                    </div>
                    <div class="col-sm-8 text-left">
                        <h1>Welcome</h1>
                        <p>
                            <span wicket:id="contentComponent" id="contentComponent">Message
                                goes here</span>
                        </p>
                    </div>
                    <div class="col-sm-2 sidenav">
                        <div class="well">
                            <p>Help Tip1</p>
                        </div>
                        <div class="well">
                            <p>Help Tip2</p>
                        </div>
                    </div>
                </div>
            </div>
        </wicket:extend>
    </div>

</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 TestHomePage.java 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 and Bootstrap Integration example
Tagged on:     

Leave a Reply

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