If on the one hand you have the absolutely perfect Tiles working together (almost inside) Struts, on the other hand Facelets is a very useful, simple and powerful solution for layout design when you are using JSF. In this article I’ll describe how to configure it in a simple way.
Starting
Download the Facelets lib, I’m using the version 1.1.14: facelets download. Put the package in your classpath, generally in the WEB-INF/lib directory of your web app.
If you don’t this is the time to create your “Dynamic Web Application” using Eclipse:
Figure 1: Creating a Dynamic Web Project with Eclipse.
Using Eclipse, locate and double click in the faces-config.xml file, located at: WebContent/WEB-INF/faces-config.xml. You should be able to see a friendly and easy view to configure the faces configurations. Down on the bottom click in the “Others” tab, locate the “View Handler”, click in “Add” and type: com.sun.facelets. select the first option. It should be: com.sun.facelets.FaceletViewHandler.

Figure 2: Configuring the FaceletViewHandler
At this point you may be wondering what the magic happened here? That’s no magic, actually it was just some XML tags added inthe faces-config.xml:
Now it’s time to configure the web.xml. That’s not so easy like the faces-config, you’ll have to open the file in the source mode. I reckon that for the web.xml the source view is more productive than the design. Add the follow instructions:
Note that this is my complete web.xml. Probably you don’t need all these stuffs, copy and paste just the difference and the configurations related with the Facelets.
XHTML versus JSP
I didn’t find any good sample using JSP, actually I didn’t find any. All of them used the xhtml as the extension instead of jsp. For me that’s fine, but if it’s not for you a solution that I’ve found was to download the .tld from the facelets website and put it in the tld directory inside your WEB-INF dir. I dunno if it works, I think that this is too much workaround and decided to give up of this approach and use the well-known and documented xhtm extension. The benefits that I’ve encountered was that all the HTML inserted in the file is “compiled” in runtime, if something wrong was typed you can see the stack trace on the page.
Layout
Great all configurations are done, now it’s time to see our work. First of all we have to create our layout. The strategy here is simple, just a header, content and a footer file. I decided to put these files in the WEB-INF/layout dir.
Take a look in each content:
Header.xhtml:
Footer.xhtml:
Layout.xhtml:
First Page
The target here is to replace the content and keep the header and the footer sections. For that, let’s create a file called index.xhtml with the follow content:
Index.xhtml
Start the tomcat and point your browser out at: http://localhost:8080/your_app/index.jsf
Pay attention, the extension in the URL is JSF and NOT XHTML NOR JSP.
Play with the content and with the variables like title and template to see the difference.
Enjoy!