Wednesday, February 17, 2010

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

  1. Download Facelets as dependency and export to WEB-INF/lib
  2. Configure WEB-INF/web.xml

     <!-- Use Documents Saved as *.xhtml -->
     <!-- Special Debug Output for Development -->
     <!-- Optional JSF-RI Parameters to Help Debug -->
  3. Configure WEB-INF/faces-config.xml

  4. Install JBoss Tools for Facelets editor code completion and other JSF helpers. 
  5. 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).
  6. Create a sample page.

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "">
    <html xmlns=""
    <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;
    <h1> <ui:insert name="title">Default Title</ui:insert> </h1>
    <p> <ui:insert name="body">Default Body</ui:insert> </p>
  7. Redeploy the web app!

To Do
  1. Add Facelets
  2. Add Spring
  3. Add JPA
  4. Add Spring Transactions
  5. Add Spring Security
  6. Unit Testing