Web Quiz – Step 2: Welcome To the Jungle

Since we have all our tools installed and ready, why not fire them up to run head over heels into the confused world of Java Web development.

What is a workspace?

An Eclipse Workspace is simply a collection of projects that belong together in some sense. Some people have all the projects in one workspace, some create a workspace per project, most somewhere in between.

Eclipse have very few global settings for the application itself. Normally, all “global” settings are for the workspace. This makes it rather practical to collect projects with the same settings in the same workspace. (All settings can be changed on a per project base, too.)

Start Eclipse

To start Eclipse, open the folder where you unzipped it and double-click the exe file with Eclipse blue ball icon. Being a piece of ultra-configurable software, the first thing that pops up is a question of which workspace you would like to use. You can choose any path you like, but for this tutorial, I would recommend c:\java\webtutorial.

If this was a new workspace, the first thing to greet you is the welcome page. There are lot of nifty shortcuts to different things, and I have never every used them. Just close the page with the little X on the tab header and you’re ready to go.

Create the Quiz Project

Every single line of code in Eclipse is written inside a project. Let’s create a nice little Quiz project to have somewhere to play:

1. Choose File->New Project and select Web/Dynamic Web Project in the dialog. Click Next
2. Give it the name Quiz.
3. We have to define where we want to run this baby, but there is nothing in the Target Runtime dropdown. Well, what we don’t have, we create. (Just a hint of God complex.) Press the New button next to the Target Runtime.
4. In the box that pops up, find and select Apache Tomcat v6.0 and click Next.
5. Fill in the path to where you unzipped your Tomcat, and leave the rest with the default values by clicking Finish.
6. Back in the project dialog, make sure that the configuration is the Default Configuration for Tomcat v6.
7. There are a lot of other settings to do and you can take the tour and look at them by pressing Next a few times. When you are fed up with looking at things you shouldn’t change, press Finish to create the project.

What’s in a project?

Take a few seconds and look around inside your newly created project. It is shown in a view called the “Project Explorer” and it doesn’t look exactly the same in the file system, but close enough. (If you want a pure file system view, choose Window\Open View and find the Navigator View.)

• Java Resources: src – here we will put our java source code.
• build – here Eclipse will put everything together. We won’t touch this at all.
• WebContent – this folder will contain all of our web pages; HTML, JSP, etc.
• WEB-INF – contains web resources that we don’t want to be directly accessible (I’ll come back to that) and web.xml.
• web.xml – this file is our Web Description File. It contains information about this web application. We will return to this file several times during this tutorial.

A welcome page

Every site with self-esteem has a welcome page. We need something to catch the visitor and lure him or her deeper into the jungle of web quizzes. Let’s make a Hello World page:

1. Right-click on the project and create a new HTML page.
2. Make sure the WebContent folder is selected in the New HTML Page dialog
3. Name the file index.html
4. In the next page you can select among a number of templates. If you’re a HTML guru, you probably know what to choose here. If not, just go with whatever is default.
5. After you pressed the Finish button, you can start edit the page.

Add some content to the page and save it. Eclipse is no WYSIWYG html editor, but if you try pressing Ctrl-Space in different places in the html code, it will at least help you find tag and attribute names. Normally, it’s probably easier to create the page in your favorite tool and just save the file here.

Running the application

To preview the page, just right-click on it and choose Run/Run on server. (Or, if you’re still in the editor, press the green little run-triangle in the toolbar.) When Eclipse asks you which server to run it on, choose to create new Tomcat 6.0 server and the press Finish. After a little while a web browser will open inside of Eclipse, showing the content of your page.

If you want to, you can open the same URL from any web browser, to see how it looks.

Is this the home page?

In your browser, remove the “/index.html” part of the url and see what happens. If everything is working correctly, it should still show the page.

Find and open the web.xml file again. (The web descriptor, remember?) It’s an XML file, so you can choose between a Design and Source view of the code (the tabs at the bottom of the editor). Whichever way you choose, there is a tag called <welcome-file-list>. Inside this tag is a list of different file names. Whenever you refer to a folder inside our application and not a specific file, tomcat will look for these files (in the order they appear in the xml file) and if it finds one, return that. We were lucky enough (Yeah, right!) to select a filename that was in the list.

Next time, we will try to add some programmatic content. Until then, I expect you to very meticulously create the welcome page of all times. (Or even two pages with links to each other!)