Marcio Garcia

After create a maven project directly on Eclipse and setting JavaServer Faces Facet for that project I faced a problem that the visual editor of the faces-config files didn’t load it. Just the XML view was OK.
Surfing on the Internet I have found some tips about that, one of them was to include the JSF Facet. It can be found here and here. But it didn’t solve my problem. What realy solved that was to include a line directly into the .settings/org.eclipse.wst.common.component file.
Follow bellow my .settings/org.eclipse.wst.common.component file in two versions, the first one with out the visual jsf config editor working and the second one with it running OK.
Note that the only thing that has changed was the inclusion of the one line in the wb-module.

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!