CODEWITHSUNDEEP
cssjsfjsf-2primefacesfacet
BrunoPires
BrunoPires

Reputation: 383

JSF <f:facet> contents not rendered

I have a page where I need to nest some components inside a <f:facet name="last>, in order to apply custom styles (I'm using Primefaces and this is their their way of handling CSS priority ordering as mentioned here). But I'm not able to render anything placed inside the <f:facet> tags.

Here's some sample code:

<html xmlns="http://www.w3.org/1999/xhtml"
  xmlns:h="http://java.sun.com/jsf/html"
  xmlns:f="http://java.sun.com/jsf/core"
  xmlns:ui="http://java.sun.com/jsf/facelets"
  xmlns:p="http://primefaces.org/ui">
<h:head>
    <title>TODO supply a title</title>
</h:head>
<h:body>
    <div>
        <h:form>
            <h:outputLabel for="loginField" value="Login:" styleClass="form-label"/>
            <p:inputText id="loginField" value="#{subscriptionBean.login}" styleClass="form-field"/>
            <f:facet name="last">
                <h:outputLabel for="pwd2" value="Password:" styleClass="form-label"/>
                <p:password id="pwd2" value="#{subscriptionBean.password}" required="true" match="pwd1" styleClass="form-field"/>
                <p:message for="pwd2" display="text" styleClass="form-field"/>
            </f:facet>
        </h:form>
    </div>        
</h:body>

Shouldn't I be able to see the password input field in the generated page? It simply doesn't show up.

Following starf's answer here's some sample code:

<html xmlns="http://www.w3.org/1999/xhtml"
  xmlns:h="http://java.sun.com/jsf/html"
  xmlns:f="http://java.sun.com/jsf/core"
  xmlns:ui="http://java.sun.com/jsf/facelets"
  xmlns:p="http://primefaces.org/ui">
<h:head>
    <f:facet name="last">
        <h:outputStylesheet library="css" name="default.css"/>
    </f:facet>
</h:head>

<h:body>
        <h:outputText value="Rendered text!"/>
        <h:form>
            <h:outputLabel for="pdw1" value="Password: "/>
            <p:password id="pwd1" required="true"/>
            <p:message for="pwd1"/>
        </h:form>

</h:body>

And the resulting rendered page header:

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link type="text/css" rel="stylesheet" href="/AquitelManagement/faces/javax.faces.resource/default.css?ln=css" />
<link type="text/css" rel="stylesheet" href="/AquitelManagement/faces/javax.faces.resource/primefaces.css?ln=primefaces&amp;v=5.0.RC2" />
<script type="text/javascript" src="/AquitelManagement/faces/javax.faces.resource/jquery/jquery.js?ln=primefaces&amp;v=5.0.RC2">    
</script><script type="text/javascript" src="/AquitelManagement/faces/javax.faces.resource/jquery/jquery-plugins.js?ln=primefaces&amp;v=5.0.RC2">
</script>
<script type="text/javascript" src="/AquitelManagement/faces/javax.faces.resource/primefaces.js?ln=primefaces&amp;v=5.0.RC2">
</script>
</head>
<body>...

Upvotes: 1

Views: 5440

Answers (1)

starf
starf

Reputation: 1093

You are trying to register a facet on the h:form tag. The example in the link is registered on the h:head tag. Primefaces has a custom renderer for head.

There is no such facet defined for form, so it doesn't know how to handle it. See also <f:facet> not working with <h:form>

I believe you are confusing the css ordering issue. If you wish to override the PrimeFaces css, use the "last" facet in the head - which would place your css definition below the primefaces css.

<h:head>
    <f:facet name="last">
        <h:outputStylesheet library="default" name="css/style.css" />
    </f:facet>
</h:head>

See http://www.mkyong.com/jsf2/primefaces/resource-ordering-in-primefaces/ for a good explanation.

Upvotes: 1

Related Questions