Friday, October 05, 2012

Dynamic Web Application in Eclipse

This post discusses how to create a dynamic web application (Java EE) in Eclipse.  We also explore how to automatically publish changes during development.

In Add an External Server to Eclipse Workspace, we learned how to configure Eclipse to be aware of the Tomcat server we installed on our Mac.  Now let's build a sample web application for it.

Dynamic Web Project
In Eclipse, the easiest way to build a Java EE web application is by creating a Dynamic Web Project.  Open the File > New > Other... menu, or simply press ⌘N.  In the dialog that opens, select the 'Dynamic Web Project' wizard:
Click 'Next'.  In the subsequent dialog, give the project a name, 'Hello World' for example, and select 'Apache Tomcat v7.0' as the target runtime:
Click 'Finish' when done.  The result will be a new project called 'Hello World':
Yay!  We have created a dynamic web project in Eclipse.

Index JSP
Our Hello World project is great, but not really useful yet.  Let's create a file to be served so that we can see our web application in action.  Open the File > New > Other... menu, or simply press ⌘N.  In the dialog that opens, select the 'JSP File' wizard:
Click 'Next'.  In the subsequent dialog, select "Hello World/WebContent" as the parent folder and name the file 'index.jsp':
Click 'Finish' when done.  Eclipse will automatically open the index.jsp file in the editor.  Add some text to the body, say the phrase "Hello, world!" or something:
Save the file when you are done.

Run on Server
Now we are ready to launch our web application.  Open the Run > Run As > Run on Server menu.  In the subsequent dialog, choose 'Tomcat v7.0 Server at localhost' as the target server, and check the box for 'Always use this server':
(Circled in red.)  Click 'Finished' when done.  Eclipse will automatically start the Tomcat server and open the index.jsp file in the built-in web browser:
You may also open the 'Hello World' application by pointing your browser to http://localhost:8080/Hello_World/:
Yay!  We have successfully created a sample web application.

You may have noticed, the title of the web page still says 'Insert title here':
(Circled in red.)  Returning to Eclipse, open index.jsp in the editor and change the title to 'Hello World':
Save the file when finished.  Back in your browser, refresh the page and notice the new title:
(Circled in red.)  Yay!  Our web application has the correct title.

Publishing Changes
Tomcat picked up the change automatically.  But how did this happen?  To answer this question, double-click on the Tomcat server in the 'Servers' view to open the 'Overview'.  Notice the collapsed 'Publishing' panel in the upper right:
(Circled in red.)  Expand it to reveal the setting to 'Automatically publish when resources change':
Change to 'Never publish automatically' to disable automatic publishing.  Save the changes.

Now, changes to the JSP will have to be published manually.  To illustrate, return to index.jsp in Eclipse and augment the body text to look like this:
Hello, world!<br>
I am a <%= config.getServletName() %>.
Save the file and return to your browser.  This time, when you refresh the page, the change you just made will not appear automatically.  

To manually publish the changes to the server, return to the 'Servers' view, select the Tomcat server, and click the 'Publish' button:
(Circled in red.)  Return to your browser and refresh the page to reveal the changes:
Yay!  We now know how to disable automatic publishing and publish changes manually.  (To restore automatic publishing, return to the server 'Overview' and set the desired option in the 'Publishing' panel.  Save your changes when done.)