Apparatus:
- Eclipse Java EE IDE for Web Developers. Version: Luna Service Release 2 (4.4.2)
- Apache Tomcat Server / XAMPP
- Java Development Kit
- Java Runtime Environment
Steps:
Step 1: Creating New Project
Step 1.1: Start the Eclipse IDE.
Step 1.2: Select File > New > Dynamic Web Project.
A wizard will pop up as shown below. Give the Project name EnglishDictionary. Select the Target runtime. If the server is not configured, select New Runtime... button. We will learn configuring Apache Tomcat server later.
On pressing Next > button, we will have the following step. Check the Generate web.xml deployment descriptor and click Finish button. You have created your project in the eclipse workspace.
Step 2: Configuring Apache Tomcat Server
On clicking New Runtime... button, you will get the following window. Select Apache Tomcat version as per your requirement and click the Next > button.
You will get the following window. Specify the installation directory where actually Apache Tomcat server is installed in C drive by clicking the Browse... button. Then click the Finish button. Your server is now configured.
Step 3: Adding Web App Libraries to Project (Libraries of MySQL Connector, Struts, and Tiles)
Step 3.1: Copy the following 23 library files at the following location:
D:\java_16t016\EnglishDictionary\WebContent\WEB-INF\lib
D:\java_16t016 is my Eclipse workspace location.
Step 3.2: Refresh the workspace. You will be able to see the added libraries.
Step 3.3: Configure Build Path by right clicking on the project and then selecting Build Path > Configure Build Path....
Before pressing OK button, never forget to check the Targeted Runtimes as shown below.
Step 4: Creating the Packages as per the MVC (Model View Controller) Architecture
Right click on the src package as shown below in the directory tree.
Create new package engdictionary by selecting New > Package as shown below.
Add sub packages connection, controller, and model to package engdictionary as shown below.
Configure Build Path after creating the MVC packages. It will look like as shown below.
Step 5: Actually Integrating the Web Pages
Step 5.1: Create the sub folders dictFiles and dictPages in WebContent folder of project.
dictFiles will contain js and css folders whereas dictPages will contain actual jsp pages.
Step 5.2: Copy the js and css folders from your design template to dictFiles.
Step 5.3: Create header.jsp, footer.jsp, and container.jsp pages in dictPages folder.
Step 5.4: Copy the header content, footer content, and home page (or any other page) content into header.jsp, footer.jsp, and container.jsp respectively.
Step 5.5: Create dictContent.jsp in WebContent folder which will contain all the css and js linkings.
dictContent.jsp Code:
<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
pageEncoding="ISO-8859-1"%>
<%@ taglib uri="http://tiles.apache.org/tags-tiles" prefix="tiles" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<link rel="stylesheet" type="text/css" href="dictFiles/css/dictionary.css"/>
<script type="text/javascript" src="dictFiles/js/validate.js"></script>
<title><tiles:insertAttribute name="title"/></title>
</head>
<body>
<section id="container">
<tiles:insertAttribute name="header"/>
<tiles:insertAttribute name="container"/>
<tiles:insertAttribute name="footer"/>
</section>
</body>
</html>
Step 5.6: Change the css and js linkings into the web page and check using Ctrl key and mouse. If the linking will be successfully done, then an underline will appear below the link as shown below.
Create another jsp pages in the same manner.
Step 5.7: Create tiles.xml file in WEB-INF folder.
tiles.xml Code:
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE tiles-definitions PUBLIC "-//Apache Software Foundation//DTD Tiles Configuration 2.0//EN"
"http://tiles.apache.org/dtds/tiles-config_2_0.dtd">
<tiles-definitions>
<definition name="maintemplate" template="/dictContent.jsp">
<put-attribute name="title" value="Welcome to English Dictionary" />
<put-attribute name="header" value="/dictPages/header.jsp" />
<put-attribute name="container" value="/dictPages/container.jsp" />
<put-attribute name="footer" value="/dictPages/footer.jsp" />
</definition>
<definition name="dictHome.tiles" extends="maintemplate">
</definition>
<definition name="abbreviations.tiles" extends="maintemplate">
<put-attribute name="title" value="Abbreviations"></put-attribute>
<put-attribute name="container" value="/dictPages/abbreviations.jsp"></put-attribute>
</definition>
<definition name="add.tiles" extends="maintemplate">
<put-attribute name="title" value="Add a new word"></put-attribute>
<put-attribute name="container" value="/dictPages/add.jsp"></put-attribute>
</definition>
<definition name="reference.tiles" extends="maintemplate">
<put-attribute name="title" value="Reference"></put-attribute>
<put-attribute name="container" value="/dictPages/reference.jsp"></put-attribute>
</definition>
<definition name="view.tiles" extends="maintemplate">
<put-attribute name="title" value="View"></put-attribute>
<put-attribute name="container" value="/dictPages/view.jsp"></put-attribute>
</definition>
</tiles-definitions>
Step 5.8: Create struts.xml file in resources Source Folder in Java Resources Source Folder. You will have to create the resources Source Folder.
struts.xml Code:
<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE struts PUBLIC
"-//Apache Software Foundation//DTD Struts Configuration 2.0//EN"
"http://struts.apache.org/dtds/struts-2.0.dtd">
<struts>
<package name="default" extends="struts-default" namespace="/">
<result-types>
<result-type name="tiles" class="org.apache.struts2.views.tiles.TilesResult" />
</result-types>
<action name="abbreviations">
<result type="tiles">abbreviations.tiles</result>
</action>
<action name="home">
<result type="tiles">dictHome.tiles</result>
</action>
<action name="add">
<result type="tiles">add.tiles</result>
</action>
<action name="reference">
<result type="tiles">reference.tiles</result>
</action>
<action name="view">
<result type="tiles">view.tiles</result>
</action>
</package>
</struts>
Step 5.9: Update web.xml file with the following code:
<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns="http://java.sun.com/xml/ns/javaee" xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_3_0.xsd" id="WebApp_ID" version="3.0">
<display-name>EnglishDictionary</display-name>
<welcome-file-list>
<welcome-file>index.jsp</welcome-file>
</welcome-file-list>
<filter>
<filter-name>action</filter-name>
<filter-class>org.apache.struts2.dispatcher.FilterDispatcher</filter-class>
</filter>
<filter-mapping>
<filter-name>action</filter-name>
<url-pattern>*.action</url-pattern>
</filter-mapping>
<listener>
<listener-class>org.apache.struts2.tiles.StrutsTilesListener</listener-class>
</listener>
<context-param>
<param-name>tilesdefinitions</param-name>
<param-value>/WEB-INF/tiles.xml</param-value>
</context-param>
<session-config>
<session-timeout>1</session-timeout>
</session-config>
</web-app>
Step 5.10: Create index.jsp file in WebContent folder.
index.jsp Code:
<META http-equiv="REFRESH" content="0; URL=home.action">
Now your template is completely integrated. Never forget to build the path before running the web application.
Step 6: Running the Web Application:
To run the project on the server, right click on the project EnglishDictionary and select Run As > 1 Run on Server. Do not forget to start the server from XAMPP control panel before running the project.
The directory structure of the web application is as follows:
Note: Perform Step 3, after downloading the project and before proceeding to Step 7.
Step 7: After downloading the project, import it into the Eclipse IDE.
Step 7.1: To import the project, click File > Import... . You will get the following window. Select Existing Projects into Workspace and then click Next > button.
Step 7.2: In the next wizard, you will have to browse the project directory and click the Finish button as shown in the following snapshot.
Happy Java Web Application programming..!
No comments:
Post a Comment