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

PrimeFaces Themes Configuration

1. Download theme files from http://www.primefaces.org/themes.html

2. Copy themes file to under WebContent/theme

3. Add the skin.css file to our template page using link tag.

If you would like to apply another theme file, just repeat step3.

4. And configure PrimeFaces not to add it's bundled default skin (sam).

flicker theme

blue sky theme

dark-Hive theme

If you have any problems with applying PrimeFaces theme, please check this link: http://albert-myptc.blogspot.com/2010/08/failed-to-apply-primefaces-theme.html

Failed to Apply PrimeFaces Theme

Problem

As I downloaded theme files from http://www.primefaces.org/themes.html, and tried to apply it. But it does not work.

Solution

I utilized primefaces-1.0.2 to implement, but this version has bugs in applying theme. Therefore, as I change PrimeFaces jar file to primefaces-1.1, this problem was disappeared.

[Reference]http://primefaces.prime.com.tr/forum/viewtopic.php?f=3&t=3144

PrimeFaces + Facelets Configuration

1. With regard to facelets configuration, please check: http://albert-myptc.blogspot.com/2010/08/1.html

2. Download primefaces-1.0.2.jar from http://www.primefaces.org/downloads.html

3. Edit web.xml. Add Resource Servlet and servlet mapping

4. Add p:resources tag to head tag in template.xhtml

Resource component needs to be present on a page that has PrimeFaces components, this component outputs the link and script tags that are necessary for PrimeFaces components to work. The ideal place to put resources component would be the html head element.

5. Create a test.xhtml, apply template.xhtml as its template page. And add p:editor in the body part.

6. Check the result

'PrimeFaces' is undefined

As I try to execute a simple PrimeFaces tag in my test.xhtml

it shows this JavaScript error

it results from I forget to add p:resources tag to head tag in my template.xhtml

Then it works correctly!