JSF 2.0 和带有 Facelets 的 Primefaces答案

【问题标题】：JSF 2.0 and Primefaces with FaceletsJSF 2.0 和带有 Facelets 的 Primefaces
【发布时间】：2012-04-19 16:25:41
【问题描述】：

我正在尝试将 primefaces 合并到我的 JSF 2.0 Web 项目中。

我最近从 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:editor 就不会出现了。任何想法为什么？控制台不会显示任何警告/错误。

编辑>>> 发现 JS 错误

【问题讨论】：

标签： jsf-2 primefaces facelets

【解决方案1】：

在您的template.xhtml 中，您需要将<head> 替换为<h:head> 和<body> 替换为<h:body>。你不应该添加另一个，这只会导致无效的 HTML。

特别是<h:head> 是强制性的，因为它允许 PrimeFaces 等组件库通过资源依赖注入自动包含必要的 CSS/JS 文件。 <h:body> 仅在 <h:outputScript> 元素带有 target="body" 时是必需的，这样它们将自动重新定位到生成的 HTML <body> 元素的最底部。

更新您的具体问题是由手动加载的 jQuery 库和 PrimeFaces 自动包含的库中的冲突引起的。 PrimeFaces 在幕后使用 jQuery 和 jQuery UI。如果你坚持使用 PrimeFaces，我建议放弃手动加载的 jQuery 并改用 PrimeFaces 捆绑的。要覆盖不使用 PrimeFaces 组件的页面，您可以通过在 <h:head> 中添加以下行来为每个页面显式加载 PrimeFaces 捆绑的 jQuery：

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

【讨论】：

我更新了我的问题以反映我的发现。将更改为并将更改为如果没有，我得到的错误就消失了，但是 p:editor 不会再出现了。你认为这是为什么？
不确定，因为您的代码包含太多噪音（您应该学习如何创建和提供 SSCCE），但是您的主模板已经有一个 <h:form> 并且您已经放入了另一个<p:editor> 周围的模板客户端。嵌套表单在 HTML 中无效。
对不起。 :(我会看看我是否可以修剪所有不必要的部分。我理解你的意思。
我修剪了所有的脂肪，现在我只有精益代码。这有帮助吗？ =)
好的。在浏览器中右键单击页面并执行查看源代码。你看到<p:editor> 里面还没有解析吗？或者你看到它生成的 HTML 了吗？如果您看到它生成的 HTML，请检查您是否在生成的 <head> 中看到任何带有 ?ln=primefaces 的 URL 中的 JS/CSS 文件。如果是这样，如果您在 JS 控制台中看到任何错误，请检查 webbrowser 工具集（在 Firebug/Chrome/IE9 中按 F12）。