JSF 2.0 和 Primefaces 带 Facelets

Question

我正在尝试将 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错误

Answer 1

在您的template.xhtml中，您需要将<head>替换为<h:head>并将<body>替换为<h:body> 。 你不应该添加其他的，那只会导致无效的 HTML。

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

---

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

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