After working on two large-scale, cross contains / platform, web application projects, I’ve come to the conclusion that Java EE is fatally flawed.

If someone asked you to state the most important, guiding principle of the Java language, what would you say? You would would probably say “write once, run anywhere.” Indeed, for Java SE this holds true most all of the time. In Java EE however, it is hopelessly broken. The reality is that every web container is slightly different in ways that force developers work around problems, avoid certain features, or even have different code paths. Different code paths in a language that was never designed for it.

Different aspects of Java EE have different levels of stability. JSP works almost the same across all containers. Things like JSF and Java Persistence (JPA) however are hopeless. My most recent experience is writing a web administration console using JSF for the OpenSSO project. OpenSSO claims to support at at least 8 different web containers. Every container required JSF tweaking that ranged from annoying to just plain terrible. Needless to say I had egg on my face to some degree over the choice to use JSF. It was a no-brainer for me. JSF is the chosen MVC framework for Java EE. My mistake.

The only container where JSF “just worked” was Tomcat. Tomcat isn’t a Java EE container at all.Tomcat doesn’t include JSF or any of it’s dependencies. We might be on to something here. Let’s look at another example: Spring. Spring is essentially a lighter-weight, simpler replacement for Java EE. Why is Spring so popular? One reason is that it is an elegant design. But another, perhaps more important reasons is that no matter what container you are developing on, Spring is Spring. It’s the same JAR, the same code, the same implementation. It makes very few assumptions about the capabilities of the underlying container. Another example is Facelets, a light-weight JSP replacment. I use JSF+Facelets on the OpenSSO project, and it has been flawless (the Facelets part). Why? Because I include the Facelets JAR, it is not provided by the system.

What if Java EE had followed the same model? Java EE should have been nothing more than a plugin framework and some base services. Want to use JSF in your project? Just include it from a managed, networked Java EE module repository. Include the one, common implementation of JSF. Include the approved version for your level of Java EE. If you support Java EE 5, you get JSF version X, across all web containers.

Introduction:

This tutorial shows how to setup Primefaces component suite for a JSF or a Facelets project along with Richfaces in Netbeans6.x. Furthermore, you can learn how to make a hello world application using Primefaces in JSF. First let me give a small intro about Primefaces, which is an open source component suite for Java Server Faces and contains so many obliging features. At first Primefaces is a light weight component that contains more than seventy ajax powered JSF components with rich look and feel. In addition it has TouchFaces module features which is a UI kit used for developing mobile web applications. Also the most important thing is Primefaces is compatable with other components libraries like Richfaces, even the ajax integration part can be attained without any conflicts. Thats ok!! Now let us come to the point this article explains the configuration features of Primefaces with Netbeans6.x.

Prerequisites:

• IDE – Netbeans 6.x
• Tomcat 6.x/Glassfish/Jboss
• JDK 1.5 and above

I assume you have all the prerequisites which I had mention above. Now lets us move to the Configuration part of primefaces with Netbeans6.x which can be accomplished by five easy steps,

Step1(Setup the project):

In Step1, let us see how to set up a JSF web project in Netbeans6.x. Select File —> Newproject —> Choose category as Java Web and select Web Application in Projects and click next —> Give your desired name for the project and click next —> Choose your server and the JavaEE Version and click next —> Select Java ServerFaces check box for the JSF project or Facelets checkbox for the Facelets project in the Framework. Now we had created a web project and next we can move to the second step.

Step2(Library Configurations)

In step two, Let us see how to configure the required libraries for the Primefaces, Downloading Primefaces binaries can be done by two options. Manual Download(Option1), we need to manually download all the required libraries of Primefaces. Alternatively, you may use Maven if you are a Maven user(Option2), Good news for you because maven itself automatically download the required binaries of Primefaces.

Manual Download(Option1)

Download and ensure that your projects WEB-INF/lib directory contains the below jar files inorder to use Primefaces  library together with Richfaces in a JSF project and for Facelets projects add necessary jar files, the link JSF+Facelets+Richfaces Installation Guide would be helpful to do so. You can also download the latest Primefaces jar files from the PrimeFaces google code project site.

• primefaces-ui-0.9.3.jar
• optimus0.8.0.jar
• facestrace1.1.0.jar
• commons-beanutils.jar
• commons-collections.jar
• commons-digester.jar
• commons-logging.jar
• jsf-api.jar
• jsf-impl.jar
• jstl.jar
• commons-discovery-0.4.jar
• commons-codec-1.4.jar
• slf4j-api-1.5.8.jar
• slf4j-simple-1.5.8.jar
• guice-2.0.jar
• richfaces-api-3.3.1.GA.jar
• richfaces-impl-3.3.1.GA.jar
• richfaces-ui-3.3.1.GA.jar

Note: optimus0.8.0.jar and facestrace1.1.0.jar is requirement optional and it doest not required to make the UI components work.

Maven(Option2)

I am not aware of using maven practically, but theoretically I have passed through maven. I like it because it contains good features for managing the libraries. I got this resource from the download section of Primefaces. The following repository definition should be added in repositories section of pom.xml file .

<repository>
<id>prime-repository</id>
<name>Prime Technology Maven Repository</name>
<url>http://repository.prime.com.tr/</url>
<layout>default</layout>
</repository>

Add the dependency configuration for the user interface components like the below example

<dependency>
<groupId>org.primefaces</groupId>
<artifactId>primefaces-ui</artifactId>
<version>0.9.3</version>
</dependency>

I hope you had configured the libraries either by following option1 or option2. If so stay tuned, now let us move to the next step.

Step3(web.xml configuration)

In step3, let us configure the web.xml for the Primefaces.

<web-app version="2.5" xmlns="http://java.sun.com/xml/ns/javaee" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd"></pre>
<context-param>
 <param-name>com.sun.faces.verifyObjects</param-name>
 <param-value>false</param-value>
 </context-param>
 <context-param>
 <param-name>com.sun.faces.validateXml</param-name>
 <param-value>true</param-value>
 </context-param>
 <context-param>
 <param-name>javax.faces.STATE_SAVING_METHOD</param-name>
 <param-value>client</param-value>
 </context-param>

<!--Configuration for Richfaces-->

<filter>
 <display-name>RichFaces Filter</display-name>
 <filter-name>richfaces</filter-name>
 <filter-class>org.ajax4jsf.Filter</filter-class>
 </filter>
 <filter-mapping>
 <filter-name>richfaces</filter-name>
 <servlet-name>Faces Servlet</servlet-name>
 <dispatcher>REQUEST</dispatcher>
 <dispatcher>FORWARD</dispatcher>
 <dispatcher>INCLUDE</dispatcher>
 </filter-mapping>

<!--End of the configuration part for Richfaces-->

servlet>
 <servlet-name>Faces Servlet</servlet-name>
 <servlet-class>javax.faces.webapp.FacesServlet</servlet-class>
 <load-on-startup>1</load-on-startup>
 </servlet>
 <servlet-mapping>
 <servlet-name>Faces Servlet</servlet-name>
 <url-pattern>/faces/*</url-pattern>
 </servlet-mapping>
 <context-param>
 <param-name>org.richfaces.SKIN</param-name>
 <param-value>classic</param-value>
 </context-param>

 <!-- Configuration part for the Primefaces-->

 <servlet>
 <servlet-name>Resource Servlet</servlet-name>
 <servlet-class>
 org.primefaces.ui.resource.ResourceServlet
 </servlet-class>
 <load-on-startup>2</load-on-startup>
 </servlet>
 <servlet-mapping>
 <servlet-name>Resource Servlet</servlet-name>
 <url-pattern>/primefaces_resources/*</url-pattern>
 </servlet-mapping>

 <!-- End of the configuration part for the Primefaces-->

<session-config>
 <session-timeout>
 30
 </session-timeout>
 </session-config>
 <welcome-file-list>
 <welcome-file>faces/welcomeJSF.jsp</welcome-file>
 </welcome-file-list>
</web-app>

In the above configuration, Primefaces configuration for the JSF project is specified. If you want to configure Primefaces for the Facelets projects add the Facelets neccesary configuration in the web.xml and also you can see the loading order of servlets is specified. Servlets with lower values are loaded before servlets with higher values. So the servlet(Faces Servlet) that manages the request processing lifecycle for web applications which utilize the JavaServer Faces to construct the user interface is loaded first and the PrimeFaces UI module’s servlet(Resource Servlet) loaded second. Now the web.xml configuration part gets over and let us move to the next step.

Step4(Taglib specifications):

In step4, Let us learn how to specify the taglibs for the Facelets or JSF projects. For Facelets projects, though the Facelets web page are created in the xhtml documents, the taglibs should be specified like the below

<html xmlns:p="http://primefaces.prime.com.tr/ui" />

As you all know for JSF project, the JSF web page are created in the JSP documents, the taglibs should be specified like the below

<%@ taglib uri="http://primefaces.prime.com.tr/ui" prefix="p" %>

So far we had completed most of the configurations and only one more step is there to finish the set up process of Primefaces in Netbeans6.x.

Step5(Resources Components):

The resource components should be added between the head tag of the page, inorder to include the css and script resources.

<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<p:resources/>
</head>

Setup process of Primefaces in Netbeans6.x has been completed and now let us create a hello world page using Primefaces UI components. The following code should be conjured to do so,

<%@page contentType="text/html" pageEncoding="UTF-8"%>

 <%@ taglib uri="http://java.sun.com/jsf/html" prefix="h"%>
 <%@ taglib uri="http://java.sun.com/jsf/core" prefix="f"%>
 <%@ taglib uri="http://richfaces.org/a4j" prefix="a4j"%>
 <%@ taglib uri="http://richfaces.org/rich" prefix="rich"%>
 <%@ taglib uri="http://primefaces.prime.com.tr/ui" prefix="p" %>

 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
 "http://www.w3.org/TR/html4/loose.dtd">

 <f:view>
 <html>
 <head>
 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
 <title>Hello World</title>
 <p:resources/>
 </head>
 <body>
 <h:form id="helloWorldPageForm">
 <p:panel id="primefacesPanel" header="Hello World"
 footer="Footer"
 style="position: relative; width: 500px; " >
 <h:outputText value="Primefaces is great. My first application using Primefaces"/>
 </p:panel>
 </h:form>
 </body>
 </html>
 </f:view>

By invoking the above code, we had created a Hello World demo application which contains a Primefaces panel, You can also use Richfaces components together with the Primefaces components. I am sure you dont believe, Even the ajax integration part between these libraries works well have a try on it. Now let us have a look on the snap of our Hello World application.

Hello World Application’s Demo Snap:

Thatsall folks. I hope this article clearly explains the Setup of Primefaces in a JSF or Facelets projects along with Richfaces library in Netbeans6.x. If you find this article is quite useful, Dont forget to share with me by your valuable comments. Have a joyous code day.

Introduction

A classified web applications necessitate the use of Cascading Style Sheets(CSS), JavaScript, together with a server-side framework, such as JavaServer Faces(JSF). This article is consecrated for the peoples who wants to use facelets as an alternative view technology for building JSF applications. This article is splitted in to two-part series, Here you will find out how to make a complete Layout in JSF using facelets. In addition, learn how to include the pages dynamically, so that you can make use of serveral JSF forms more dynamic. Before starting this tutorial, first you need to create and configure facelets for your a web application project, the following link Facelet installation would be helpful to configure the facelets for your project.

Part1 - How to make Layouts in Facelets

After creating and installing facelets prerequisite for your project. Lets move to the part1 where you will learn to make template in facelets. As you all know, you can create a web page template for facelets in xhtml documents. This demo application is constructed by the following templates.

1. layout.xhtml
2. layout-Client.xhtml
3. header.xhtml
4. sideBar.xhtml
5. footer.xhtml
6. sample pages like(samplePageOne.xhtml, samplePageTwo.xhtml, samplePage3.xhtml..)

1.Construct layout.xhtml template

First let us construct a layout.xhtml which is the main layout that holds the template styles for the entire application. This mainLayout.xhtml web page contains header, leftColumn, rightColumn, content and footers in a 3 column elastic layout, You can define your own layout, the reason why I have used 3 column elastic layout here is, since the layout widths are defined in ems, elastic layouts allow your page containers to expand depending on the site visitor’s text size preference.

layout.xhtml

<?xml version='1.0' encoding='UTF-8' ?>
<?xml version='1.0' encoding='UTF-8' ?>
<!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"
 xmlns:h="http://java.sun.com/jsf/html">
 <head>
 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
 <link href="./css/default.css" rel="stylesheet" type="text/css" />
 <link href="./css/cssLayout.css" rel="stylesheet" type="text/css" />
 <title>Facelets Template</title>
 <style type="text/css" media="all">
 body
{
 background-color: #2b3a3c;
 color: #2d2e2e;
 font-family: Arial, Helvetica, sans-serif;
 font-size: .8em;
 line-height: 1.2em;
 margin: 0 0 0 0; /* Sets the margin properties for an element using shorthand notation (top, right, bottom, left) */
 padding: 0 0 0 0; /* Sets the padding properties for an element using shorthand notation (top, right, bottom, left) */
 text-align: center; /* Centers the page content container in IE 5 browsers. */
 }
 #outerWrapper
{
 background-color: #fff;
 margin: 0 auto 0 auto; /* Sets the margin properties for an element using shorthand notation (top, right, bottom, left) */
 text-align: left; /* Redefines the text alignment defined by the body element. */
 width: 80em;
 }
 #outerWrapper #header
{
 background-color: #8ab573;
 border-bottom: solid 1px #628152; /* Sets the bottom border properties for an element using shorthand notation */
 font-size: 1.5em;
 font-weight: bold;
 line-height: 1.7em;
 padding: 10px 10px 10px 10px; /* Sets the padding properties for an element using shorthand notation (top, right, bottom, left) */
 }
 #outerWrapper #contentWrapper #rightColumn
{
 background-color: #eef6ed;
 border-left: solid 1px #8ab573; /* Sets the left border properties for an element using shorthand notation */
 float: right;
 padding: 10px; /* Sets the padding properties for an element using shorthand notation (top, right, bottom, left) */
 width: 14em;
 height: 200px;
 }
 #outerWrapper #contentWrapper #leftColumn
{
 background-color: #eef6ed;
 border-right: solid 1px #8ab573; /* Sets the right border properties for an element using shorthand notation */
 float: left;
 padding: 10px; /* Sets the padding properties for an element using shorthand notation (top, right, bottom, left) */
 width: 14em;
 height: 200px;
 }
 #outerWrapper #contentWrapper #content
{
 margin: 0 16em 0 16em; /* Sets the margin properties for an element using shorthand notation (top, right, bottom, left) */
 padding: 10px 10px 10px 10px; /* Sets the padding properties for an element using shorthand notation (top, right, bottom, left) */
 }
 #outerWrapper #contentWrapper .clearFloat
{
 clear: both;
 display: block;
 }
 #outerWrapper #footer
{
 background-color: #8ab573;
 border-bottom: solid 1px #628152; /* Sets the bottom border properties for an element using shorthand notation */
 font-size: 1.5em;
 font-weight: bold;
 line-height: 1.7em;
 padding: 10px 10px 10px 10px; /* Sets the padding properties for an element using shorthand notation (top, right, bottom, left) */
 }
 </style>
 </head>
 <body>
 <div id="outerWrapper">
     <div id="header">
         <ui:insert name="header"/>
     </div>
     <div id="contentWrapper">
         <div id="rightColumn">
             <ui:insert name="rightColumn"/>
         </div>
         <div id="leftColumn">
             <ui:insert name="leftColumn"/>
         </div>
         <div id="content">
             <ui:insert name="content"/>
         </div>
     <br />
     </div>
         <div id="footer">
             <ui:insert name="footer"/>
         </div>
 </div>
 </body>
</html>

<ui:insertag>- this is a templating tag which is used to declare a named content element to be defined by another Facelet. ui:insert tag can be used effectively with the ui:define tag.

Now the main layout has been constructed, next let us construct a layout-Client.xhml.

2.Construct layout-Client.xhml template

This layout-client.xhml template uses three tags,

<ui:composition> tag – a templating tag that wraps the content of layout.xhml template. Facelets view handler will ignore any content outside the composition tag.

<ui:define> tag -  defines the named content of ui:insert tag in layout.xhtml template

<ui:include> tag – constructed inside the ui:define tag to include the other templates.

layout-Client.xhtml

<?xml version='1.0' encoding='UTF-8' ?>
<!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"
 xmlns:f="http://java.sun.com/jsf/core"
 xmlns:h="http://java.sun.com/jsf/html"
 xmlns:a4j="http://richfaces.org/a4j"
 xmlns:rich="http://richfaces.org/rich">
 <body>
 <ui:composition template="./layout.xhtml">
     <ui:define name="header">
         <ui:include src="./header.xhtml"/>
     </ui:define>
     <ui:define name="rightColumn">
         Ads here
     </ui:define>
     <ui:define name="leftColumn">
        <ui:include src="./sideBar.xhtml"/>
     </ui:define>
     <ui:define name="content">
         <rich:panel id="contentRichPanel" style="position: relative;">
             <ui:include src="#{PageViewIdGenerator.includedPage}"/>
         </rich:panel>
     </ui:define>
     <ui:define name="footer">
         <ui:include src="./footer.xhtml"/>
     </ui:define>
 </ui:composition>
 </body>
</html>

3.construct header.xhtml

The template header.xhml should be wrapped inside the ui:define tag of layout-Client.xhml template.

header.xhtml

<?xml version='1.0' encoding='UTF-8' ?>
<!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"
 xmlns:f="http://java.sun.com/jsf/core"
 xmlns:h="http://java.sun.com/jsf/html"
 xmlns:a4j="http://richfaces.org/a4j"
 xmlns:rich="http://richfaces.org/rich">
 <body>
 <h:form method="post">
     <rich:panel style="position: relative;width: auto">
         <h:outputText value="Sample Demo Page"></h:outputText>
     </rich:panel>
 </h:form>
 </body>
</html>

4.Construct sideBar.xhtml

Richfaces component Panel Menu which holds the content page links is used as the side bar. This should be wrapped inside the ui:define tag of  left column or right column(Its up to you) of layout-client.xhtml.

sideBar.xhtml

<?xml version='1.0' encoding='UTF-8' ?>
<!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"
 xmlns:f="http://java.sun.com/jsf/core"
 xmlns:h="http://java.sun.com/jsf/html"
 xmlns:a4j="http://richfaces.org/a4j"
 xmlns:rich="http://richfaces.org/rich">
 <body>
 <h:form id="sideBarId">
 <!-- Richfaces panel menu -->
     <rich:panelMenu styleClass="panelMenu" mode="none" iconExpandedGroup="disc" iconCollapsedGroup="disc"
      iconExpandedTopGroup="chevronUp" iconGroupTopPosition="right"
      iconCollapsedTopGroup="chevronDown" expandSingle="true">
     <!-- Group1 -->
     <rich:panelMenuGroup id="group1Id" label="Group1">
     <!-- Page1 -->
         <rich:panelMenuItem>
             <h:commandLink id="page1LinkId" value="Page1"
                            action="#{PageViewIdGenerator.sideBarAction}">
             <f:param id="page1ParamId" name="pageViewId" value="Page1"/>
             </h:commandLink>
         </rich:panelMenuItem>
     <!-- Page1 Ends -->
     <!-- Page2 -->
         <rich:panelMenuItem>
              <h:commandLink id="page2LinkId" value="Page2"
                             action="#{PageViewIdGenerator.sideBarAction}">
              <f:param id="page2ParamId" name="pageViewId" value="Page2"/>
              </h:commandLink>
         </rich:panelMenuItem>
     <!-- Page2 Ends -->
     <!-- Page3 -->
         <rich:panelMenuItem>
             <h:commandLink id="page3LinkId" value="Page3"
                            action="#{PageViewIdGenerator.sideBarAction}">
             <f:param id="page3ParamId" name="pageViewId" value="Page3"/>
             </h:commandLink>
         </rich:panelMenuItem>
     <!-- Page3 Ends -->
     <!-- Page4 -->
         <rich:panelMenuItem>
             <h:commandLink id="page4LinkId" value="Page4"
                            action="#{PageViewIdGenerator.sideBarAction}">
             <f:param id="page4ParamId" name="pageViewId" value="Page4"/>
             </h:commandLink>
         </rich:panelMenuItem>
         <!-- Page4 Ends -->
         <!-- Page5 -->
         <rich:panelMenuItem>
             <a4j:commandLink id="page5Linkid" value="Page5"
                              action="#{PageViewIdGenerator.sideBarAction}">
             <f:param id="page5Param" name="pageViewId" value="Page5"/>
             </a4j:commandLink>
         </rich:panelMenuItem>
         <!-- Page5 Ends -->
     </rich:panelMenuGroup>
     <!-- End of Group1 -->
     <!-- Group2 -->
     <rich:panelMenuGroup id="group2Id" label="Group2">
         <!-- define group2 codes here-->
     </rich:panelMenuGroup>
     <!-- End of Group2 -->
     <!-- Group3 -->
     <rich:panelMenuGroup id="group3Id" label="Group3">
         <!-- define group2 codes here-->
     </rich:panelMenuGroup>
     <!-- End of Group3 -->
     </rich:panelMenu>
 </h:form>
 </body>
</html>

5.Construct footer.xhtml

The template footer.xhml should be wrapped inside the ui:define tag of layout-Client.xhml template.

footer.xhml

<?xml version='1.0' encoding='UTF-8' ?>
<!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"
 xmlns:f="http://java.sun.com/jsf/core"
 xmlns:h="http://java.sun.com/jsf/html"
 xmlns:a4j="http://richfaces.org/a4j"
 xmlns:rich="http://richfaces.org/rich">
 <body>
 <h:form method="post">
     <rich:panel>
         <h:outputText value="Footer text"/>
     </rich:panel>
 </h:form>
 </body>
</html>

6. Construct sample pages

Create your own required templates which is to be dynamically included in the content of the layout-Client.xhtml template. But now, I have mentioned some sample pages for the reference.

samplePageOne.xhml

<?xml version='1.0' encoding='UTF-8' ?>
<!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"
 xmlns:f="http://java.sun.com/jsf/core"
 xmlns:h="http://java.sun.com/jsf/html"
 xmlns:a4j="http://richfaces.org/a4j"
 xmlns:rich="http://richfaces.org/rich">
 <body>
 <h:form>
     <h:outputLabel value="Hello this is Page One"/>
 </h:form>
 </body>
</html>

samplePageTwo.xhml

<?xml version='1.0' encoding='UTF-8' ?>
 <!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"
 xmlns:f="http://java.sun.com/jsf/core"
 xmlns:h="http://java.sun.com/jsf/html"
 xmlns:a4j="http://richfaces.org/a4j"
 xmlns:rich="http://richfaces.org/rich">
 <body>
 <h:form>
     <h:outputLabel value="Hello this is Page Two"/>
 </h:form>
 </body>
 </html>

So far we have created xhtml documents like header, sideBar, rightColumn and the footer which is to be included statically in the layout.xhml web page. Now let us see how the samplePageOne.xhml(Page1) and samplePageTwo.xhtml(Page2) links of sideBar are dynamically included in the content of layout-Client.xhtml.

Part2-Dynamic Include

Dynamic include can be accomplished with use of the f:param tag defined in the sideBar.xhtml, where we can easily find the clicked link of sideBar. So that the page will be dynamically included in the content of layout.xhtml. we need to construct a backing bean and to configure the managed bean in the faces-config.xml to invoke this.

faces-config.xml Configuration

<managed-bean>
 <managed-bean-name>PageViewIdGenerator</managed-bean-name>
 <managed-bean-class>com.layout.PageViewIdGenerator</managed-bean-class>
 <managed-bean-scope>session</managed-bean-scope>
</managed-bean>

The pertinent backing bean code look like,

PageViewIdGenerator.java

package com.layout;

import javax.faces.context.FacesContext;
/**
 * @author giftsam
 */
public class PageViewIdGenerator
{
private String includedPage = "/samplePageTwo.xhtml";

public String sideBarAction()
{
           /**
           * Get the request parameter map from the context, so that we can find which link of the side is clicked
           */
           FacesContext context = FacesContext.getCurrentInstance();
           String selectedPageViewId =
                  context.getExternalContext().getRequestParameterMap().get("pageViewId");

           if (selectedPageViewId.equalsIgnoreCase("page1"))
           {
               includedPage = "/samplePageOne.xhtml";
           }
           else if (selectedPageViewId.equalsIgnoreCase("page2"))
           {
               includedPage = "/samplePageTwo.xhtml";
           }
           else if (selectedPageViewId.equalsIgnoreCase("page3"))
           {
               includedPage = "/samplePageThree.xhtml";
           }
           else if (selectedPageViewId.equalsIgnoreCase("page4"))
           {
               includedPage = "/samplePageFour.xhtml";
           }
     return "";
 }

 /**
 * @return the includedPage
 */
 public String getIncludedPage()
 {
 return includedPage;
 }

 /**
 * @param includedPage the includedPage to set
 */
 public void setIncludedPage(String includedPage)
 {
 this.includedPage = includedPage;
 }
}

Thatsall folks, now we have created a complete demo application, where samplePageOne.xhml and samplePageTwo.xhtml are included dynamically where as xhtml documents like header, leftColumn, rightColumn and the footer are included statically. Here is the snaps of our sample demo application.

Sample Demo Snaps

Snap1 specifies the dynamic include of samplePageOne when the page1 of sideBar is clicked.

Snap2 specifies the dynamic include of samplePageOne when the page2 of sideBar is clicked.

Conclusion

In this article, we have learned how to constuct a complete layout using facelets as a view technology and also we have learned how to include the pages dynamically, so that you can make use of serveral JSF forms more dynamic. If you find this article is useful to you dont forget to share with me by your valuable comments. Have a joyous code day.

Introduction:

Installing facelets together with richfaces is very simple. I used to develope web applications with JSF and its libraries like richfaces, Icefaces and so on. But I felt, my application have achieved a greater landmark only after implementing facelets. The reason is, facelets contains obliging features like templating(Similarly like struts), Composition components(Reuse can be achieved), also resolves the mismatch between JSF and JSP technologies(Eg: <jsp:param> tag cannot be used in JSF while using <jsp:include> tag) and so on. This article explains the installation of Richfaces and facelets with JSF.

Prerequisites:

• IDE – Netbeans 6.x or Eclipse(Now Netbeans 6.7 provides the feature for creating facelets projects)
• Tomcat 6.x or Glassfish
• JDK 1.5 and above

Installing facelets can be accomplished by four steps in a web application project. If you are the one who use Netbeans 6.7 IDE which provides the features for creating facelet projects kindly skip the below step1 and step3 and just add the richfaces jars specified in the libraries and configure richfaces in web.xml. Others kindly follow the below steps,

Step1:

In step1, download and ensure that your projects WEB-INF/lib directory contains the below jar files.

Libraries:

• commons-beanutils.jar
• commons-collections.jar
• commons-digester.jar
• commons-logging.jar
• el-ri.jar
• jhighlight-1.0.jar
• jsf-api.jar
• jsf-facelets.jar
• jsf-impl.jar
• jstl.jar
• richfaces-api-3.3.1.GA.jar
• richfaces-impl-3.3.1.GA.jar
• richfaces-ui-3.3.1.GA.jar

Step2:

Step2 clearly explains how to configure the web.xml for the facelet projects. Your web.xml file should contains the following configurations for the JSF+Facelets+Richfaces Installations.

web.xml configuration:

<?xml version="1.0" encoding="UTF-8"?>

<web-app version="2.5" xmlns="http://java.sun.com/xml/ns/javaee" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd">

<context-param>
<param-name>com.sun.faces.verifyObjects</param-name>
<param-value>true</param-value>
</context-param>
<context-param>
<param-name>com.sun.faces.validateXml</param-name>
<param-value>true</param-value>
</context-param>
<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>false</param-value>
</context-param>
<context-param>
<param-name>facelets.SKIP_COMMENTS</param-name>
<param-value>true</param-value>
</context-param>
<!-- Richfaces Configuration-->
<context-param>
<param-name>org.richfaces.SKIN</param-name>
<param-value>wine</param-value>
</context-param>
<context-param>
<param-name>org.ajax4jsf.VIEW_HANDLERS</param-name>
<param-value>com.sun.facelets.FaceletViewHandler</param-value>
</context-param>
<filter>
<display-name>RichFaces Filter</display-name>
<filter-name>richfaces</filter-name>
<filter-class>org.ajax4jsf.Filter</filter-class>
</filter>
<filter-mapping>
<filter-name>richfaces</filter-name>
<servlet-name>Faces Servlet</servlet-name>
<dispatcher>REQUEST</dispatcher>
<dispatcher>FORWARD</dispatcher>
<dispatcher>INCLUDE</dispatcher>
</filter-mapping>
<servlet>
<servlet-name>Faces Servlet</servlet-name>
<servlet-class>javax.faces.webapp.FacesServlet</servlet-class>
<load-on-startup>1</load-on-startup>
</servlet>
<servlet-mapping>
<servlet-name>Faces Servlet</servlet-name>
<url-pattern>*.jsf</url-pattern>
</servlet-mapping>
<session-config>
<session-timeout>
30
</session-timeout>
</session-config>
<welcome-file-list>
<welcome-file>index.jsp</welcome-file>
</welcome-file-list>
</web-app>

Step3:

Step3 explains the faces-config configurations.

faces-config configuration:

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

Now you have completed the installation successfully and next you need create web pages in xhtml documents and you should specify the taglibs in XML namespaces instead of JSP taglibs.

Step4:

Create a xhtml document and your web page should contain the taglibs as stated in sample.xhtml, so that you can use the rich faces components together with facelets.

sample.xhtml

<?xml version='1.0' encoding='UTF-8' ?>
<!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"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:a4j="http://richfaces.org/a4j"
xmlns:rich="http://richfaces.org/rich">
<body>
<h:form method="post">
<rich:panel>
<h:outputText value="Sample Text"></h:outputText>
</rich:panel>
</h:form>
</body>
</html>

Thatsall folks. I hope this article clearly explains the installation of Facelets and Richfaces with JSF. Some may say, this article is only about installation, but I want to get in to the action!!. Dont worry just follow the link Layouting and Dynamic include in Facelets , which will help you to construct templates and dynamic include using Facelets. If you find this article is quite useful, Dont forget to share with me by your valuable comments. Have a joyous code day.

Let’s say you have a custom facelets component that wraps an h:selectOneListbox. As a part of using this component, you read the list of items that should be displayed in the list from a database table. Your bean reads the results of the database query and creates listItems, that are then passed back to the h:selectOneListbox, through your my:customListbox component. For instance:

            <my:customListbox
              fieldName="itemValue"
              entity="#{myBean}"
              items="#{myDatabaseBean.listItems}" />

In this example, the value of the h:selectOne would be set in myBean.setItemValue, and the list of selectItems would be returned from myDatabaseBean.getListItems.

Now, you decide that you want to provide some defaults for the lists that are in your UI, but not in the database. You could modify myDatabaseBean.getListItems to manually add a custom default selectItem. The value of the defaultItem could be null, or empty string, that way, when the list is displayed, if myBean.getItemValue returns null or empty string, the default value would be selected in the UI. Pretty slick, except for you have to write java in EVERY instance where you are creating your listItems from the database. Now, add in internationalization and your database bean now has to use the correct resource bundle to read the default value display string. That’s not real difficult, but it’s just more java code that has to be introduced everywhere you are creating those lists.

So, is there another way? Here’s what I did.

In my customListbox component I included a well placed, anonymous ui:insert. This magically made my composition include the children of my customListbox in place of the unnamed ui:insert. For instance, within customListbox.xhtml my h:selectOneListbox now looks like this:

    <h:selectOneListbox value="#{entity[fieldName]}">
      <ui:insert />
      <f:selectItems value="#{items}" />
    </h:selectOneListbox>

Then I can include multiple f:selectItem elements as a child of my:customListbox such as:

<my:customListbox
    fieldName="itemValue"
    entity="#{myBean}"
    items="#{myDatabaseBean.listItems}" >
    <f:selectItem itemValue="" itemLabel="#{bundle.defaultBlahValue}" />
</my:customListbox>

Now, I’ve been able to add a custom default value to my custom listbox with a single line in xhtml, and a single resource bundle value, and no java.

Even though at surface JSF may seem easier framework to workwith it is not. After using it for a while a new deveoper may encounter a problem which may seem trivial in other frameworks or servlet/JSP implementation but very difficult to achieve the same result in it.

For example handling UnchekedException at JSP/View layer is very simple like just adding an ErrorPage attribute in JSP or global exception tag in Struts. To do the same in JSF-Facelets we may need to write customActionListener/delegation servlet but these are not standards.

Since JSP servlet development is request/response based to the JSF Event/Component based architecture it is bit difficult to adopt. JSF is similar to Swing so a Swing developer may find it very easy.

Using Facelets as View in JSF application may contribute to further complications to the regular JSP-Struts Developer.

Use RichFaces or MyFaces, as these frameworks provide rich UI components along with AJAX support out of the box developing professional looking application is a breeze.

Uses of Facelets: It provides templating feature simlar to tiles. It is faster than JSP.

We can avoid using JSTL and scriptlets completely in Facelets.

nstead of using c:if use rendered attribute to optionally display a block of html/Facelet code.

To iterate over a list or collection use h:dataTable or h:colum instead of using c:forEach

Unified EL is evaluated at runtime where as JSTL and EL tags are evaluated at compile time.

Writing directly to response stream in JSF

Writing to a response stream directly in JSF is not recommended but there are instances where we need this feature like report generation. If we need to export PDF or any binary files in a JSF application the code would be as below.

public void writeToResponse(String headerType,

ByteArrayOutputStream bos,String reportType) {

FacesContext faces = FacesContext.getCurrentInstance();

HttpServletResponse resp = (HttpServletResponse) faces.getExternalContext().getResponse();

try {

resp.setContentType(headerType);

resp.setHeader(“Content-Disposition”, “inline;filename=” + reportName + “.” + reportType );

bos.writeTo(sos);

sos.flush();

faces.responseComplete();// without this response write error will come

} catch (IOException e) {

e.printStackTrace();

}

}

Neste post irei demonstrar a utilização do componente rich:editor que faz parte da biblioteca de componentes RichFaces.

O rich:editor é um componente usado para a criação de um editor em páginas. Seu uso é relativamente simples e o resultado é impressionante.

A aplicação consiste num cadastro de Rascunhos onde o usuário poderá cadastrar e remover seus rascunhos de uma forma prática e simples. Para gerenciar as sessões/transações do Hibernate criei um serlvet filter Open Session In View fazendo papel de um interceptador, que será executado a cada request e response.

Utilizarei Tomcat, Hibernate e MySQL para a persistência de dados e disponilizarei o projeto para download.

Estrutura do projeto

Versões utilizadas

• Eclipse 3.4.1
• JDK 1.6
• Tomcat 6.0.18
• MyFaces 1.2.5
• RichFaces 3.3.1
• Hibernate Annotations 3.4.0
• Hibernate 3.3.1
• MySQL 5
• MySQL Query Browser 1.2

Códigos

Rascunho.java:

package br.com.serjaum.modelo;

@Entity
@Table(name="rascunho")
public class Rascunho implements Serializable{

 private static final long serialVersionUID = -6142163109498247473L;

 @Id
 @GeneratedValue(strategy=GenerationType.IDENTITY)
 @Column(name="RASCUNHO_ID")
 private Long id;

 @Column(name="titulo")
 private String titulo;

 @Temporal(TemporalType.DATE)
 @Column(name="data")
 private Date data = new Date();    

 @Lob
 @Column(name="conteudo")
 private String conteudo;

...
}

RascunhoMB.java:

package br.com.serjaum.mb;

public class RascunhoMB implements Serializable {

 private static final long serialVersionUID = -7138652046367400871L;

 private Long id;

 private Rascunho rascunho = new Rascunho();

 public RascunhoMB(){
 System.out.println(" >>>>>>>>>>>>>>>>>>>> Construtor do RASCUNHO_MB <<<<<<<<<<<<<<<<<<");

 if(this.rascunho == null){
 this.rascunho = new Rascunho();
 }
 }

 public String save(){
 Session session = HibernateUtil.currentSession();
 RascunhoDAO rascunhoDAO = new RascunhoDAO(session, Rascunho.class);

 rascunhoDAO.save(this.rascunho);

 this.rascunho = new Rascunho();
 return "toIndex";
 }

 public String delete(){
 Session session = HibernateUtil.currentSession();
 RascunhoDAO rascunhoDAO = new RascunhoDAO(session, Rascunho.class);

 this.rascunho = rascunhoDAO.load(this.id);
 rascunhoDAO.delete(this.rascunho);
 this.rascunho = new Rascunho(); 

 return "removeSucesso";
 }

 public String merge(){
 Session session = HibernateUtil.currentSession();
 RascunhoDAO rascunhoDAO = new RascunhoDAO(session, Rascunho.class);
 rascunhoDAO.merge(this.rascunho);
 this.rascunho = new Rascunho(); 

 return "atualizaSucesso";
 }

 public String load(){
 Session session = HibernateUtil.currentSession();
 RascunhoDAO rascunhoDAO = new RascunhoDAO(session, Rascunho.class);

 this.rascunho = rascunhoDAO.load(this.id);

 return "pesquisaSucesso";
 }

 public String pesquisaByTitulo(){
 Session session = HibernateUtil.currentSession();
 RascunhoDAO rascunhoDAO = new RascunhoDAO(session, Rascunho.class);

 this.rascunho = rascunhoDAO.pesquisaRascunhoByTitulo(this.rascunho.getTitulo());

 return "pesquisaByTituloSucesso";
 }

 public String exibeRascunho(){
 Session session = HibernateUtil.currentSession();
 RascunhoDAO rascunhoDAO = new RascunhoDAO(session, Rascunho.class);

 this.rascunho = rascunhoDAO.load(this.id);

 return "toRascunho";
 }

 public List<Rascunho> getRascunhos(){
 Session session = HibernateUtil.currentSession();
 RascunhoDAO rascunhoDAO = new RascunhoDAO(session, Rascunho.class);

 return rascunhoDAO.list();
 }

 public Long getId() {
 return id;
 }

 public void setId(Long id) {
 this.id = id;
 }

 public Rascunho getRascunho() {
 return rascunho;
 }

 public void setRascunho(Rascunho rascunho) {
 this.rascunho = rascunho;
 }
}

cadastraRascunho.xhtml:

<?xml version="1.0" encoding="ISO-8859-1"?>
<!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"
 xmlns:h="http://java.sun.com/jsf/html"
 xmlns:f="http://java.sun.com/jsf/core"
 xmlns:a4j="http://richfaces.org/a4j"
 xmlns:rich="http://richfaces.org/rich">
 <head>
 <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
 </head>

 <a4j:keepAlive beanName="rascunhoMB" />

 <ui:composition template="/template/template.xhtml">
 <ui:define name="corpo">
 <h:form>
 <rich:messages />

 <fieldset>
 <legend>Rascunho</legend>
 <h:panelGrid columns="1">
 <h:outputLabel for="titulo" value="Título "/>
 <h:inputText id="titulo" value="#{rascunhoMB.rascunho.titulo }" required="true" requiredMessage="Preencha o Título do Rascunho" styleClass="edit" size="35" />

 <h:outputLabel for="conteudo" value="Conteúdo "  />
 <rich:editor id="conteudo" theme="advanced" value="#{rascunhoMB.rascunho.conteudo}" required="true" requiredMessage="Preencha o Conteúdo do Rascunho" height="300" width="700"/>
 </h:panelGrid>

 <a4j:commandButton value="Salvar " action="#{rascunhoMB.save}" styleClass="botoes"/>
 <h:commandButton value="Voltar " action="toIndex" immediate="true" styleClass="botoes"/>
 </fieldset>
 </h:form>
 </ui:define>
 </ui:composition>
</html>

rascunho.xhtml:

<?xml version="1.0" encoding="ISO-8859-1"?>
<!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"
 xmlns:h="http://java.sun.com/jsf/html"
 xmlns:f="http://java.sun.com/jsf/core"
 xmlns:a4j="http://richfaces.org/a4j"
 xmlns:rich="http://richfaces.org/rich">
 <head>
 <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
 </head>

 <a4j:keepAlive beanName="rascunhoMB" />

 <ui:composition template="/template/template.xhtml">
 <ui:define name="corpo">
 <h:form>
 <rich:messages />

 <fieldset>
 <legend>Rascunho</legend>
 <h:panelGrid columns="2">
 <h:outputLabel for="titulo" value="Título "  />
 <h:outputLabel id="titulo" readonly="true" value="#{rascunhoMB.rascunho.titulo}" style=" width : 254px;"/>

 <h:outputLabel for="data" value="Data "  />
 <h:outputLabel id="data" readonly="true" value="#{rascunhoMB.rascunho.data}" style=" width : 254px;">
 <f:convertDateTime pattern="dd/MM/yyyy" />
 </h:outputLabel>
 </h:panelGrid>    

 <h:panelGrid columns="1">
 <rich:editor theme="advanced" autoResize="true" value="#{rascunhoMB.rascunho.conteudo}" height="300" width="822" readonly="true"/>
 </h:panelGrid>                

 <a4j:commandButton value="Salvar " action="#{rascunhoMB.save}" styleClass="botoes"/>
 <h:commandButton value="Voltar " action="toGerenciaRascunhos" immediate="true" styleClass="botoes"/>
 </fieldset>
 </h:form>
 </ui:define>
 </ui:composition>
</html>

Importando o projeto

1. Baixe o projeto completo >>aqui<<;
2. Descompacte o projeto no seu workspace;
3. No Eclipse vá em: File –> Import –> General – Existing Projects into Workspace –> Next –> Selecione o projeto descompactado no workspace –> Finish.

Criando o banco de dados

1. Com o MySQL instalado e configurado com usuário: root e senha: root crie um novo schema com o nome de jsf.
2. Execute a classe br.com.serjaum.util.GerarTabelas.java. Essa classe criará as tabelas que foram mapeadas no arquivo hibernate.cfg.xml, no caso a classe Rascunho terá uma tabela correspondente com o nome de rascunho no nosso banco de dados.

Resultado

Até o próximo post!

Neste post irei fazer a migração da nossa aplicação JSF completa utilizando RichFaces + Hibernate + MySQL na prática para Facelets.

Algumas das características do Facelets:

• Utilização do XHTML como camada de visão da aplicação;

• Permite a criação de componentes reutilizáveis;

• Aumenta a performance da aplicação de 30% até 50% comparado com JSP, pois não usa a compilação para servlet;
• Criação simplificada de templates;

• Uso de código JSF em tags HTML com o atributo jsfc (não é muito recomendado);
• Camada de visão padrão para o JSF 2.0;

Mais informações >>aqui<<.

Versões utilizadas

• Eclipse 3.4.1
• JDK 1.6
• Tomcat 6.0.18
• MyFaces 1.2.5
• RichFaces 3.3.1
• Hibernate Annotations 3.4.0
• Hibernate 3.3.1
• MySQL 5
• JUnit 4.5
• Caelum Stella 1.2

Estrutura do projeto

Códigos

atualizaPessoa.xhtml:

<?xml version="1.0" encoding="UTF-8" ?>
<!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"
 xmlns:h="http://java.sun.com/jsf/html"
 xmlns:f="http://java.sun.com/jsf/core"
 xmlns:a4j="http://richfaces.org/a4j"
 xmlns:stella="http://stella.caelum.com.br/faces"
 xmlns:rich="http://richfaces.org/rich">
 <head>
 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
 </head>

 <a4j:keepAlive beanName="pessoaMB" />

 <ui:composition template="/template/template.xhtml">
 <ui:define name="corpo">
 <h:form>
 <rich:messages />

 <fieldset><legend>Atualização de Dados</legend> 

 <rich:dataTable value="#{pessoaMB.pessoas}" var="fisica" rows="10" id="fisicas" width="100%" cellspacing="0" cellpadding="0" border="1">
 <h:column>
 <f:facet name="header">
 <h:outputText value="NOME" />
 </f:facet>
 <h:outputText value="#{fisica.nome}" />
 </h:column>

 <h:column>
 <f:facet name="header">
 <h:outputText value="E-MAIL" />
 </f:facet>
 <h:outputText value="#{fisica.email}" />
 </h:column>

 <h:column>
 <f:facet name="header">
 <h:outputText value="CPF" />
 </f:facet>
 <h:outputText value="#{fisica.cpf}" />
 </h:column>

 <h:column>
 <f:facet name="header">
 <h:outputText value="DATA NASC." />
 </f:facet>
 <h:outputText value="#{fisica.dataNascimento}">
 <f:convertDateTime pattern="dd/MM/yyyy" />
 </h:outputText>
 </h:column>

 <h:column>
 <f:facet name="header">
 <h:outputText value="CELULAR" />
 </f:facet>
 <h:outputText value="#{fisica.telefoneCelular}" />
 </h:column>

 <h:column>
 <f:facet name="header">
 <h:outputText value="Exclusão"/>
 </f:facet>

 <a4j:commandLink reRender="panelGridInputs">
 <h:outputText value="Selecionar"/>
 <f:setPropertyActionListener  value="#{fisica}" target="#{pessoaMB.pessoa}"/>
 </a4j:commandLink>

 </h:column>

 <f:facet name="footer">
 <rich:datascroller />
 </f:facet>
 </rich:dataTable>

 <rich:messages/>

 <a4j:region id="regiaoAjax">
 <a4j:status id="sts">
 <f:facet name="start">
 <h:graphicImage value="/images/ajax-loader.gif" />
 </f:facet>
 </a4j:status>
 </a4j:region>

 <h:panelGrid columns="2" id="panelGridInputs">
 <h:outputLabel for="nome" value="Nome "  />
 <h:inputText id="nome" value="#{pessoaMB.pessoa.nome}" style=" width : 254px;"/>

 <h:outputLabel for="email" value="E-mail "  />
 <h:inputText id="email" value="#{pessoaMB.pessoa.email}" style=" width : 249px;">
 <f:validator validatorId="emailValidator"/>
 </h:inputText>

 <h:outputLabel for="cpf" value="CPF "  />
 <h:inputText id="cpf" validatorMessage="CPF inválido!" value="#{pessoaMB.pessoa.cpf}" size="60" style=" width : 106px;">
 <rich:jQuery selector="#cpf" query="mask('999.999.999-99')" timing="onload"/>
 <stella:validateCPF formatted="true"/>
 </h:inputText>

 <h:outputLabel for="senha" value="Senha "  />
 <h:inputSecret id="senha" value="#{pessoaMB.pessoa.senha}" size="30"/>

 <h:outputLabel for="dataNasc" value="Data Nascimento: "  />
 <h:inputText id="dataNasc" validatorMessage="Data de nascimento com formato inválido!" value="#{pessoaMB.pessoa.dataNascimento}" size="60" style=" width : 75px;">
 <f:convertDateTime pattern="dd/MM/yyyy" />
 <rich:jQuery selector="#dataNasc" query="mask('99/99/9999')" timing="onload"/>
 </h:inputText> 

 <h:outputLabel for="telCel" value="Tel. Celular "  />
 <h:inputText id="telCel" value="#{pessoaMB.pessoa.telefoneCelular}">
 <rich:jQuery selector="#telCel" query="mask('(99) 9999-9999')" timing="onload"/>
 </h:inputText>

 <a4j:commandButton value="Atualizar" action="#{pessoaMB.merge}" styleClass="botoes" status="sts" reRender="fisicas"/>
 <a4j:commandButton value="Voltar" immediate="true" action="toIndex" styleClass="botoes"/>
 </h:panelGrid>
 </fieldset>
 </h:form>
 </ui:define>
 </ui:composition>
</html>

cadastraPessoa.xhtml:

<?xml version="1.0" encoding="UTF-8" ?>
<!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"
 xmlns:h="http://java.sun.com/jsf/html"
 xmlns:f="http://java.sun.com/jsf/core"
 xmlns:a4j="http://richfaces.org/a4j"
 xmlns:stella="http://stella.caelum.com.br/faces"
 xmlns:rich="http://richfaces.org/rich">
 <head>
 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
 </head>

 <a4j:keepAlive beanName="pessoaMB" />

 <ui:composition template="/template/template.xhtml">
 <ui:define name="corpo">
 <h:form>
 <rich:messages />

 <fieldset>
 <legend>Cadastro de Pessoa</legend>
 <a4j:region id="regiaoAjax">
 <a4j:status id="sts">
 <f:facet name="start">
 <h:graphicImage value="/images/ajax-loader.gif" />
 </f:facet>
 </a4j:status>
 </a4j:region>

 <h:panelGrid columns="2" id="inputs">
 <h:outputLabel for="nome" value="Nome "  />
 <h:inputText id="nome" value="#{pessoaMB.pessoa.nome}" styleClass="edit" size="40" />

 <h:outputLabel for="email" value="E-mail "  />
 <h:inputText id="email" value="#{pessoaMB.pessoa.email}" required="true" requiredMessage="Campo e-mail obrigatório!" styleClass="edit" size="30">
 <f:validator validatorId="emailValidator"/>
 </h:inputText>

 <h:outputLabel for="senha" value="Senha "  />
 <h:inputSecret id="senha" value="#{pessoaMB.pessoa.senha}" required="true" requiredMessage="Campo senha obrigatório!" styleClass="edit" size="30"/>

 <h:outputLabel for="cpf" value="CPF "  />
 <h:inputText id="cpf" value="#{pessoaMB.pessoa.cpf}" styleClass="edit" size="11">
 <rich:jQuery selector="#cpf" query="mask('999.999.999-99')" timing="onload"/>
 <stella:validateCPF formatted="true"/>
 </h:inputText>

 <h:outputLabel for="dataNasc" value="Data Nascimento "  />
 <h:inputText id="dataNasc" validatorMessage="Data de nascimento com formato inválido!" value="#{pessoaMB.pessoa.dataNascimento}" styleClass="edit" size="10" >
 <f:convertDateTime pattern="dd/MM/yyyy" />
 <rich:jQuery selector="#dataNasc" query="mask('99/99/9999')" timing="onload"/>
 </h:inputText>

 <h:outputLabel for="telCel" value="Tel. Celular "  />
 <h:inputText id="telCel" value="#{pessoaMB.pessoa.telefoneCelular}" styleClass="edit" size="10">
 <rich:jQuery selector="#telCel" query="mask('(99) 9999-9999')" timing="onload"/>
 </h:inputText>

 <a4j:commandButton value="Inserir" action="#{pessoaMB.save}" status="sts" reRender="inputs" styleClass="botoes"/>
 <a4j:commandButton value="Voltar" immediate="true" action="toIndex" styleClass="botoes"/>
 </h:panelGrid>
 </fieldset>
 </h:form>
 </ui:define>
 </ui:composition>
</html>

pesquisaPessoa.xhtml:

<?xml version="1.0" encoding="UTF-8" ?>
<!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"
 xmlns:h="http://java.sun.com/jsf/html"
 xmlns:f="http://java.sun.com/jsf/core"
 xmlns:a4j="http://richfaces.org/a4j"
 xmlns:stella="http://stella.caelum.com.br/faces"
 xmlns:rich="http://richfaces.org/rich">
 <head>
 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
 </head>

 <a4j:keepAlive beanName="pessoaMB" />

 <ui:composition template="/template/template.xhtml">
 <ui:define name="corpo">
 <h:form>
 <rich:messages />

 <fieldset>
 <legend>Pesquisa de Pessoas</legend>
 <h:panelGrid columns="2">

 <h:outputLabel for="nomeLabel" value="Digite o nome: " />
 <h:inputText id="nomeInput" value="#{pessoaMB.pessoa.nome}" style=" width : 321px;" />

 <h:commandButton value="Pesquisar" action="#{pessoaMB.pesquisaByNome}" styleClass="botoes"/>
 <h:commandButton value="Voltar" immediate="true" action="toIndex" styleClass="botoes"/>
 </h:panelGrid>

 <h:panelGrid columns="2" id="panelGridInputs">
 <h:outputLabel for="nome" value="Nome "  />
 <h:inputText id="nome" readonly="true" value="#{pessoaMB.pessoa.nome}" style=" width : 254px;"/>

 <h:outputLabel for="email" value="E-mail "  />
 <h:inputText id="email" readonly="true" value="#{pessoaMB.pessoa.email}" style=" width : 249px;"/>

 <h:outputLabel for="cpf" value="CPF "  />
 <h:inputText id="cpf" readonly="true" validatorMessage="CPF inválido!" value="#{pessoaMB.pessoa.cpf}" size="60" style=" width : 106px;"/>

 <h:outputLabel for="dataNasc" value="Data Nascimento: "  />
 <h:inputText id="dataNasc" readonly="true" validatorMessage="Data de nascimento com formato inválido!" value="#{pessoaMB.pessoa.dataNascimento}" size="60" style=" width : 75px;">
 <f:convertDateTime pattern="dd/MM/yyyy" />
 </h:inputText> 

 <h:outputLabel for="telCel" value="Tel. Celular "  />
 <h:inputText id="telCel" readonly="true" value="#{pessoaMB.pessoa.telefoneCelular}" />
 </h:panelGrid>
 </fieldset>
 </h:form>
 </ui:define>
 </ui:composition>
</html>

removePessoa.xhtml

<?xml version="1.0" encoding="UTF-8" ?>
<!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"
 xmlns:h="http://java.sun.com/jsf/html"
 xmlns:f="http://java.sun.com/jsf/core"
 xmlns:a4j="http://richfaces.org/a4j"
 xmlns:stella="http://stella.caelum.com.br/faces"
 xmlns:rich="http://richfaces.org/rich">
 <head>
 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
 </head>

 <a4j:keepAlive beanName="pessoaMB" />

 <ui:composition template="/template/template.xhtml">
 <ui:define name="corpo">
 <h:form>
 <rich:messages />
 <fieldset><legend>Remoção de Pessoas</legend>
 <rich:dataTable value="#{pessoaMB.pessoas}" var="fisica" rows="10" id="fisicas" width="100%" cellspacing="0" cellpadding="0" border="1">
 <h:column>
 <f:facet name="header">
 <h:outputText value="NOME" />
 </f:facet>
 <h:outputText value="#{fisica.nome}" />
 </h:column>

 <h:column>
 <f:facet name="header">
 <h:outputText value="E-MAIL" />
 </f:facet>
 <h:outputText value="#{fisica.email}" />
 </h:column>

 <h:column>
 <f:facet name="header">
 <h:outputText value="CPF" />
 </f:facet>
 <h:outputText value="#{fisica.cpf}" />
 </h:column>

 <h:column>
 <f:facet name="header">
 <h:outputText value="DATA NASC." />
 </f:facet>
 <h:outputText value="#{fisica.dataNascimento}">
 <f:convertDateTime pattern="dd/MM/yyyy" />
 </h:outputText>
 </h:column>

 <h:column>
 <f:facet name="header">
 <h:outputText value="CELULAR" />
 </f:facet>
 <h:outputText value="#{fisica.telefoneCelular}" />
 </h:column>

 <h:column>
 <f:facet name="header">
 <h:outputText value="Exclusão"/>
 </f:facet>

 <a4j:commandLink action="#{pessoaMB.delete}" status="sts" reRender="fisicas" >
 <h:outputText value="Excluir"/>
 <f:setPropertyActionListener value="#{fisica.id}" target="#{pessoaMB.id}" />
 </a4j:commandLink>
 </h:column>

 <f:facet name="footer">
 <rich:datascroller />
 </f:facet>
 </rich:dataTable>

 <a4j:region id="regiaoAjax">
 <a4j:status id="sts">
 <f:facet name="start">
 <h:graphicImage value="/images/ajax-loader.gif" />
 </f:facet>
 </a4j:status>
 </a4j:region>

 <h:commandButton value="Voltar" immediate="true" action="toIndex" styleClass="botoes"/>
 </fieldset>
 </h:form>
 </ui:define>
 </ui:composition>
</html>

login.xhtml:

<?xml version="1.0" encoding="UTF-8" ?>
<!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"
 xmlns:h="http://java.sun.com/jsf/html"
 xmlns:f="http://java.sun.com/jsf/core"
 xmlns:a4j="http://richfaces.org/a4j"
 xmlns:stella="http://stella.caelum.com.br/faces"
 xmlns:rich="http://richfaces.org/rich">
 <head>
 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
 </head>

 <a4j:keepAlive beanName="pessoaMB" />

 <ui:composition template="/template/template.xhtml">
 <ui:define name="corpo">
 <h:form>
 <rich:messages />
 <fieldset>
 <h:panelGrid columns="2">
 <h:outputText value="E-mail" styleClass="rotulos" />
 <h:inputText id="email" value="#{pessoaMB.pessoa.email}" styleClass="edit" size="25">
 <f:validator validatorId="emailValidator" />
 </h:inputText>    

 <h:outputLabel for="senha" value="Senha" styleClass="rotulos"/>
 <h:inputSecret id="senha" styleClass="edit" validatorMessage="A senha deve ter no mínimo 6 caracteres!" value="#{pessoaMB.pessoa.senha}" size="25">
 <f:validateLength minimum="6"/>
 </h:inputSecret>
 <h:commandButton id="botao" value="Entrar" action="#{pessoaMB.login}" />
 </h:panelGrid>
 </fieldset>
 </h:form>
 </ui:define>
 </ui:composition>
</html>

template.xhtml:

<?xml version="1.0" encoding="UTF-8"?>
<!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"
 xmlns:h="http://java.sun.com/jsf/html"
 xmlns:f="http://java.sun.com/jsf/core"
 xmlns:a4j="http://richfaces.org/a4j"
 xmlns:stella="http://stella.caelum.com.br/faces"
 xmlns:rich="http://richfaces.org/rich">

<head>
 <link rel="StyleSheet" type="text/css" href="/jsf/style/estilos.css" media="screen" />
 <script type="text/javascript" src="/jsf/resources/jquery.maskedinput-1.2.1.js"></script>

 <title>
 <ui:insert name="pageTitle">
 <h:outputText value="CRUD Facelets "/>
 </ui:insert>
 </title>
</head>

<body>
 <div id="topo">
 <ui:insert name="topo">
 Topo do CRUD Facelets
 </ui:insert>
 </div>

 <div id="corpo">
 <ui:insert name="corpo">
 Conteúdo
 </ui:insert>
 </div>

 <div id="rodape">
 <ui:insert name="rodape">
 <hr/>
 Rodapé CRUD Facelets
 </ui:insert>
 </div>
</body>
</html>

web.xml:

<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns="http://java.sun.com/xml/ns/javaee"
xmlns:web="http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd"
xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd" id="WebApp_ID" version="2.5">
 <display-name>crud_facelets</display-name>
 <welcome-file-list>
 <welcome-file>index.html</welcome-file>
 <welcome-file>index.htm</welcome-file>
 <welcome-file>index.jsp</welcome-file>
 </welcome-file-list>
 <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>
<context-param>
 <param-name>com.sun.faces.validateXml </param-name>
 <param-value>false </param-value>
</context-param>
 <context-param>
 <param-name>com.sun.faces.verifyObjects </param-name>
 <param-value>true </param-value>
</context-param>
 <servlet>
 <servlet-name>Faces Servlet</servlet-name>
 <servlet-class>javax.faces.webapp.FacesServlet</servlet-class>
 <load-on-startup>1</load-on-startup>
 </servlet>
 <servlet-mapping>
 <servlet-name>Faces Servlet</servlet-name>
 <url-pattern>*.jsf</url-pattern>
 <url-pattern>*.faces</url-pattern>
 </servlet-mapping>

 <context-param>
 <param-name>org.ajax4jsf.SKIN</param-name>
 <param-value>blueSky</param-value>
 </context-param>
 <filter>
 <display-name>Ajax4jsf Filter</display-name>
 <filter-name>ajax4jsf</filter-name>
 <filter-class>org.ajax4jsf.Filter</filter-class>
 </filter>
 <filter-mapping>
 <filter-name>ajax4jsf</filter-name>
 <servlet-name>Faces Servlet</servlet-name>
 <dispatcher>REQUEST</dispatcher>
 <dispatcher>FORWARD</dispatcher>
 <dispatcher>INCLUDE</dispatcher>
 </filter-mapping>

 <filter>
 <display-name>AuthFilter</display-name>
 <filter-name>AuthFilter</filter-name>
 <filter-class>br.com.serjaum.filtro.AuthFilter</filter-class>
 </filter>
 <filter-mapping>
 <filter-name>AuthFilter</filter-name>
 <url-pattern>/*</url-pattern>
 </filter-mapping>

 <context-param>
 <param-name>facelets.SKIP_COMMENTS</param-name>
 <param-value>true</param-value>
 </context-param>
</web-app>

Importando o projeto

1. Baixe o projeto completo >>aqui<<;
2. Descompacte o projeto no seu workspace;
3. No Eclipse vá em: File –> Import –> General – Existing Projects into Workspace –> Next –> Selecione o projeto descompactado no workspace –> Finish.

Criando o banco de dados

1. Com o MySQL instalado e configurado com usuário: root e senha: root crie um novo schema com o nome de jsf.
2. Execute a classe br.com.serjaum.util.GerarTabelas.java. Essa classe criará as tabelas que foram mapeadas no arquivo hibernate.cfg.xml, no caso a classe Pessoa terá uma tabela correspondente com o nome de pessoa no nosso banco de dados.

Resultado

When I was first learning facelets, I often ran into a problem when I was passing an action method into an included facelet file. For instance, I had file1.xhtml, which would include my custom tag component file2.xhtml (defined within my taglib.xml file.) file2.xhtml had a commandLink or commandPrompt that needed an action. Since I would re-use file2.xhtml and allow it to call different actions, I needed a way to pass the action method to file2.

The first thought was to include it as an attribute of my component.

<myns:mytag
   myActionAttribute="${mybean.myaction}" />

and then within file2, which in this case is mapped to mytag:

<h:commandLink value="${mybean.myValue}" action="${myActionAttribute}" />

When I tried to execute this, faces would complain to me that mybean had no myaction property. I knew it did and would be endlessly frustrated by this.
The answer is to reference the action method using array notation. On any bean referenced in facelets you can reference the properties using dot notation, as in ${mybean.myaction}, OR you can also reference it using array notation, such as ${mybean["myaction"]}.
I never did dig in far enough in order to figure out exactly what was going on under the hood, but I’m guessing ${mybean.myaction} was actually evaluated before being sent to mytag. In order to avoid this, pass the bean, and then pass the action method as a string to the component, such as:

<myns:mytag
   myActionController="${mybean}"
   myActionMethod="myaction" />

Notice that the method is just a string. Then in your component, reference it in array notation ( how many times can I say array notation! )

<h:commandLink value="${mybean.myValue}" action="${myActionController[myActionMethod]}" />

Notice that the method is NOT quoted. myActionMethod will be replaced by the String value passed in the value of the attribute, and that method on the bean will be called as the action of the commandLink.

The Apache MyFaces project started to work an implementation of the new JavaServer Faces 2.0 spec pretty early. The Apache/JSF community is driving this new effort. All recently added committers actually contributed stuff to MyFaces 2.0.

Now, there is also another important step into the JSF 2.0 adaption. Apache MyFaces has made its 2.0 effort to become trunk. This happened a few weeks ago; before the JSF 1.1 stuff was trunk. Well, we still support JSF 1.2 and JSF 1.1 (there haven’t been JSF RI releases for JSF 1.1 in a while) and continue support for these types, as they are in use.

However, JSF 2.0 brings a lot of new stuff to the table – and this spec (and its features) is really important to keep JSF alive. The MyFaces community honors that by making it TRUNK.

Good time! Now do a svn check-out and start contributing to it!

In my work with JSF I found that I needed a tri-state checkbox.  In my case, the checkbox represented whether or not a decorator was added to all selected objects, no selected objects, or some of the selected objects.  This corresponded to checked, unchecked, or partially checked.

When I was looking for something that would fit my needs I found a Javascript implementation at Shams’ Blog which is a bit of a different use case than what I was looking for, but has some good points and useful images.

I created the following facelet file that manages state transitions and image management for the JSF tri state checkbox.  My control doesn’t handle the nested selection like you’ll see in Sham’s blog, but it fills the needs stated above.

<!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"
    xmlns:h="http://java.sun.com/jsf/html"
    xmlns:f="http://java.sun.com/jsf/core"
    xmlns:c="http://java.sun.com/jstl/core" >

<!--
  An input component that is represented as a checkbox with three states.  Checked, Unchecked, and Intermediate.

  Required attributes:
    checkedValue - the value that should be set for this component when the checkbox is checked
    uncheckedValue - the value that should be set for this component when the checkbox is unchecked
    intermediateValue - the value that should be set for this component when the checkbox is in the intermediate state.
    value - bean property to hold the value.  Should evaluate to checkedValue, uncheckedValue, or intermediateValue the first time.
    controller - controller that implements the value change listener.
    key - key value to pass as an attribute of the control that contains the checkbox value.
    valueChangeListener - change listener for value of this checkbox component.
 -->

<ui:composition>

  <script type="text/javascript">
    function setCheckValue( img, next, newVal )
    {
      img.css('display', 'none');
      img.siblings('[id$='+next+']').css('display','inline');
      img.siblings('[id$=triStateCheck]').val(newVal);
    }
  </script>

  <h:graphicImage
    id="trueValue"
    url="/images/ico_checked.gif"
    style="display: #{value == checkedValue ? 'inline' : 'none'}"
    onmouseover="jQuery(this).attr('src','/images/ico_checked_highlighted.gif')"
    onmouseout="jQuery(this).attr('src','/images/ico_checked.gif')"
    onclick="setCheckValue( jQuery(this), 'falseValue', '#{uncheckedValue}')"
    rendered="#{(empty rendered) ? true : rendered}" />
  <h:graphicImage
    id="falseValue"
    style="display: #{value == uncheckedValue ? 'inline' : 'none'}"
    onmouseover="jQuery(this).attr( 'src', '/images/ico_unchecked_highlighted.gif' )"
    onmouseout="jQuery(this).attr('src', '/images/ico_unchecked.gif')"
    url="/images/ico_unchecked.gif"
    onclick="setCheckValue( jQuery(this),
        '#{value == intermediateValue ? 'intermediateValue' : 'trueValue'}',
        '#{value == intermediateValue ? intermediateValue : checkedValue}')"
    rendered="#{(empty rendered) ? true : rendered}" />
  <h:graphicImage
    id="intermediateValue"
    style="display: #{value == intermediateValue ? 'inline' : 'none'}"
    onmouseover="jQuery(this).attr( 'src', '/images/ico_intermediate_highlighted.gif' )"
    onmouseout="jQuery(this).attr('src', '/images/ico_intermediate.gif')"
    url="/images/ico_intermediate.gif"
    onclick="setCheckValue( jQuery(this), 'trueValue', '#{checkedValue}')"
    rendered="#{(empty rendered) ? true : rendered}" />

  <h:inputHidden
    id="triStateCheck"
    value="#{value}"
    valueChangeListener="#{controller[valueChangeListener]}">
    <f:attribute name="key" value="#{key}" />
  </h:inputHidden>

</ui:composition>
</html>

The control starts with a very simple script that uses jquery.

    function setCheckValue( img, next, newVal )
    {
      img.css('display', 'none');
      img.siblings('[id$='+next+']').css('display','inline');
      img.siblings('[id$=triStateCheck]').val(newVal);
    }

The script takes three parameters. The current image, the next image, and the new value. It then hides the current image, shows the new image, and sets the value of the control to the new value.

Each image in the control has a couple of Javascript event handlers. One to show the highlighted version of the current image on mouseover, and another to show the regular version on mouse out. Finally, a third to transition to the next state and set the value on click. You’ll notice that in the falseValue image, the onclick is a bit longer than the others.

    onclick="setCheckValue( jQuery(this),
        '#{value == intermediateValue ? 'intermediateValue' : 'trueValue'}',
        '#{value == intermediateValue ? intermediateValue : checkedValue}')"

This is because if the value doesn’t start at intermediate, then we don’t ever want to hit the intermediate value in transitions. For instance, if the value starts at true or false, the checkbox will function just like a normal checkbox, toggling only between true and false. If the checkbox starts at the intermediate value, then it will go from intermediate to true, then to false, then back to intermediate on subsequent clicks. If this is not the desired behavior, then the conditional statements in the onclick can be removed so that it always goes to intermediate.

The final interesting part of the control is the hidden field that holds the value of the checkbox.

  <h:inputHidden
    id="triStateCheck"
    value="#{value}"
    valueChangeListener="#{controller[valueChangeListener]}">
    <f:attribute name="key" value="#{key}" />
  </h:inputHidden>

This inputHidden control contains the current value of the checkbox. The value is set initially, and then changed through javascript when the checkboxes are clicked. When debugging, it can be helpful to change the inputHidden to a simple input text control so you can inspect it and see the value change. The control will call a value change listener which can use the key attribute to determine which entity the checkbox belongs to. This is valuable when you are stamping the checkboxes ( as in a ui:repeat ) so you know which entity in the collection had the checkbox changed.

In order to use the control, simply save the text to a file and include a pointer to it in your JSF taglib definition. You can modify the image paths for your needs and set the other attributes as they are commented at the top of the file.

Suggestions on how to improve this control? I’d love to hear them.

This took me a bit to figure out so I thought I’d post it.

Say you’re using JSF and want to conditionally print some HTML tags in your Facelet that could, technically speaking, result in non well-formed markup. You can’t really do it. Printing something like is illegal as it’ll complain about the < and > characters being in there. Using the tag doesn’t work either, even if you wrap the content in a CDATA element. Problem is that it’s preventing you from writing non well-formed markup in any which way.

One of the solutions is to force the rendering kit to not analyze the output for “well-formedness” by passing the HTML markup in a variable.

In your facelet.xhtml

<h:outputText escape="false"
              rendered="#{someCondition}"
              value="#{messages['lessThan'].concat('ul').concat(messages['greaterThan'])}"/>

In messages.properties

lessThan=<
greaterThan=>

Vielleicht hatte ich es in einem früheren Posting schonmal erwähnt, ich arbeite momentan für Siemens an einem Web 2.0 Projekt und das ist jetzt fertig .

Los ging es November 2007 und nun konnten wir planmässig im April 2009 live gehen. Wir konnten dabei all die wunderbaren “neuen” Technologien einsetzen und ausprobieren, u.a. JSF und damit eine funktionsfähige (also den Anforderungen des Kunden voll entsprechende) und zugleich performante “Web 2.0″ Applikation bauen. Die Applikation nimmt sich dem Thema “Sicherheitstechnik” (für die Auskenner: ISO 13849-1 und IEC 62061) an.

Mal kurz zu den verwendeten “Technologien/Frameworks/Tools/Ideen”:

• Daten ziehen wir aus einer SAP Knowledgebase (selbst gestrickt) und aus einer Datenbank via OpenJPA
• Services/Manager sind “normale” Javaklassen (Stichwort Design-Pattern),
  als Kleber verwenden wir Spring (Stichwort Dependency Injection)
• UI mit JBoss Richfaces (Stichwort Ajax), JSF + Facelets (Stichwort Xhtml-Template), jQuery, CSS, etc.
  
• Buildsystem, Projektseiten mit Maven2
• Continues Integration via TeamCity und Maven2
• Tests hauptsächlich mit TestNG aber teilweise auch mit JUnit
• Laden/Speichern von Benutzerdaten via XStream (FileupLoad via Tomahawk), das alles noch Versionskompatibel, d.h. selbsgestrickte XML-Transformationskette für DomainModell-Updates
  
• PDF Reportgenerierung mit iText
• Anbindung an Siemens “Single Sign On” System via Spring Security, Webservices
  

Im Rückblick kann ich sagen, dass eigentlich alles ohne größere Probleme miteinander funktioniert hat
… so soll es sein

https://www.automation.siemens.com/cd/safety/html_00/produkte/si_normen/tool.htm

(Für die Applikation muss man sich registrieren)

Buenas, habrán notado que tuve un pico de blogs y ahora bajo un poco… no crean que esto va a terminar tan rápido. Simplemente estuve trabajando en algunas cosillas que por supuesto tienen que ver con esta bitácora. 

Una de ellas es tener un mirror del blog en inglés, también en wordpresss.

Y otra es que me envicié portando la implementación de Sun de JSF para J2SE =D . See, hay una nueva moda, cuestionar JEE y preguntar porque estas funcionalidades no lo puedo tener en mis aplicaciones. Esto empezó con Context and Dependecy Injection for Java ( aka jsr-299 ( aka WebBeans ) ) que con mucha lógica dijeron “Gavin, ¿Qué tiene que ver contextos y DI con JSF y EJB?” o algo similar, ahora me toca a mi seguir con la moda.

Me hice la pregunta ( hace tiempo ya, pero no tengo pruebas =P ) ¿Por qué no puedo utilizar las ventajas de la programación declarativa en mis aplicaciones desktops y dejar de romperme la cabeza ( aka marote ) en pensar si voy a usar Swing, SWT o similares? Por cierto para tener en cuenta, parece que Sun bajó los brazos en este area.

Y el proyecto está avanzando, ayer casi logro levantar un ejemplo pero el spec de JSF parece estar muy ligado al paquete javax.servlet.http y voy a tener que hacer un poco de magia negra, pero de la buena. En cuanto tenga un ejemplo se los muestro, la idea es definir las vistas con JSF/Facelets y implementar un RenderKit para dibujar con la tecnología que queramos. Una vez superado eso agregar Seam, aunque sería óptimo tener una versión GA de OWB ó WB para entonces.

Salut

When developing with JSF you pretty soon gets tired of trying to make easy readable and flexible templates. This is where Facelets come to the rescue!

Facelets is basically a templating framework, which enables you to improve flexibility and maintainability in your web application. It fits very nicely together with JSF.

When constructing master templates you want there are several things you want to be able to do, here are some of the possibilities:

1. including headers and footers
2. defining content sections
3. specifying title per page
4. loading message bundles

Below are some examples of this that you can put in your template.xhtml file.

1. Including headers and footers

<ui:include src="header.xhtml">
  <!-- It's even possible to pass parameters
         and you can you can use EL expression as always
  -->
  <ui:param name="headerTitle" value="#{headerImg}" />
</ui:include>

2. Defining content sections

  <ui:insert name="body" />

3. Specifying title per page

  <title>
    <ui:insert name="title">Default title</ui:insert>
  </title>

4. Loading message bundles

   <f:loadBundle var="msg" basename="dk.sompackage.MyBundle" />

Now when combining these simple techniques, you can quite easy create the first template.
Next step is to create the first page using the newly created template:

MyFirstPage.xhtml:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<ui:composition 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"
      template="/layout/template.xhtml">
	<!-- Title of the page -->
	<ui:param name="title" value="My title" />

	<!-- This defines the content section -->
	<ui:define name="body">
		<!-- Here goes all the content -->
        </ui:define>
</ui:composition>

When fiddling a bit around with some of these techniques you’ll soon find out, that it is easy to create complex features and still keep the flexibility and you’re still able to reuse your code. Next step is to create custom components and put them in a taglib.

Coming soon

I was using Icefaces 1.7.2 with Jsf 1.2_04

javax.faces.FacesException: Problem in renderResponse: /WEB-INF/facelets/template.xhtml  Not Found in
ExternalContext as a Resource
Error code 500

When I took off the template.xhtml, I got this.
javax.faces.FacesException: Problem in renderResponse: null

INFO: 08:19:37,173 ERROR D2DFaceletViewHandler:292 - Problem in renderResponse: null
<pre>java.lang.NullPointerException
    at com.icesoft.faces.context.DOMResponseWriter.enhanceAndFixDocument(DOMResponseWriter.java:270)
    at com.icesoft.faces.context.DOMResponseWriter.endDocument(DOMResponseWriter.java:159)
 

Upgraded to JSF 1.2_07 and Facelets 1.1.14. Did not help.

Solution: I was missing filepath. Instead of /WEB-INF/facelets/template.xhtml, I had to add ../WEB-INF/facelets/template.xhtml and it worked.

Thanks to Arran from Icefaces.com for his support.

Next step, based on the previous post, adding some persistance with Hibernate.

For this sample i will use HSQLDB for the “in memory” feature.

The sample app allow you to create “Users” containing just a username and Id.

Frameworks:

• Spring – 2.5.3
• Hibernate – 3.2.1.ga
• Hibernate-annotations – 3.3.0.ga
• HSQLDB – 1.8.0.7
• JSF – 1.2_04-p02
• Richfaces – 3.2.2.SR1
• Facelets – 1.1.14

The Value Object:

package com.lb.jwitter;

import java.io.Serializable;

import javax.persistence.Entity;

import javax.persistence.GeneratedValue;

import javax.persistence.Id;

import javax.persistence.Table;

@Entity

@Table (name=”UTILISATEURS”)

public class User implements Serializable {

private static final long serialVersionUID = -1989579066723007050L;

private Long id;

private String username;

@Id

@GeneratedValue

public Long getId() {

return id;

}

public void setId(Long id) {

this.id = id;

}

public String getUsername() {

return username;

}

public void setUsername(String username) {

this.username = username;

}

}

@Entity : Declares the value object as an entity managed by the persistance API.

@Table : Defines the table’s name in which the entities will be stored.

@Id : Declares the variable behind the getter as the primary key for the entity.

@GeneratedValue : The primary key will be generated automaticaly.

References

• Hibernate Entity Manager
• Sun – Java persistence API
• JSR 220: EJB 3.0

Writing the DAO :

import java.util.List;

import org.apache.commons.logging.Log;

import org.apache.commons.logging.LogFactory;

import org.hibernate.SessionFactory;

import org.hibernate.criterion.Projections;

import org.hibernate.criterion.Restrictions;

import org.springframework.beans.factory.annotation.Autowired;

import org.springframework.beans.factory.annotation.Qualifier;

import org.springframework.stereotype.Repository;

import com.lb.jwitter.User;

import com.lb.utils.orm.hibernate.HibernateGenericDao;

@Repository

public class UserHibernateDao extends HibernateGenericDao<User, Long> implements UserDaoInterface {

private Log log = LogFactory.getLog(UserHibernateDao.class);

@Autowired

public UserHibernateDao(@Qualifier(“sessionFactory”) SessionFactory sessionFactory) {

super(sessionFactory);

}

public List<User> findAll() {

return getSession().createCriteria(User.class).list();

}

}

I wrote a class HibernateGenericDao to implements the CRUD methods, you can find it in the source code.

The Service with Autowired DAO

import java.io.Serializable;

import java.util.List;

import org.apache.commons.logging.Log;

import org.apache.commons.logging.LogFactory;

import org.springframework.beans.factory.annotation.Autowired;

import org.springframework.stereotype.Service;

import org.springframework.transaction.annotation.Transactional;

import com.lb.jwitter.User;

import com.lb.jwitter.hibernate.UserDaoInterface;

@Service(“userService”)

@Transactional

public class UserService implements UserServiceInterface,Serializable{

private Log log = LogFactory.getLog(UserService.class);

@Autowired

private UserDaoInterface userDao;

public List<User> findAll(){

List<User> result = getUserDao().findAll();

log.info(“Number of user in DB:: “+result.size());

return result;

}

public UserDaoInterface getUserDao() {

return userDao;

}

/**

* @param userDao the userDao to set

*/

public void setUserDao(UserDaoInterface userDao) {

this.userDao = userDao;

}

}

Writing the Managed Bean

import java.io.Serializable;
import java.util.List;

import javax.faces.application.FacesMessage;
import javax.faces.component.UIComponent;
import javax.faces.context.FacesContext;
import javax.faces.validator.ValidatorException;

import org.apache.commons.logging.Log;
import org.apache.commons.logging.LogFactory;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.beans.factory.annotation.Qualifier;
import org.springframework.context.annotation.Scope;
import org.springframework.stereotype.Component;

import com.lb.jwitter.User;
import com.lb.jwitter.service.UserServiceInterface;

@Component
@Qualifier(“userBean”)
@Scope(“session”)
public class UserBean implements Serializable {

private Log log = LogFactory.getLog(UserBean.class);

@Autowired
private UserServiceInterface userService;

public List<User> getAllUsers(){
return this.userService.findAll();
}

public UserServiceInterface getUserService() {
return userService;
}

/**
* @param userService the userService to set
*/
public void setUserService(UserServiceInterface userService) {
this.userService = userService;
}

}

Download the source code

This may be something that is old news to everyone else in facelets, but I just found out that you can access map entries using dot notation in facelets code.  Where is this handy?

Let’s say you have a facelets component that you wrote to display certain properties of a complex java object.  The component looks something like this.

<ui:composition>
    <!-- various styling, action, etc. -->

    <h:outputText value="#{entity.myValue}" />
    <h:outputText value="#{entity.yourValue}" />

    <!-- various styling, actions, etc. -->
</ui:composition>

You now decide that you like the formatting and actions in this component and want to use it with something else.  You don’t want to add myValue and yourValue to your other entity, nor do you want to create a facade or container class that just contains those properties that you are using in the facelets component.

One solution would be to create a map that contains the values you need for the component.  This doesn’t require a new concrete Java object and allows you to re-use the facelets component.

So, in the facelets page or component that includes your custom component you could do the following

<z:myComponent entity="#{myBean.propertyMap}" />

And in your controller bean or whatever, you could have a simple method

public Map<String, String> getPropertyMap()
{
    // get your entity
    Map<String, String> map = new HashMap<String, String>();
    map.put( "myValue", myEntity.getSomethingForMyValue() );
    map.put( "yourValue", myEntity.getSomethingForYourValue() );
    return map;
}

Now, the awesome magic is that the facelets component above will be able to reference the map values by name using dot notation in the component.  It doesn’t care if the “entity” you pass in is a simple map, or a Java object with proper getters and setters for the properties.