JSF 2.0 - "Hello World" in Eclipse (with *.xhtml 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 2.0 using Eclipse

Note 1: The following post and example show classic JSF 2.0 application with a view technology as .xhtml pages. I do not use any additional libraries and extensions for the standard JSF libraries. I don't use (for the time being) templates. JSF implementation used comes from MyFaces.

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

In this post I will show how to create sample JSF 2.0 application using Eclipse. It will be similar application like in the post about creating sample JSF 1.2 application. But there will be some small differences, especially during generating the project and adding JSF capabilities to it. Let's do it.

Step 1: create new dynamic web project for the Tomcat. It is available in "web" menu section under option "File->New->Project":

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

Step 2: adding JSF capabilities for the generated project (JSF and JSTL libraries).

This step is the same as step 2 in previous JSF 1.2 example under Eclipse. The main difference prior to version 1.2 is that JSTL libraries are not necessary, unless application uses *.jsp pages with some standard JSP tags, and we have to choose JSF 2.0 MyFaces. JSF 2.0 support for Project Facets was added in Eclipse Helios and above. For previous Eclipse version (like Galileo) only JSF 1.2 was supported and configuration for JSF 2.0 needs to be done in alternative way (see below).

Note: this configuration allows You to use Code Assist for *.xhtml 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 but only when Your beans are directly declared in faces-config.xml file. Unfortunately this is Eclipse bug that You do not have access to beans declared using annotations (see for example https://bugs.eclipse.org/bugs/show_bug.cgi?id=323709). It is still not fixed in Indigo, despite the fact that it should work in 3.4.x, as noted in the bug.

--------------------------------------------
Step 2 - an alternative way:

We do not have to download requires .jar files for JSF, 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 3: the project structure is ready. Creating sample application.

This will be the same application as for version 1.2 with some differences coming from JSF 2.0:

- pages extenstion will be .xhtml instead of .jsp

- we use annotations in backing beans

- there will be no faces-config.xml file (now)

Everything should look like this:

File web.xml has to be changed like shown on screenshot below:

Step 4: deployment and running.

This step is similar to steps 6 and 7 from JSF 1.2 version. After deploying application on the server and starting the server, we have to open a browser and type in URL:

http://localhost:8080/FirstJSF2

That's all. We should have working JSF 2.0 application.

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

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 (with all required libraries). 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)