JSF 2.0 and Primefaces with Facelets

Question

I'm trying to incorporate primefaces into my JSF 2.0 web project.

I've recently updated from facelets 1.x to 2.0 and Added primefaces jar to my library folder. Everything is fine except, the way I have my templates structured has a conflict with the primefaces.

my template.xhtml looks like this:

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0     Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.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">

<h:head>
    <title><ui:insert name="title">MILO</ui:insert></title>

    //Css   
    //js        

</h:head>

<h:body class="milo">
    <h:form styleClass="miloForm" enctype="multipart/form-data">
        <div id="container">
                <ui:insert name="header">
                    <ui:include src="/WEB-INF/templates/header.xhtml"/>
                </ui:insert>

              <ui:insert name="content">
                    <!--  include your content file or uncomment the include below and create content.xhtml in this directory -->
              </ui:insert>

              <ui:insert name="footer">
                <ui:include src="/WEB-INF/templates/footer.xhtml"/>
              </ui:insert>          </div>
    </h:form>
</h:body>

And my index.xhtml looked like this:

<!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:p="http://primefaces.org/ui">

<ui:composition template="/WEB-INF/templates/base.xhtml">

<ui:define name="content">

         <p:editor/>        
</ui:define>

Once I have this, the p:editor won't show up. any ideas why? the console won't show me any warnings/errors.

EDIT>>> Found JS Error

enter image description here

BalusC BalusC · Accepted Answer · 2012-04-05T23:57:34

In your template.xhtml, you need to replace <head> by <h:head> and <body> by <h:body>. You shouldn't add another ones, that would only result in invalid HTML.

Particularly the <h:head> is mandatory as it allows component libraries like PrimeFaces to auto-include the necessary CSS/JS files by resource dependency injection. The <h:body> is only mandatory whenever you have <h:outputScript> elements with a target="body" so that they will be auto-relocated to the very bottom of the generated HTML <body> element.

Update your concrete problem is caused by a conflict in the manually loaded jQuery library and the one which is auto-included by PrimeFaces. PrimeFaces uses jQuery and jQuery UI under the covers. If you stick to using PrimeFaces, I'd recommend to drop the manually loaded jQuery and use the PrimeFaces-bundled one instead. To cover pages where you don't use PrimeFaces components as well, you can explicitly load PrimeFaces-bundled jQuery for every page by adding the following line to the <h:head>:

<h:outputScript library="primefaces" name="jquery/jquery.js" />

JSF 2.0 and Primefaces with Facelets

1 Answers