Synaptic IT

Facelets

Facelets is a design/layout framework really easy to use and configure. Unfortunately, the lack of good tutorials over the internet, gabe me the idea to write this post to explain how to configure it and use it.

If you are building a JSF application, then Facelets is the perfect match for your layout configuration (although Facelets is independent of the languge and can be used almost anywhere). Facelets is to JSF what Tiles is to Struts.

Facelets properties

Easy components composition.
Logic labels creation.
Expression functions.
Friendly development for the graphic designero.
Component libraries creation.

Basically you will have to add some configuration to your web.xml file, modify you .jsp extentions to .xhtml (or .xjsp), create the layout and learn how to use it.

1 - Download and install all the necesary files into your claspath. You wil have to download the jsf-facelets.jar. Refer to Faces Developer Center to download it.

2 - Configure the web.xml. The first parameter tells Facelets which suffix will your pages have, and the second will let you see a console debug. Add these lines to your web.xml:

<context-param>
  <param-name>javax.faces.DEFAULT_SUFFIX</param-name>
  <param-value>.xhtml</param-value>
</context-param>
<context-param>
  <param-name>facelets.DEVELOPMENT</param-name>
  <param-value>true</param-value>
</context-param>

3 - Define a layout. Create a layout.xhtml and the included pages of the layout (footer.xhtml, header.xhtml and navigation.xhtml, for example).

layout.xhtml

<!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">
 
	<body>
 
		<div>
			<div>
				<ui:include src="header.xhtml" />
			</div>
			<div>
				<ui:include src="navigation.xhtml" />
			</div>
			<div>
				<ui:insert name="body">
                     Default Content
                </ui:insert>
			</div>
			<div>
				<ui:include src="footer.xhtml" />
			</div>
		</div>
 
	</body>
</html>

Then difine the pages that are in the layout: footer.xhtml, header.xhtml and navigation.xhtml. I will put one of these as an example.

header.xhtml

<html xmlns="http://www.w3.org/1999/xhtml"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:f="http://java.sun.com/jsf/core" xml:lang="en" lang="en">
 
	<body>
		<p>
 
			HEADER
		</p>
	</body>
</html>

4 - Rename files. Rename any file you haven’t in your Navigation Rules in the faces-congif.xml file to “.xhtml”.

5 - Use your configuration. Now all the configurarion is done, you have to try it. The only difference now with your old JSF files is that you don`t longer use the f:view to begin your JSF code. You will have to use ui:composition to tell Facelets wich layout this page will apply to and ui:define name=”body” to insert in your template the code inside the tag.

<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:f="http://java.sun.com/jsf/core">
 
<body>
<ui:composition template="layout.xhtml">
 
	<ui:define name="body">
 
		<h:form>
			<h:panelGrid columns="2">
 
			<h:outputLabel value="User Name:"/>
			<h:outputLabel id="username" value="#{UserBean.userName}"></h:outputLabel>
 
			</h:panelGrid>
 
			<h:commandButton value="Back to list"
							rendered="true" action="#{UserBean.listUsers}" id="submit" />
		</h:form>			
	</ui:define>
</ui:composition>
</body>
</html>

By defining ui:define name=”body”, we tell Facelets to insert in the tag named “body” of the layout page all the code of the tag. Notice that the f:view is gone and replaced by the ui:composition tag.

This entry was posted on Domingo, Enero 20th, 2008 at 7.08 am and is filed under Java. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.

8 Responses to “Facelets”

Terry Nova Says:
13. 02 13, 2008 at 3.29 am
LOVE your blog, thanks for entertaining me
Hope there will be more posts soon
regards, terry
ps - sorry im not that good in writing in english because I came from europe - but i understand a lot
Ignatius Says:
2. 07 02, 2008 at 9.13 am
Hola!

Sabes si hay alguna forma de guardar los archivos .xhtml de facelets dentro del WEB-INF?

En lugar de tener todos los archivos sueltos en el directorio de la aplicacion, donde son accesibles desde el navegador, creo que sería mejor tenerlos dentro de un directorio del WEB-INF…

Un saludo!
Leandro De Brasi Says:
3. 07 03, 2008 at 7.58 am
Hola, si los ponés en WEB-INF funciona todo exactamente igual, sólo tenes que cambiar las referencias.

Saludos
Daniel de Perú Says:
8. 09 08, 2008 at 2.33 am
En primer lugar me parece muy bueno la informacion que se ha puesto en esta web. Solamente tengo una duda y es respecto a las reglas de navegacion. Podrias poner un ejemplo sencillo de como deberian quedar en el caso de dar click en una opcion del menu y que solamente refresque la parte del body. Muchas gracias de antemano
Mariano Colombo Says:
8. 09 08, 2008 at 7.01 am
Que tal Daniel?
Mirá yo puse en el header links directamente a otras paginas.

Ej: en jsf tags obviamente.

y la pagina page1.xhtml simplemente tiene una configuración similar a la del ejemplo del post (paso número 5).

Espero que te funcione.
Saludos!!
Evo Morales Says:
10. 10 10, 2008 at 5.54 am
Me parece buena pagina siempre che
rjpunisher Says:
20. 10 20, 2009 at 5.39 am
hola amigo, con tu post he entendido mucho sobre facelets, pero solo me queda una duda, porque utilizas xhtml? no podes hacer todo eso igual con jspf, o con jsf? o el procesamiento es mas rapido asi ? gracias amigo, espero que me aclare las dudas gracias.
Leandro De Brasi Says:
20. 10 20, 2009 at 11.10 am
Hola rjpunisher,

Usamos archivos xhtml solo para el ejemplo, pero puedes tener la extensión que mas te guste, como jspf o jsf.

Saludos!

Facelets

8 Responses to “Facelets”

Leave a Reply