JSF contents not rendered

Question

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>...

So, your question is essentially a duplicate of http://stackoverflow.com/questions/8768317/how-do-i-override-those-classes-defined-in-primefaces-css? — BalusC, Aug 11 '14 at 20:58
I'm sorry @BalusC but I wouldn't classify as a duplicate. I was trying to understand why the solution proposed in primeface's blog wasn't working. Although the workarounds proposed there also solve my problem, they don't answer my question. The explanation given in primeface's forum, linked by starf, did. — BrunoPires, Aug 11 '14 at 21:06
You've just a [XY problem](http://meta.stackexchange.com/questions/66377/what-is-the-xy-problem). You faced a problem with overriding PrimeFaces CSS. Instead of asking how to achieve that, you tried something completely wrong and concretely asked why that didn't work without elaborating anything about the initial problem of overriding the PrimeFaces CSS for which you incorrectly thought that the given code was the right solution to that. — BalusC, Aug 11 '14 at 21:10

score 1 · Accepted Answer · edited May 23 '17 at 11:43

1

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.

edited May 23 '17 at 11:43

Community

1
1

answered Aug 11 '14 at 20:26

starf

1,063
11
15

Thank you for your answer! I do believe you're right, and I did as sugested, and linked my css inside a `` inside the `` tag. It does render the relative link to my css, but it does so before the link to Primefaces css file, I'd like it to be the other way so I could use my css, what did I do wrong? Gonna edit the main post with the results. – BrunoPires Aug 11 '14 at 20:33
@BrunoPires It seems this has been covered in the Primefaces forums - http://forum.primefaces.org/viewtopic.php?f=3&t=25617. Try with the tag directly, although this isn't ideal. – starf Aug 11 '14 at 20:47
1

Or place your h:outputStylesheet tags in the body itself. – starf Aug 11 '14 at 20:50

JSF contents not rendered

1 Answers1

Linked