community/tutorials/BuildJ2EEWebApp/BuildJ2EEWebApp.html - www.eclipse.org/webtools - Git at Google

 <!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>

 <p><h3>Java Development Kit</h3>
   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>
 </p>


 <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>

 <p>
 <h3>Edit Web Module Deployment Descriptor</h3>
 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>
	<!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>

	<p><h3>Java Development Kit</h3>
	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>
	</p>


	<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 “server runtime environment” is
	not a server. It provides the environment, libraries and infrastructure that
	a “server” 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 “Add…”. 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 “Generic Server Runtime”.
	Basic “J2EE Runtime Library” 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 “Next”, 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 “Generic Server”,
	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>
	•
	Create a project with a web module<br>
	•
	Create a servlet<br>
	•
	Edit deployment descriptor<br>
	•
	Create and edit a JSP
	<p><h3>Create a J2EE Web Project with a web module</h3>
	<p>Go to New->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….<br>
	Make sure that “Add module to an EAR project” 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 “tutorial”. 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 “Web Content”, 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 “snoop
	servlet” 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->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>

	<p>
	<h3>Edit Web Module Deployment Descriptor</h3>
	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> <servlet><br> <servlet-name>Snoop Servlet</servlet-name><br> <servlet-class>org.eclipse.wtp.tutorial.SnoopServlet</servlet-class><br> </servlet><br> <servlet-mapping><br> <servlet-name>Snoop Servlet</servlet-name><br> <url-pattern>/snoop/*</url-pattern><br> </servlet-mapping><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->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 “JSP Source Page Editor”. 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><html><br><head><title>Show Browser</title></head><br><body><br><table border="1"><br> <tr> <th>Header</th><th>Value</th><br> </tr><br> <tr><br> <td>user-agent</td><br> <td><%= request.getAttribute("client.browser")%></td><br> </tr><br></table><br></body><br></html></pre>


	<h3>Exploring our work:</h3>
	<p>Go to the menu Window >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> </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>
	•
	Create a server<br>
	•
	Add our web module to a server<br>
	•
	Run the server<br>
	•
	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> </p>
	<h3>Create a Server</h3>
	<p>
	Servers can be created using the Server View. To open a server view go to Window->Show
	View->Other…, 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 “Status” of
	the server from Stopped to “Starting”, and when the server is ready
	it will change its status to "Started".</p>
	<p><img src="images/figure21.png" width="353" height="253"> </p>
	<h3> </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 “Run on server…”.
	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>  </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>