Spring vs Java EE Web Dev: JSF 1.2 + PrimeFaces Web Application Tutorial using Eclipse IDE

Setting up a full stack web application with JSF 1.2 Java web framework takes some work. Here I will show you the "mostly manual" way aka non-Ruby on Rails-style.

The project will:

Use Eclipse Java EE (aka JDT + WTP)
Not use Maven
Deployed on Tomcat
Use PrimeFaces JSF component library

Why?
I know you're smart enough that this is the hard way. Considering there is AppFuse, Maven archetypes, and SpringSource Tool Suite projects templates to help you start a Java web project the Ruby on Rails way. The reason is because:

Educational purposes
Make it easy to depend on non-Maven libraries or our own Eclipse projects

Steps

Create new Dynamic Web project in eclipse, select JSF 1.2.
Download JSF-RI (Mojarra) 1.2 either manually or automatically
Make sure to export on Java EE dependencies to get libs on WEB-INF/lib (aka compile vs provided)
Add el-impl dependency and export. This is needed for deploying to Tomcat, not needed for Glassfish other complete Java EE containers.
Download PrimeFaces 1.x and export
PrimeFaces Resources Servlet
PrimeFaces p:resources (JSF 1.x only)
Put f:view on JSP pages (mandatory) -- see forum thread about NullPointerException on p:resources
Beans -> faces-config.xml . Eclipse IDE helps here, but now you know annotations are much nicer.

Setup Facelets

Download Facelets as dependency and export to WEB-INF/lib

Configure WEB-INF/web.xml

 <!-- Use Documents Saved as *.xhtml -->
 <context-param>
  <param-name>javax.faces.DEFAULT_SUFFIX</param-name>
  <param-value>.xhtml</param-value>
 </context-param>
 <!-- Special Debug Output for Development -->
 <context-param>
  <param-name>facelets.DEVELOPMENT</param-name>
  <param-value>true</param-value>
 </context-param>
 <!-- Optional JSF-RI Parameters to Help Debug -->
 <context-param>
  <param-name>com.sun.faces.validateXml</param-name>
  <param-value>true</param-value>
 </context-param>
 <context-param>
  <param-name>com.sun.faces.verifyObjects</param-name>
  <param-value>true</param-value>
 </context-param>

Configure WEB-INF/faces-config.xml

 <application>
  <view-handler>com.sun.facelets.FaceletViewHandler</view-handler>
 </application>

Install JBoss Tools for Facelets editor code completion and other JSF helpers.
IF you opt for not installing JBoss Tools in the previous step:
- Configure *.xhtml to be opened with JSP Editor. Open Eclipse Preferences, go to Window > Preferences > General > Content Types: Text > JSP > Add (xhtml).
- Configure Eclipse File Type associations to open *.xhtml as JSP Editor by default, not the Doxia Xhtml editor (which is very slow and not helpful).

Create a sample page.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
 xmlns:ui="http://java.sun.com/jsf/facelets">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Facelets: Number Guess Tutorial</title>
<style type="text/css">
<!--
body {
  font-family: Verdana, Arial, Helvetica, sans-serif;
  font-size: small;
}
-->
</style>
</head>

<body>
<h1> <ui:insert name="title">Default Title</ui:insert> </h1>
<p> <ui:insert name="body">Default Body</ui:insert> </p>
</body>

</html>