2012-04-05 87 views
0

我正試圖將primefaces合併到我的JSF 2.0 web項目中。JSF 2.0和帶有Facelets的Primefaces

我最近從facelets 1.x更新到2.0,並添加了primefaces jar到我的庫文件夾。一切都很好,除非我的模板結構與primefaces存在衝突。

的template.xhtml看起來是這樣的:

<?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> 

而且我的index.xhtml看着這樣的:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 

<html xmlns="http://www.w3.org/1999/xhtml" 
xmlns:ui="http://java.sun.com/jsf/facelets" 
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> 

一旦我有了這個,p:編輯器將不會顯示出來。任何想法爲什麼?控制檯不會顯示任何警告/錯誤。

編輯>>>找到JS錯誤

enter image description here

回答

4

在你template.xhtml,則需要更換通過<h:head><body><head>通過<h:body>。您不應該添加其他的,這隻會導致無效的HTML。

特別是<h:head>是強制性的,因爲它允許像PrimeFaces這樣的組件庫通過資源依賴注入來自動包含必要的CSS/JS文件。只有<h:outputScript>元素帶有target="body"時,<h:body>纔是必需的,以便它們將自動重新定位到生成的HTML元素的最底部。


更新您的具體問題是由手動加載jQuery庫衝突,一個是自動包含在由PrimeFaces引起的。 PrimeFaces使用jQuery和jQuery UI。如果你堅持使用PrimeFaces,我建議放棄手動加載的jQuery,並使用PrimeFaces捆綁的一個。爲了彌補在您不使用PrimeFaces組件以及頁面,你可以明確地添加以下行至<h:head>加載PrimeFaces捆綁jQuery的每一頁:

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

我更新了我的問題,以反映我的發現。將< head>更改爲< h:head>和< body>更改爲< h: body>如果沒有,我得到的錯誤消失了,但p:編輯器不再顯示。你爲什麼這麼認爲? – Myy 2012-04-06 00:06:03

+0

不確定,因爲你的代碼包含太多的噪音(你應該學會如何創建和提供一個SSCCE),但是你的主模板已經有一個'',但是你已經在模板客戶端周圍放了另一個'' 。嵌套表單在HTML中無效。 – BalusC 2012-04-06 00:23:13

+0

對不起。 :(我會看看我是否可以修剪所有不必要的部分,我理解你的觀點 – Myy 2012-04-06 00:26:27