PrimeFaces 2.X + JSF 2.0 Quick Start

Prerequisite

This example will apply facelets template. Therefore, concerning faceletes template topics, please refer to :

• How to integrate JSF 2.0 with Facelets: http://albert-kuo.blogspot.com/2010/11/how-to-integrate-jsf-20-with-facelets.html
• JSF2 + Facelets + PrimeFaces 2.2 :http://albert-kuo.blogspot.com/2010/11/jsf2-facelets-primefaces-22.html

PrimeFaces 2.X + JSF 2.0 Quick Start

1. Create two classes: PersonBean.java and PersonControl.java

2. Create Person.java

Utilized annotation to declare managed bean and its scope instead of faces-config.xml

3. Create PersonControl.java

Utilized annotation to declare managed bean, ManagedProperty and its scope instead of faces-config.xml

4. Create index.xhtml

You will see this page only have one text filed for user to fill.

Two buttons in this page:

• Submit button: click submit button as user fill in name
• Clear button: click clear button to clear text field

5. Create hello.xhtml

Show welcome message in this page. And click home button to head for previous page.

6. Define navigation rule in faces-config.xml

7. Demo

User fill in name and click submit button

show welcome message in next page.

JSF2 + Facelets + PrimeFaces 2.2

1. Download PrimeFaces jar files from http://www.primefaces.org/downloads.html

2. Utilize JSF 2.0 and copy PrimeFaces-2.2.jar to WEB-INF/lib

3. you don't need to register servlet and servlet mapping in web.xml from JSF 2.0

4. You don't need to declare p:resources tag in head area

5. Create a simple page with 5 PrimeFaces command buttons in panel

6. Demo

Compare PrimeFaces 1.x with PrimeFaces 2.x

One or more resources have the target of 'head', but no 'head' component has been defined within the view.

Environment: JSF 2 + Facelets + PrimeFaces 2.1 + Glassfish V3

As I run my test.xhtml, it will show this error message in console:

sourceId=null[severity=(ERROR 2), summary=(One or more resources have the target of 'head', but no 'head' component has been defined within the view.), detail=(One or more resources have the target of 'head', but no 'head' component has been defined within the view.)] sourceId=null[severity=(ERROR 2), summary=(One or more resources have the target of 'head', but no 'head' component has been defined within the view.), detail=(One or more resources have the target of 'head', but no 'head' component has been defined within the view.)]

You will see this javascript error in my browser

Root Cause: I need to edit my template.xhtml

[Before]

[After]

Demo

How to integrate JSF 2.0 with Facelets

1. Create Dynamic Web Project. Assign project name, target runtime, dynamic web module version, and configuration.

2. Click Next

3. Click Next

4. Select JSF 2.0 in user library, and click finish.

5. The Dynamic Web Project had been created. (NOTICE: you won't need jsf-facelets.jar anymore)

6. Edit web.xml. Added one context parameter.

7. You don't need to add view-handler in faces-config.xml

8. Create header template page

9. Create footer template page

10. Create template page. Including header, title, body, and footer area.

11. Create test.xhtml. Apply template.xhtml, and insert new contents into title area and body area.

12. Demo

Compare JSF 1.2 with JSF 2.0 concerning configurations: