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.

Creating Website with the use of template in Wicket

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:

  1. Home
  2. Services
  3. About Us
  4. 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 :
  1. Home.java
  2. Home.html
  3. Services.java
  4. Services.html
  5. AboutUs.java
  6. AboutUs.html
  7. Contact.java
  8. 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 
(JSFarchitecture.

JavaServer Faces (JSFis 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

      0