JSF 1.2 - "Hello World" in Eclipse (with *.jsp pages)

Requirements:

• installed Java (description here)
• installed and configured Eclipse (description here)
• installed and configured Tomcat for the Eclipse (description here)

You will learn:

• how to create "Hello World" application in JSF 1.2 using Eclipse

Note 1: The following post and example show classic JSF 1.2 application with a view technology as .jsp pages. I do not use any additional libraries and extensions for the standard JSF libraries.

Note 2: I use standard capabilities of IDE platform to generate the project, without those thousands automated plugins which do everything for the user. Sometimes configuration and usage of a plugin is a "pain in the ..." - in my opinion it is worth to know how to deal with a standard set of tools, and after that there is always a time to faciliate our life ;-)

Many publications and tutorials about JSF (Java Server Faces) very briefly descibe the configuration of development environment for the described examples. Many times I saw such situation: after few sentences about "how amazing is JSF" there was a simple list of JSF tags with their attributes described. Or at the beginning there was an example of "Hello World" application and every line of code was described and explained.

I think that is what is missing is the lack of an example of complete project with its directory structure and an information how to create this project and deploy on the web server. I saw some examples where the project structure was shown, but for the building and deploying application user had to use Ant and type some commands. Great, but we need Ant, when we have Ant, we need to be familiar with it to write build.xml file, then we need something else and so on and so on.

This is of course OK if we want to write everything from scratch by hand. But wouldn't it better just to start our IDE, make some clicks and have a complete and working project ready for further development?

Let's see how it looks like in Eclipse IDE.

Step 1: creating dynamic web project for the Tomcat.

Open menu "File->New->Project" and in the "web" section find and choose "Dynamic Web Project" and press "Next":

Press "Next" to go further and set some basic project's properties:

After that we should have generated project structure for the web application.

Step 2: adding JSF capabilities for the generated project.

In order to do this just right click on the project and from the opened context menu choose "Properties" option. Locate the section "Project Facets" and check the option "JavaServer Faces".

Choose "Further configuration required..." option below to configure JSF libraries:

Choose "User Library" type and press marked icon to download JSF libraries. Eclipse Galileo allows to download two implementations of JSF: MyFaces anf from the Sun. Let's choose MyFaces:

Please note that we created a special directory for libraries in the Eclipse workspace - libraries will be downloaded to this directory. After pressing "Next" we have to follow the library installer instructions:

After pressing "Finish", JSF libraries are visible and ready to use in the project.

Step 3: JSTL libraries.

If JSP tags will be used in JSF application, JSTL libraries are required next to automatically downloaded JSF libraries. Unfortunately above automated solution for downloading JSF libraries does not download JSTL libraries, so we have to download them manually. I recommend to create another directory for JSTL libraries next to the JSF downloaded libraries in Eclipse's workspace directory. So create directory "libraries\JSTL" in Eclipse workspace directory, download JSTL libraries from there and put them into that directory. It should look like this:

Now we should create library from the downloaded JSTL files in the Eclipse in order to be able to use them in the project. It will be the similar operation to the creating JSF library - the difference is that we will do it manually. Just open the context menu for the whole project (right click) and go to the "Properties" screen. Then locate "Project Facets" section and find the "Add library" button.

Please note that library list contains JSF libraries added in step 2. Now create new library named "JSTL" like it is shown above, and add .jar files from JSTL directory:

Then make sure that those two libraries (JSF i JSTL) are added to the project (application):

Note: this configuration allows You to use Code Assist for *.jsp pages. Code Assist allows automatically complete JSF tags when typying by pressing CTRL + Space. It also provides direct access to beans, their methods or fields directly from JSP page - just by click on bean/field name.

-------------------------------------------- 

Steps 2 and 3 - an alternative way:

We do not have to download requires .jar files for JSF and JSTL, make user libraries from them in Eclipse and add those libraries to the generated project with "Project Facets" screen. The alternative way is to download all required .jar files and copy them into the generated "WebContent\WEB-INF\lib" directory. After that just refresh the whole project by pressing "F5" on the project's root and all libraries should appear in the section named "Web App Libraries" in the project's structure. This is useful when You have newer version of libraries than those offered to download in "Project Facets" by default.

Is it possible to make a Code Assist also work for this case? Yes it is. You have to enable "Project Facets", then check the option "JavaServer Faces" and then select "Further configuration available...". On the screen You have to select "Disable library configuration" and press OK:

Step 4: the overview of a project.

When steps 1-3 where done as described, the project structure should look like this:

Please note that JSF and JSTL .jar files are visible as user libraries in created in steps 2 and 3.

Step 5: "Hello World" application.

Now we are ready to implement some sample JSF application. First we should create a package named com.firstjsf.backingbeans in the "src" directory. Second we should create two classes inside the package named HelloMessageBean and WelcomeBean. Third we should modify generated faces-config.xml file by adding there our classes and navigation rules. Everything should look like this:

Be careful about small and big letters - names should be exactly as shown above. In the faces-config.xml file we created entries for the navigation rules for not existing yet web pages. Let's create those web pages (index.jsp and message.jsp) in the WebContent directory:

Application is ready.

Step 6: deploying on Tomcat.

At the bottom of a screen locate "Severs" tab. We should have already Tomcat there. Right click on server name to open its context menu, ten choose option "Add and Remove...":

Choose our project and add it to the server by pressing "Add" button:

Step 7: running the application.

Go back to the "Server" tab again and make sure that our project is visible on the server. Then click the marked icon to start the server:

After starting the server we should see that the server state was changed:

After deploying application on the server and starting the server, we have to open a browser and type in URL:

http://localhost:8080/FirstJSF

What next? This simple working project can be used as a base for further learning about JSF. For example we can change the view technology from .jsp to facelets. We can add libraries which extend our standard tags by adding tags with ajax support, i.e RichFaces.

-------------------------------------------

Download source files:

Note: make sure that Java, Eclipse and Tomcat are properly installed and configured for running the project (additional configuration may be required if different directories are used).

Eclipse complete sample project is here. External libraries folder (with JSF and JSTL) is here. You can also download a war file located here (just copy it inside webapps folder in Your Tomcat and start Tomcat with the script startup.bat)