2012-04-05 8 views
0

Ich versuche primefaces in mein JSF 2.0 Webprojekt zu integrieren.JSF 2.0 und Primefaces mit Facelets

Ich habe vor kurzem von facelets 1.x zu 2.0 aktualisiert und prescefaces glass zu meinem Bibliotheksordner hinzugefügt. Alles ist in Ordnung außer, die Art, wie ich meine Vorlagen strukturiert habe, hat einen Konflikt mit den Hauptoberflächen.

mein template.xhtml sieht wie folgt aus:

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

Und mein index.xhtml sah wie folgt aus:

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

Sobald ich dies habe, wird der P: Editor nicht angezeigt. irgendwelche Ideen warum? Die Konsole zeigt mir keine Warnungen/Fehler.

EDIT >>> gefunden JS Fehler

enter image description here

Antwort

4

In Ihrem template.xhtml, müssen Sie ersetzen<head> von <h:head> und <body> von <h:body>. Sie sollten keine weiteren hinzufügen, die nur zu ungültigem HTML führen würden.

Insbesondere die <h:head> ist obligatorisch, da sie es Komponentenbibliotheken wie PrimeFaces ermöglicht, die erforderlichen CSS/JS-Dateien automatisch durch Ressourcenabhängigkeitsinjektionen einzubinden. Die <h:body> ist nur dann obligatorisch, wenn Sie <h:outputScript> Elemente mit einer target="body" haben, so dass sie automatisch an den unteren Rand des generierten HTML <body> Elements verschoben werden.


aktualisiert Ihr konkretes Problem wird durch einen Konflikt in der manuell geladen jQuery-Bibliothek und einen verursacht, die durch PrimeFaces Auto enthalten ist. PrimeFaces verwendet jQuery und jQuery UI unter den Abdeckungen. Wenn Sie PrimeFaces verwenden, würde ich empfehlen, die manuell geladene jQuery zu löschen und stattdessen die PrimeFaces-gebündelte Version zu verwenden. Zur Deckung Seiten, auf denen Sie nicht PrimeFaces Komponenten als auch verwenden, können Sie explizit PrimeFaces-gebündelt laden jQuery für jede Seite, indem Sie die folgende Zeile in die <h:head>:

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

Ich aktualisiert meine Frage, meine Erkenntnisse zu reflektieren. Ändern der < head> zu < h:head> und < body> zu < h: body> nicht, wenn es, der Fehler, den ich bekomme, ist weg, aber der p: Editor wird nicht mehr angezeigt. Warum denkst Du, das ist? – Myy

+0

Nicht sicher, da Ihr Code viel zu viel Rauschen enthält (Sie sollten lernen, wie man ein SSCCE erstellt und zur Verfügung stellt), aber Ihre Mastervorlage hat bereits eine '' und Sie haben noch eine weitere in den Template Client um '' gesetzt . Sammelformulare sind in HTML ungültig. – BalusC

+0

Es tut mir leid. :(Ich werde sehen, ob ich alle unnötigen Teile trimmen kann. Ich verstehe Ihren Punkt. – Myy