Primefaces 不适用样式答案

【问题标题】：Primefaces doesn't apply stylePrimefaces 不适用样式
【发布时间】：2014-08-02 22:02:08
【问题描述】：

我是 JSF + Primefaces 的新手。我使用的是 Tomcat 7 + JSF 2.2.7 + PrimeFaces 5.0。我想在 primefaces 教程中制作表格（http://www.primefaces.org/showcase/ui/data/datatable/edit.xhtml）应用程序正确启动（日志中没有错误），但我的页面看起来有问题（抱歉，我无法附上图片，因为我没有什么名声）。

web.xml：

<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns="http://xmlns.jcp.org/xml/ns/javaee"
         xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
         xsi:schemaLocation="http://xmlns.jcp.org/xml/ns/javaee http://xmlns.jcp.org/xml/ns/javaee/web-app_3_1.xsd"
         version="3.1">

    <context-param>
        <param-name>primefaces.THEME</param-name>
        <param-value>bootstrap</param-value>
    </context-param>

    <servlet>
        <servlet-name>Faces Servlet</servlet-name>
        <servlet-class>javax.faces.webapp.FacesServlet</servlet-class>
        <load-on-startup>1</load-on-startup>
    </servlet>

    <servlet-mapping>
        <servlet-name>Faces Servlet</servlet-name>
        <url-pattern>*.xhtml</url-pattern>
    </servlet-mapping>

    <welcome-file-list>
        <welcome-file>nodes.xhtml</welcome-file>
    </welcome-file-list>
</web-app>

faces-config.xml

<?xml version='1.0' encoding='UTF-8'?>
<faces-config xmlns="http://xmlns.jcp.org/xml/ns/javaee"
    xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
    xsi:schemaLocation="http://xmlns.jcp.org/xml/ns/javaee http://xmlns.jcp.org/xml/ns/javaee/web-facesconfig_2_2.xsd"
    version="2.2">

</faces-config>

nodes.xhtml

<?xml version="1.0" encoding="UTF-8"?>
<!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:h="http://xmlns.jcp.org/jsf/html"
      xmlns:p="http://primefaces.org/ui"
      xmlns:f="http://xmlns.jcp.org/jsf/core">

<h:form id="form">
    <p:growl id="msgs" showDetail="true"/>
    <p:growl id="growl" life="2000" />

    <p:commandButton value="Add Node" id="ajax" update="growl" actionListener="#{nodeListener.addAction}" styleClass="ui-priority-primary" />

    <p:dataTable id="nodes" var="node" value="#{nodeListener.nodes}" editable="true" style="margin-bottom:20px"
                 rendered="true">
        <f:facet name="header">
            List of nodes
        </f:facet>

        <p:ajax event="rowEdit" listener="#{nodeListener.onRowEdit}" update=":form:msgs"/>
        <p:ajax event="rowEditCancel" listener="#{nodeListener.onRowCancel}" update=":form:msgs"/>

        <p:column headerText="Name">
            <p:cellEditor>
                <f:facet name="output"><h:outputText value="#{node.name}"/></f:facet>
                <f:facet name="input"><p:inputText id="modelInput" value="#{node.name}" style="width:100%"/></f:facet>
            </p:cellEditor>
        </p:column>

        <p:column headerText="Address">
            <p:cellEditor>
                <f:facet name="output"><h:outputText value="#{node.address}"/></f:facet>
                <f:facet name="input"><p:inputText value="#{node.address}" style="width:100%"
                                                   label="Address"/></f:facet>
            </p:cellEditor>
        </p:column>

        <p:column style="width:32px">
            <p:rowEditor/>
        </p:column>
    </p:dataTable>
</h:form>

</html>

【问题讨论】：

将<h:head/> 添加到您的页面，就在<h:form/>之前
@kolossus 谢谢！使用
就可以了！为什么它没有在教程中描述...

标签： jsf jsf-2 primefaces

【解决方案1】：

<h:head/> 标签转换为 HTML <head> 标签。传统上在 HTML 中，所有用户定义的脚本和样式资源文件都在 head 标签中声明，JSF 也不例外。 Primefaces 的样式元素和与 AJAX 相关的 js 脚本需要呈现为 <h:head/>/<head> 标记的一部分。

从您的 JSF 视图中省略 <h:head/> 意味着在页面呈现期间，JSF 运行时无法自动注入必要的脚本，因此您观察到的结果是：无样式 JSF 页面。我很确定您的 JSF 页面也缺少通过 <p:ajax/> 和 <f:ajax/> 标签的任何形式的 ajax 处理支持

【讨论】：