Question

我是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>

Answer 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处理支持

Primefaces不适用于样式

1 个答案: