community/tutorials/BuildJ2EEWebApp/BuildJ2EEWebApp.html

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Web Tools Platform</title>

<link href="../../../../../default_style.css" rel="stylesheet">
</head>


<body>

<div align="right"><font face="Times New Roman, Times, serif"
	size="2">Copyright © 2004 Naci Dai.</font>
<table border="0" cellpadding="2" cellspacing="0" width="100%">
	<tbody>
		<tr>
			<td colspan="2" align="left" bgcolor="#0080c0" valign="top"><b><font
				face="Arial,Helvetica"><font color="#ffffff">Eclipse
			Article</font></font></b></td>
		</tr>
	</tbody>
</table>
</div>
<div align="left">
<h1 title="RCP Tutorial"><img src="../../../../../images/Idea.jpg"
	align="middle" height="86" width="120"></h1>
</div>
<h1 align="center">WTP Tutorials – Building and Running a Web
Application</h1>
<p class="summary">This document is the first in a series of
tutorials where we will demonstrate how you can use the rich set of
tools and APIs that comes with the Web Tools Platform Project. This
first tutorial will give you a step by step tour of using some the tools
for web development. For this purpose we will build and run a J2EE web
application using WTP tools and Apache Tomcat.</p>
<p><b>By Naci Dai, Eteration A.S.</b><br>
<font size="-1">December 7, 2004</font></p>
<div align="right">
<table border="0" cellpadding="2" cellspacing="0" width="100%">
	<tbody>
		<tr>
			<td colspan="2" align="left" bgcolor="#0080c0" valign="top"><b><font
				face="Arial,Helvetica"><font color="#ffffff">Introduction</font></font></b></td>
		</tr>
	</tbody>
</table>
</div>
<p>This document is the first in a series of tutorials where we will
demonstrate how you can use the rich set of tools and APIs that comes
with the Web Tools Platform Project. This first tutorial will give you a
step by step tour of using some the tools for web development. For this
purpose we will build and run a J2EE web application using <a
	href="../../../">WTP</a> tools and <a
	href="http://jakarta.apache.org/tomcat" target="_top">Apache Tomcat</a>.
</p>
<div align="right">
<table border="0" cellpadding="2" cellspacing="0" width="100%">
	<tbody>
		<tr>
			<td colspan="2" align="left" bgcolor="#0080c0" valign="top"><b><font
				face="Arial,Helvetica"><font color="#ffffff">Getting
			Started</font></font></b></td>
		</tr>
	</tbody>
</table>
</div>

<h3>Java Development Kit</h3>
<p>You will need a Java Development Kit (JDK) version 1.4.2 and
above as Eclipse 3.1 requires it. Java Runtime Environment (JRE) is
sufficient for Eclipse but it will not be suitable for web application
development. You can get latest JDK from <a href="http://java.sun.com"
	target="_top">Sun</a>.<br>
</p>
<p><img src="images/note.gif" alt="Note: " height="13" width="62">
Most server runtimes require tools, such as the java compiler (found in
tools.jar), that are only found in the JDK but not the JRE.</p>

<p>
<h3>Server Runtime</h3>
We are going to be build a web application that runs on a server. To do
this tutorial you will need a server runtime that is supported by WTP.
<a href="http://jakarta.apache.org/tomcat" target="_top">Apache
Tomcat</a>
,
<a href="http://jonas.objectweb.org" target="_top">ObjectWeb Jonas</a>
, and
<a href="http://www.jboss.org" target="_top">JBoss</a>
are some of the OSS licensed server runtimes supported by WTP. You will
need to download and install the server runtime before you can start
working with WTP. It does not come with one. Later you will learn how to
tell WTP to use your preferred server runtime.
<br>
<h3>Eclipse and other Eclipse Projects</h3>
<p>Obviously, you will need an eclipse installation. The Eclipse
driver used in this tutorial is eclipse-SDK-3.1M3-linux-gtk.zip. You can
find a suitable driver for your platform at here. WTP uses components
from other eclipse projects: The eclipse modeling framework, emf, java
emf model, jem, are used to define models for artifacts defined in many
java, w3c, xml and j2ee standards; The graphical editing framework, gef,
is used to provide graphical editing capabilities for xml, xsd and wsdl
editors, etc. You can obtain these components from their projects.</p>
<ul>
	<li><a href="http://www.eclipse.org/emf" target="_top">EMF</a></li>
	<li><a href="http://www.eclipse.org/gef" target="_top">GEF</a></li>
	<li><a href="http://www.eclipse.org/vep" target="_top">JEM</a></li>
</ul>
<h3>Web Tools Platform</h3>
<p>You will need to download the full WTP package that is used in
this tutorial from <a
	href="http://download.eclipse.org/webtools/downloads">wtp downloads</a>.
You will need a WTP runtime.</p>
<p>Once you have everything downloaded, install JDK and your
favorite server runtime, and unzip eclipse, emf, gef, jem and wtp zip
files to a folder. You are ready to go!</p>
<div align="right">
<table border="0" cellpadding="2" cellspacing="0" width="100%">
	<tbody>
		<tr>
			<td colspan="2" align="left" bgcolor="#0080c0" valign="top"><b><font
				face="Arial,Helvetica"><font color="#ffffff">Setup</font></font></b></td>
		</tr>
	</tbody>
</table>
</div>

<p>
<h3>Preferences</h3>

<p>After you launch eclipse for the first time, but before we can
build our first web application, we need to do a little eclipse house
keeping: If it is not already defined, you will need to set the Java
preferences to point to your JDK installation (see figure). You should
have obtained the latest JDK from <a href="http://java.sun.com"
	target="_top">Sun</a>.</p>
<p><img src="images/figure1.png" width="392" height="365"></p>
<h3>Choose a Server Runtime Environment</h3>
<p>This step involves changing or creating the settings for
Installed Server Runtimes. During web application development, we will
need a server runtime environment to test, debug and run our project. We
begin by telling wtp what our server runtime is, and where it is
located. A &#8220;server runtime environment&#8221; is not a server. It
provides the environment, libraries and infrastructure that a
&#8220;server&#8221; needs. A server is an instance of the server
runtime that can host our web applications and other server-side
components. To define a server runtime, we need to visit the appropriate
Preferences page:</p>
<p><img src="images/figure2.png" width="404" height="402"></p>
<p>Here you will find a list of server runtimes that have been
defined previously. You can choose a server runtime and change its
properties. To add a new one click &#8220;Add&#8230;&#8221;. A wizard
will popup and display a list of server runtimes that are supported by
WTP. Choose your server runtime from the list. Jonas and JBoss are
currently supported under the &#8220;Generic Server Runtime&#8221;.
Basic &#8220;J2EE Runtime Library&#8221; is not a true server runtime,
but can be used for coding support only. It does not provide a server
instance that can be used to run web artifacts.</p>
<p>After you click &#8220;Next&#8221;, you will have to choose the
JDK and the folder where you have installed your server runtime. Of
course, based on your choice of the server runtime, you will be asked to
provide different properties. Click finish. Now we can do the fun part.<br>
<img src="images/figure3.png" width="317" height="364"></p>
<p><img src="images/note.gif" alt="Note: " height="13" width="62">
We chose Apache Tomcat. You can also choose another server such as
ObjectWeb Jonas. If you would like to use them as your runtime, select
the &#8220;Generic Server&#8221;, and follow the wizard to define the
properties for Jonas, JBoss or Weblogic. There are differences between
for server runtimes; Apache Tomcat provides dynamic development support;
i.e: the ability to run the web application from the eclipse project
without the need to publish the artifacts to a server. Generic server
does not support dynamic development, but it will automatically publish
the artifacts (your web application) to the server when you run.</p>
<div align="right">
<table border="0" cellpadding="2" cellspacing="0" width="100%">
	<tbody>
		<tr>
			<td colspan="2" align="left" bgcolor="#0080c0" valign="top"><b><font
				color="#FFFFFF" face="Arial,Helvetica">Developing the
			Application</font></b></td>
		</tr>
	</tbody>
</table>
</div>

<p>In this section we will create a J2EE web application that
contains typical components such as servlets and JSPs. We will:<br>
&#8226; Create a project with a web module<br>
&#8226; Create a servlet<br>
&#8226; Edit deployment descriptor<br>
&#8226; Create and edit a JSP
<p>
<h3>Create a J2EE Web Project with a web module</h3>
<p>Go to New-&gt;Project. Choose Web category from the list of
available wizards to create a new eclipse resource. You will find two
project types available under this category. Simple Web Project is a
basic Eclipse resource project that can be associated with a server. We
are interested in creating a J2EE Web Application, so we will choose the
J2EE Web Project here:<br>
<img src="images/figure4.png" width="327" height="380"></p>
<p>A J2EE Web Project is a type of Java project that has been
initialized to host a server-side application. It needs to be associated
with a Target Server. <br>
A target server provides the container which will be used to execute our
web application. Specifically, it will provide a set of libraries
(jars), that are added to the project classpath, which are needed to
compile our custom classes. E.g.: to create a new Servlet, we need
javax.servlet.* packages. These are not a part of the JDK libraries.
Server runtime provides them to the project. If yiu have skipped the
previos step where we defined a server runtime, you will get a chance to
define one here by clicking on the New&#8230;.<br>
Make sure that &#8220;Add module to an EAR project&#8221; is not
selected. We will create a standalone web application that can be
deployed as a standard web module.<br>
Finally, we will change the context root to &#8220;tutorial&#8221;. This
is used when you access the web application with a URL, i.e.
http://localhost:8080/tutorial <br>
<img src="images/figure5.png" width="493" height="486"></p>
<p>When the wizard completes its tasks, you will find that it has
create a new Java Project and has initialized it so that you can start
with your development right away: It has created a java source folder.
You will add your custom java packages and classes here. It has defined
the classpath (JRE and Tomcat) so that you will have J2EE libraries in
your project classpath. It has created a resource folder named
&#8220;Web Content&#8221;, which mimics the standard WAR structure from
the J2EE specification. It will contain the web resources that will be
packaged with your J2EE web module. All artifacts inside this folder are
accessible from the Web Application context.</p>
<p><img src="images/figure6.png" width="577" height="416"></p>
<p>
<h3>The Design</h3>
<p>This is a simple Hello WTP application. We will call a simple
&#8220;snoop servlet&#8221; that will display information about the
client browser in a JSP file.<br>
<img src="images/figure7.png" width="439" height="383"></p>
<p>
<h3>Create a Servlet</h3>
<p>Go to New-&gt;Class. Create a new Java class that is a subclass
of the standard javax.servlet.http.HttpServlet:</p>
<p><br>
<img src="images/figure8.png" width="490" height="555"></p>
<p>Add the code provided in Listing 1 to the servlet:</p>
<p><b>Listing 1. SnoopServlet.java</b></p>
<pre>package org.eclipse.wtp.tutorial;

import java.io.IOException;

import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

public class SnoopServlet extends HttpServlet {
	public void doGet(HttpServletRequest req, HttpServletResponse resp)
			throws ServletException, IOException {
		String userAgent =  req.getHeader("user-agent");
		String clientBrowser =  "Not known!";	
		if( userAgent != null)
			clientBrowser = userAgent;
		req.setAttribute("client.browser",clientBrowser );
		req.getRequestDispatcher("/showBrowser.jsp").forward(req,resp);
	}
}</pre>


<h3>Edit Web Module Deployment Descriptor</h3>
<p>Web modules in J2EE has a deployment descriptor where you
configure the web application and its components. This deployment
descriptors is called the web.xml. According to the J2EE specification,
it must be located in the WEB-INF folder. web.xml must have definitions
for the Servlet and the Servlet URI mapping. Enter the following lines
into web.xml:</p>

<p><b>Listing 2. Deployment Descriptor web.xml </b></p>
<pre>  &lt;servlet&gt;<br>   &lt;servlet-name&gt;Snoop Servlet&lt;/servlet-name&gt;<br>   &lt;servlet-class&gt;org.eclipse.wtp.tutorial.SnoopServlet&lt;/servlet-class&gt;<br>  &lt;/servlet&gt;<br>  &lt;servlet-mapping&gt;<br>    &lt;servlet-name&gt;Snoop Servlet&lt;/servlet-name&gt;<br>    &lt;url-pattern&gt;/snoop/*&lt;/url-pattern&gt;<br> &lt;/servlet-mapping&gt;<br>
</pre>

<p>You can obtain code assist from the WTP XML editor during this
process by hitting [Ctrl]+[Space] as usual.</p>
<p><img src="images/figure9.png" width="380" height="160"></p>



<h3>Add JSP</h3>
<p>Go to New-&gt;File. Select the WebContent folder and enter
showBrowser.jsp as the file name.</p>
<p><img src="images/figure10.png" width="381" height="580"></p>
<p>Our JSP file will be opened with a &#8220;JSP Source Page
Editor&#8221;. Hit [Ctrl]+[Space] and choose html template. You can get
HTML, JavaScript, JSP and Java code assist in a JSP Editor.</p>
<p><img src="images/figure11.png" width="312" height="206"></p>
<p>JSP Source Page Editor also provides java code assist. Try the
following inside a JSP expression:</p>
<p><img src="images/figure12.png" width="385" height="80"></p>
<p>At the end your JSP should have the following code</p>
<p><img src="images/tip.gif" alt="Tip: " height="13" width="62">Use
the table template</p>
<p><b>Listing 3. showBrowser.jsp</b></p>
<pre>&lt;html&gt;<br>&lt;head&gt;&lt;title&gt;Show Browser&lt;/title&gt;&lt;/head&gt;<br>&lt;body&gt;<br>&lt;table border=&quot;1&quot;&gt;<br>	&lt;tr&gt; &lt;th&gt;Header&lt;/th&gt;&lt;th&gt;Value&lt;/th&gt;<br>	&lt;/tr&gt;<br>	&lt;tr&gt;<br>		&lt;td&gt;user-agent&lt;/td&gt;<br>		&lt;td&gt;&lt;%= request.getAttribute(&quot;client.browser&quot;)%&gt;&lt;/td&gt;<br>	&lt;/tr&gt;<br>&lt;/table&gt;<br>&lt;/body&gt;<br>&lt;/html&gt;</pre>


<h3>Exploring our work:</h3>
<p>Go to the menu Window &gt;Show View and select the Project
Explorer view from the J2EE category.</p>

<p><img src="images/figure13.png" width="295" height="160"></p>
<p>Project explorer is a smart navigator that knows about the web
and J2EE artifacts. You will be able to browse your web module,
deployment descriptors and the contents of these. For example, we can
navigate to the deployment descriptor and observer our servlet and its
mapping.</p>
<p><img src="images/figure14.png" width="284" height="258"></p>
<p>&nbsp;</p>
<div align="right">
<table border="0" cellpadding="2" cellspacing="0" width="100%">
	<tbody>
		<tr>
			<td colspan="2" align="left" bgcolor="#0080c0" valign="top"><b><font
				color="#FFFFFF" face="Arial,Helvetica">Running the
			Application</font></b></td>
		</tr>
	</tbody>
</table>
</div>



<p>In this section we will run our recently developed web
application on a server. In order to do this, we will:<br>
&#8226; Create a server<br>
&#8226; Add our web module to a server<br>
&#8226; Run the server<br>
&#8226; Run the web application.<br>
</p>
<h3>Project has Server Properties</h3>
<p>In the Java Package explorer or the J2EE Project Explorer,
highlight your project name WTP-Tutorial-I and using the right-click
menu (mouse menu) choose properties. Alternatively, you can hit
[Alt]+[Enter]. This will display project properties window. Here we can
set the target runtime and the default server for the project. Remember
that we have chosen the target runtime when we created the project. This
runtime has provided the classpath for the project. You can choose a
different runtime here. This will change the libraries that are used to
compile your application. Here we can also choose a default server. The
default server is the server on which our application will be deployed
and run. If you have not previously defined a server as set it as
default, you will see a message in the properties view. To create a
server you will have to cancel this window and come back to it after you
have created the server.</p>
<p><img src="images/figure15.png" width="429" height="255"></p>
<p>&nbsp;</p>
<h3>Create a Server</h3>
<p>Servers can be created using the Server View. To open a server
view go to Window-&gt;Show View-&gt;Other&#8230;, and choose the Servers
under the Server category.</p>
<p><img src="images/figure16.png" width="296" height="421"></p>
<p>The server view allows you to create servers for the currently
installed server runtime environments. Use the right click menu to
create a new server. In the following wizard, choose the server address
where you will deploy (publish) your web module. You will also have to
choose the server type and, if you have defined more than one installed
environment for this server (see preferences), choose the server
runtime. When you click finish, you have a Server!</p>
<table width="100%" border="0">
	<tr>
		<td><img src="images/figure17.png" width="350" height="63"></td>
		<td><img src="images/figure18.png" width="363" height="413"></td>
	</tr>
</table>
<p>Now you can go back to the project properties and set your
default server.</p>
<table width="100%" border="0">
	<tr>
		<td><img src="images/figure19.png" width="389" height="121"></td>
		<td><img src="images/figure20.png" width="370" height="274"></td>
	</tr>
</table>
<h3>Start the Server</h3>
<p>In the server view, do a menu-click on your server and choose
start, or you can simply click the start button. You will see the
&#8220;Status&#8221; of the server from Stopped to
&#8220;Starting&#8221;, and when the server is ready it will change its
status to &quot;Started&quot;.</p>
<p><img src="images/figure21.png" width="353" height="253"></p>
<h3>&nbsp;</h3>
<h3>Running the Application</h3>
<p>Open your favorite browser and type
http://localhost:8080/tutorial/snoop.</p>
<p><img src="images/figure22.png" width="462" height="149"></p>
<p>
<h3>Can it be easier?</h3>
<p>Well, now that you have been through all this trouble to run your
application, did you know that you could have done all this with almost
just one click? Try to select you WebContents on try &#8220;Run on
server&#8230;&#8221;. The web application will popup inside the WTP web
browser in almost an instant. You can then try to call your servlet as
usual.<br>
</p>
<table width="100%" border="0">
	<tr>
		<td><img src="images/figure23.png" width="360" height="91"></td>
		<td><img src="images/figure24.png" width="463" height="323"></td>
	</tr>
</table>
<p>&nbsp;</p>
<h3>Conclusion</h3>
<p>In this tutorial, we looked at what is necessary to create a
simple web application. The next part will show how we can debug our web
application and monitor http traffic.</p>

<h3><br>
</h3>
<p><small>Java and all Java-based trademarks and logos are
trademarks or registered trademarks of Sun Microsystems, Inc. in the
United States, other countries, or both.</small></p>
<p><small>Other company, product, and service names may be
trademarks or service marks of others.</small></p>

</body>
</html>