CODEWITHSUNDEEP
jsfjsf-2primefaces
avfrolov
avfrolov

Reputation: 516

Primefaces doesn't apply style

I'm newbie in JSF + Primefaces.I use Tomcat 7 + JSF 2.2.7 + PrimeFaces 5.0. I want to make table like in primefaces tutorial(http://www.primefaces.org/showcase/ui/data/datatable/edit.xhtml) Application started correctly (without errors in log), but my page looks wrong(sorry, i cant attach image because I have little reputation).

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>

Upvotes: 1

Views: 1533

Answers (1)

kolossus
kolossus

Reputation: 20691

The <h:head/> tag translates to the HTML <head> tag. Traditionally in HTML, all user-defined scripts and style resource files are declared in the head tag, and JSF is no exception. The styling elements for Primefaces and the AJAX-related js scripts need to be rendered as part of the <h:head/>/<head> tag.

Omitting <h:head/> from your JSF view means that during page render, there's nowhere for the JSF runtime to automatically inject the necessary scripts, hence the results you observed: style-less JSF page. I'm pretty sure your JSF page also lacked any form of ajax-processing support by way of the <p:ajax/> and <f:ajax/> tags

Upvotes: 1

Related Questions