JSF <f: facet> content not showing
I have a page where I need to nest some components inside <f:facet name="last> in order to apply custom styles (I use Primefaces, and this is their way of handling CSS priority priority, as mentioned here ). But I cannot do nothing in the <f:facet> tags.
Here is a 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> Can I see the password entry field on the generated page? It just does not appear.
Following starf's answer, here is a 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 displayed page title:
<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&v=5.0.RC2" /> <script type="text/javascript" src="/AquitelManagement/faces/javax.faces.resource/jquery/jquery.js?ln=primefaces&v=5.0.RC2"> </script><script type="text/javascript" src="/AquitelManagement/faces/javax.faces.resource/jquery/jquery-plugins.js?ln=primefaces&v=5.0.RC2"> </script> <script type="text/javascript" src="/AquitelManagement/faces/javax.faces.resource/primefaces.js?ln=primefaces&v=5.0.RC2"> </script> </head> <body>... You are trying to register a face in the h: form tag. The example in the link is registered in the h: head tag. Primefaces have their own renderer for the head.
For a form, there is no such face, therefore, it does not know how to process it. See Also <f: facet> does not work with <h: form>
I believe that you are confusing the css order issue. If you want to override css PrimeFaces, use the "last" face in your head, which would put your css definition below pfspaces.
<h:head> <f:facet name="last"> <h:outputStylesheet library="default" name="css/style.css" /> </f:facet> </h:head> For a good explanation, see http://www.mkyong.com/jsf2/primefaces/resource-ordering-in-primefaces/ .