JSF 2.0和带有Facelets的Primefaces [英] JSF 2.0 and Primefaces with Facelets
问题描述
我正在尝试将素字纳入我的JSF 2.0 Web项目中.
I'm trying to incorporate primefaces into my JSF 2.0 web project.
我最近从facelets 1.x更新到了2.0，并已将primefaces jar添加到我的库文件夹中.一切都很好，除了我将模板的结构化方式与原始外观存在冲突.
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.
我的 template.xhtml 看起来像这样:
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>
我的 index.xhtml 看上去是这样的:
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>
一旦有了这个，p:编辑器就不会出现.有什么想法吗?控制台不会向我显示任何警告/错误.
Once I have this, the p:editor won't show up. any ideas why? the console won't show me any warnings/errors.
编辑>>>发现JS错误
EDIT>>> Found JS Error
推荐答案
在您的template.xhtml中，您需要替换 <head>和<body>.您不应该添加其他内容，那样只会导致HTML无效.
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.
尤其是<h:head>是强制性的，因为它允许诸如PrimeFaces之类的组件库通过资源依赖注入自动包含必要的CSS/JS文件. <h:body>仅在具有<h:outputScript>元素和target="body"元素时才是必需的，以便将它们自动重定位到生成的HTML <body>元素的最底端.
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.
更新，您的具体问题是由手动加载的jQuery库和PrimeFaces自动包含的jQuery库中的冲突引起的. PrimeFaces在幕后使用jQuery和jQuery UI.如果您坚持使用PrimeFaces，我建议您删除手动加载的jQuery，而改用PrimeFaces捆绑的jQuery.要覆盖不使用PrimeFaces组件的页面，可以通过在<h:head>中添加以下行来显式地为每个页面加载PrimeFaces捆绑的jQuery:
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和带有Facelets的Primefaces的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
