Creating Website with the use of template in Wicket

In the previous section of Wicket tutorial you have studied about "printing Hello World", "creating Ajax Auto Completer" and some others very beautiful examples now in this section of Wicket tutorial we are going to describe you how you can create a website by creating templates of it.

In this section of Wicket tutorial we have created a website by using the template and it consists of four links as follows:

Home
Services
About Us
Contact

It consists one header and one footer which will remain same for all nothing will change but the content or page content will be changed according to links. For creating website we have three files as follows:

WebSite.java
WebSite.html
WebsiteApplication.java and according to links we have created four java files more and they have HTML files correspondingly. These files are :

Home.java
Home.html
Services.java
Services.html
AboutUs.java
AboutUs.html
Contact.java
Contact.html

WebSite class file extends WebPage and it contains all the links and when these links are clicked then WebSite class calls its different page's class such as Home.class, Services.class, AboutUs.class, Contact.class.

Here is the full code of WebSite.java


package com.roseindia.wicket;



import org.apache.wicket.markup.html.WebPage;

import org.apache.wicket.markup.html.link.BookmarkablePageLink;



public class WebSite extends WebPage{

 public WebSite(){

  add(new BookmarkablePageLink("homeLink", Home.class));

  add(new BookmarkablePageLink("servicesLink", Services.class));

  add(new BookmarkablePageLink("aboutUsLink", AboutUs.class));

  add(new BookmarkablePageLink("contactLink", Contact.class));

  }

}

corresponding to WebSite.java its HTML file WebSite.html is as follows:


<html>

  <head>

  <title>Wicket Example -Website</title>

  <style>

a:hover{

  background:orange;

  text-decoration:none;

  font-size:14;

 }

.borderedBlock {

 background: #DEDEDE;

 color: blue;

 font-weight: bold;

 border: solid #E9601A;

 border-width: thin;

 padding: 2px 2px 2px 6px;

 margin: 2px;

}



#header {

 text-align: center;

}



#left {

 padding: 10px;

 vertical-align: top;

 width: 20%;

 height: 120px;



}



#content {

 vertical-align: top;

 width: 80%;

 height: 100%;

}



#footer {

 text-align: center;

}

</style>

  </head>

  <body>

  <wicket>

 <div id="header" class="borderedBlock">

 <table width="100%">

 RoseIndia Technologies Pvt. Ltd<br/>

 356-Aggrawal City Plaza

 </table>

 </div>

  <table width="100%">

  <tr>

  <td id="left" class="borderedBlock">

 <ul>

  <ol><a href="#" wicket:id="homeLink">Home</a></ol>

  <ol><a href="#" wicket:id="servicesLink">Services</a></ol>

  <ol><a href="#" wicket:id="aboutUsLink">About Us</a></ol>

 <ol><a href="#" wicket:id="contactLink">Contact</a></ol>

  </ul>

  </td>

  <td id="content" class="borderedBlock">

 <wicket:child/>

  </td>

  </tr>

  </table>

  <div id="footer" class="borderedBlock">

  @ RoseIndia Technologies Pvt. Ltd

  </div>

 </wicket>

  </body>

</html>

<wicket:child/> will remove this content with the markup of the derived component.

Here is the full code of WebsiteApplication.java


package com.roseindia.wicket;

import org.apache.wicket.protocol.http.WebApplication;





public class WebsiteApplication 

	extends WebApplication{

  public WebsiteApplication(){

  

  }

  public Class getHomePage(){

  return Home.class;

  } 



}

Here is the full code of Home.java


package com.roseindia.wicket;

public class Home extends

  WebSite{

  public Home(){

 super();

  }

}

corresponding to Home.java its HTML file Home.html is as follows:


<html>

  <head>

  <title></title>

  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

  </head>

  <body>

<wicket:extend>

 Rose India Technologies Pvt. Ltd.  is a global services company 

    that ensures maximum returns by providing quality software solutions

     and services. The Indian based company provides services to several

     reputed institutional clients, in the domain of IT and IT enabled 

    Technologies. We help in understanding the client requirements and 

    offer customized solutions in various specialized areas like Web 

    based Technologies, Database Systems, Client Server Architecture,

    E-commerce Solutions and Consultancy Services. Other services offered

    include Online Technical Tutorials, Content Development and Generation,

    Web solutions for B2B, B2C, C2C and Travel portals, Web Development,

    Promotion and Hosting, and Applications Service Provider Solutions.

    With expertise and skilled human resource, we also provide assistance

    for offshore development of projects.



Rose India, engaged in providing software solutions world wide,

intends to offer flexible business-centered services in the most simplified

way possible. Our quality and cost-effective solutions compliment our 

client's specific business needs.

</wicket:extend>



  </body>

</html>

<wicket:extend> and </wicket:extend> extends the markup of the super class with this content.

Here is the full code of Services.java


package com.roseindia.wicket;



public class Services extends 

	WebSite{

  public Services(){

  super();

  }

}

corresponding to Services.java its HTML file Services.html is as follows:


<html>

  <head>

  <title></title>

  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

  </head>

  <body>

  <wicket:extend>

Roseindia is one of the renowned online publishing and software 

development companies. We render online tutorials and web services.

 We have a vivid expertise in creating vanguard applications on 

Java Server Faces (JSF) architecture.



JavaServer Faces (JSF) is an advanced Java framework for building

 Web applications. It provides a component-centric approach to 

develop Java Web user interfaces by deploying. The web applications

 handle all of the complexity of managing the user interface with 

the power of JavaServer Faces technology on the server, allowing the 

application developer to focus on their application code.



We have deployed complex solutions for our clients based on JSF 

framework. We have ingeniously provided a significant savings on

 the application development cost and manageability to them. However,

for rapid application deployment, we recommend JSF Framework to our clients.

  </wicket:extend>

 </body>

</html>

Here is the full code of AboutUs.java


package com.roseindia.wicket;



public class AboutUs extends

	 WebSite{

  public AboutUs(){

  super();

  }

}

corresponding to AboutUs.java its HTML file AboutUs.html is as follows:


<html>

  <head>

  <title></title>

  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

  </head>

  <body>

<wicket:extend>

RoseIndia Technologies has been established in the year 2005 and since

     then we have been maintaining its journey smooth and flawless in 

    providing web solutions to our clients. With the advent of time and 

    increasing in-depth technological knowledge, we have been able to gain 

    vast experience so far and consistently serving our clients with 

    outstanding enterprise-level quality web solutions. Our versatile 

    experience in various web-based services within very short time 

    span has made us one of the successful pioneer leaders in meeting 

    with the requirements of the entrepreneurs.

 </wicket:extend>  

  

  </body>

</html>

Here is the full code of Contact.java


package com.roseindia.wicket;



public class Contact extends 

	WebSite{

  public Contact(){

  super();

  }

}

corresponding to Contact.java its HTML file Contact.html is as follows:


<html>

  <head>

  <title></title>

  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

  </head>

  <body>

  <wicket:extend>

Rose India is an eminent Software firm that also 

	provides a wide rangeof services includes high 

	technology, end to end solutions in Software 

Application development, Website designing, 

		Web hosting, Offshore IT consulting Services, 

		Technical writing, Blog writing, Content 

	development
and Copy writing. Besides this, 

	Rose India organization has a strong root

in Job providing sector and Finance and 

		Media sector. We are extremely proficient 

		in web tutorials and professional training 

	services.

<br/>

Address:<br/>

Rose India Technologies Pvt. Ltd,<br/>

356, Aggarwal City Plaza, Mangalam Palace,<br/>

Sector-3, Rohini, 

  </wicket:extend>

 </body>

</html>

One most important thing to do with this example application is that we have to do the mapping of WebsiteApplication class mapping into the XML file web.xml.

<filter>
<filter-name>WebsiteApplication</filter-name>
<filter-class>
org.apache.wicket.protocol.http.WicketFilter
</filter-class>
<init-param>
<param-name>applicationClassName</param-name>
<param-value>
com.roseindia.wicket.WebsiteApplication
</param-value>
</init-param>
<init-param>
<param-name>debug</param-name>
<param-value>2</param-value>
</init-param>
</filter>
<filter-mapping>
<filter-name>WebsiteApplication</filter-name>
<url-pattern>/wicket/website/*</url-pattern>
</filter-mapping>

To run this example start your Web Server and type the following URL into web browser address bar:
http://localhost:8080/WicketExample/wicket/website

Output:

Home Page

Services Page

About Us Page

Contact Page

Download Source Code