Java, Tomcat, and Eclipse for Web Development - Part IV 
Copyright © 2005
Yaodong Bi 


Develop Java Web Applications using Eclipse

This section of the tutorial provides a sample Tomcat project as a jumpstart. The project is located at a CVS repository and the students in my CMPS 341 will be able to download this project to your Eclipse.  

1. CVS 

CVS, Concurrent Versions System , is a version control system in the public domain. Using CVS, you can record the history of your source files and/or documents. With Eclipse, in addition to version control, you can also use CVS as a common repository for all members of your team.

With CVS, members of your team can share the same copy of source code files stored at the CVS repository. After making modifications on the copy on your local machine, you can commit all the changes to the repository. The other members of your team can go to the repository to check out the most recently updated version of the source and then make changes on their local machines, and then commit all the changes back to the repository for you and other members of the team to access.

The repositories for our CMPS 341 team projects are on heineken.cs.uofs.edu. This computer has FreeBSD 5.X and CVS installed. On this computer, an account  has been created for everyone and your user name and password will be given in class. Also created are two Unix user groups , one for each team and all the members of a team are assigned to the same group. An repository has been created for each team and it is readable and writeable to all members of the group.

After setting the CVS and repositories, I put a sample project into your team's repository for you to download.

more coming......

2. A Sample Project -- University Information System 

The University Information System, UOFSIS, is designed for a fictional university. There is a slide presentation in Powerpoint on its design and implementation. Click here to download or view it. It is recommended you use Internet Explore if you want to read it online.  

3. Download the Sample Project 

This section of the tutorial only covers how to download, or check out in CVS's term,  the sample project. It does not show how to use CVS for teamed software development.

Start Eclipse, and then go to File->New->Project. The following screen shows up. Click Checkout Projects from CVS. If it is not displayed, click the + sign before CVS to expand it. Click Next.

New project wizard
























The following dialog box should show up. If this is first time you use CVS on your local machine, you will find the middle window display is empty and there is no ":extssh:..." displayed. Select the Create a new repository location radio button, and then click Next.

check out project from CVS





















The following screen is displayed and here you need to enter all the needed information about the repository. The Host is the domain name of the computer where the CVS repository is located. In our case, it is heineken.cs.uofs.edu. The Repository Path specifies the directory of the repository, which, in our case, is /home/cs341grp#/cvsroot (different from what is shown below), replacing # with your team number. Enter your User name and Password as the instructor told you in class. For Connection type: click the pull-down menu triangle on the right and select extssh. Make sure Use Default Port is selected.  Now click Next .

Enter CVS info





























If all the information of the CVS repository was entered correctly, the following screen/dialog box should be shown. If you know the project name, or module,  you may select Use specified module name: and enter the name. You may also select Use an existing module (this will ....)  to display all the modules in the repository, as shownn below. For this tutorial, select UofsisWeb (different from what shown below), the sample project, then click Next .

CVS module list























The following dialog box asks you what the module or project is to be checked out as. For this tutorial, you should choose the selection as shown in the screen below. You should keep the same project name, MyWeb, since the source code files, build.xml and build.properties, which you will see later, depend on this project name.  You could click Finish to start the download, but I chose to go through the last two steps to show what options are available. So click Next

check out as a project



















This dialog box asks where you want to store the module. In most cases, the default location is where you want to store it. Click Next.

project location



















This dialog box allows you to choose which version or branch of the module you want to download. Here we choose HEAD to download the latest version. We will discuss versions and branches shortly. Click Finish.

Tags and Versions



















After clicking Finish in the previous dialogbox, you should see a progress bar indicating the progress of the download. After it is completed, the Eclipse workspace should display the downloaded module, MyWeb, in the Package Explorer display pane as shown below. Click the + sign before MyWeb to expand the project folder.  

New project worokspace


























The expanded folder display is shown below. Depending the default Web browser you choose, the three HTML files may be prefixed with different icons. You may have noticed that there is a tiny red square with X in it right by the project name. That symbol indicates that there is an error(s) in the project and the Problem tab on the right bottom of the window displays a description of the error(s).  For this tutorial the error is the project needs a folder named work. which is to be used by Tomcat to store the Java servlet files compiled from JSP files. Since files in the folder are produced by another program, Tomcat, in this case, this folder is normally not stored in the CVS repository.

What you need to do here is to right click the project name, MyWeb, then choose New->Folder. Make sure you do not select Source folder from New.

Add a folder


































The following dialog box shows and it allows to enter a folder name. Enter work and make sure Enter or select the parent folder has MyWeb entered. Then click Finish .

add work folder
































After the new folder is created, it should show in the project folder and also the red square with X should have disappeared as shown below.

Error flag gone.



































Before you can build and deploy this sample application, you need to configure Ant, a Java-based build tool, much like the Make utility in the Unix world. The configuration is sstore in two separate files. One file is called build.properties and the other is build.xml, both files are stored in the root folder of the project. The build.xml included in the sample project can be kept as it is for most Web applications. It, like Makefile in Make, contains info on where the source files can gbe found and where compiled .class files should stored, and if deployment what files and where the files should be copied to. If you add any .html files or .java files, they will be processed automatically and the modified files will be included in the new deployment.

What you need to change is the 
build.properties file. Find build.xml file in the Package Explorer and then right click and then, from the popup menu,  select Open with->Text editor, as show below:

Edit build.properties


When the file is displayed as shown below, change the MANAGER_NAME and PASSWORD to what you entered for Tomcat manager when Tomcat was set up.

Changer Ant properites

Now it is ready for you to build and deploy your first Web project. Find build.xml file in the Package Explorer and then right click it and then from the pop-up menu select Open with->Ant editor or select Open with->Text editor. Now the contents of build.xml should be displayed in the editing pane as shown below.
build.xml































It is time for you to build and deploy the application. Click the block triangle next to the button with a green circle and briefcase and from the pop-up menu select Run As->2 Ant Build .... The following dialog box should display. Select deploy and usage from the list. It is not necessary to select usage to build and deploy the application, but it asks Ant to show all available build options.

the ant file






































The build result should be displayed in the right bottom pane of Console tab as shown below. If it was successful,  you should see messages like "Copy # files to C\Program Files\....". and "BUILD SUCCESSFUL".

build and deploy































Now first check whether your Tomcat is up running. If not, start it.

Then start a Web browser, like IE, and enter:

http://localhost:8081/

The following window should display.  Click Tomcat Manager in the left column and then enter your manager's user id and password to log in as a manager of your Tomcat.

tomcat home page

































After logging in as a manager, the following page should display and your project, MyWeb, should be displayed in the Path colummn as shown below. Now click MyWeb.

tomcat manager page

































Now it shows what files are available in the MyWeb application for Web users to access.

You did not need to log in as a manager to come to this page. You could have simply entered  http://localhost:8081/MyWeb/ to have this page displayed. Click RegistrarFRM.htm to start the UOFSIS application.

MyWeb homepage


























The following should display. Depending on the Web browser you use, the format may be different. For example, with certain browsers, text and input boxes may not centered as shown here.

Uofs Registrar's page 

































Select Get Course List button in the center to display all courses in the UOFSIS database which is under PostgreSQL on server8.cs.uofs.edu. If you see the following displayed table, your imported sample project is working as it supposed to. Congratulations.

Display course list

































Now you can explore the folders and html and java files in the MyWeb folder in Eclipse to try to understand the sample project.

Another tutorial will be coming soon to explain the sample project and folder layout in general for Web application. Be patient!


<<<--- Previous page                     <<< Home page >>>                      Next page --->>>