I am using GlassFish 3.1.2 and trying to use composite:insertFacet
in a composite component, but the HTML Markup is not generated when using my CC.
The same code works fine when I use composite:renderFacet
, but I want to understand why composite:insertFacet
is not working in that example? and when to use each of them?
This is my login.xhtml
file (the Composite component implementation, the "heading" facet is the issue):
<?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://java.sun.com/jsf/html"
xmlns:composite="http://java.sun.com/jsf/composite">
<composite:interface>
<composite:editableValueHolder name="nameInput" targets="form:name"/>
<composite:editableValueHolder name="passwordInput" targets="form:password"/>
<composite:editableValueHolder name="inputs"
targets="form:name form:password"/>
<composite:actionSource name="loginButton" targets="form:loginButton"/>
<composite:attribute name="name"/>
<composite:attribute name="password"/>
<composite:attribute name="namePrompt"/>
<composite:attribute name="passwordPrompt"/>
<composite:attribute name="loginValidate"
method-signature="void validateLogin(ComponentSystemEvent e)
throws javax.faces.event.AbortProcessingException"/>
<composite:attribute name="loginAction"
method-signature="java.lang.String action()"/>
<composite:facet name="heading"/>
<composite:facet name="error"/>
</composite:interface>
<composite:implementation>
<h:outputScript library="util" name="login.js" target="head"/>
<h:form id="form" onsubmit="return checkForm(this, '#{cc.clientId}')">
<composite:insertFacet name="heading"/>
<h:panelGrid columns="2">
#{cc.attrs.namePrompt}
<h:panelGroup>
<h:inputText id="name" value="#{cc.attrs.name}"/>
<h:message for="name"/>
</h:panelGroup>
#{cc.attrs.passwordPrompt}
<h:panelGroup>
<h:inputSecret id="password" value="#{cc.attrs.password}" size="8"/>
<h:message for="password"/>
</h:panelGroup>
</h:panelGrid>
<p>
<h:commandButton id="loginButton"
value="#{cc.attrs.loginButtonText}"
action="#{cc.attrs.loginAction}"/>
</p>
</h:form>
<composite:renderFacet name="error"/>
<p><composite:insertChildren/></p>
<p>#{cc.resourceBundleMap.footer}</p>
</composite:implementation>
</html>
index.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:f="http://java.sun.com/jsf/core"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:util="http://java.sun.com/jsf/composite/util"
xmlns:ui="http://java.sun.com/jsf/facelets">
<h:head>
<title>#{msgs.loginHeading}</title>
<h:outputStylesheet library="css" name="styles.css" />
</h:head>
<h:body>
<util:login namePrompt="#{msgs.namePrompt}"
passwordPrompt="#{msgs.passwordPrompt}"
name="#{user.name}"
password="#{user.password}"
loginAction="#{user.login}"
loginButtonText="#{msgs.loginButtonText}">
<f:validateLength minimum="4" for="nameInput"/>
<f:validator validatorId="com.corejsf.Password" for="passwordInput"/>
<f:actionListener type="com.corejsf.LoginActionListener" for="loginButton"/>
<f:facet name="heading" styleClass="header">
<div class="prompt">#{msgs.loginPrompt}</div>
</f:facet>
<f:facet name="error" styleClass="error">
<h:messages layout="table" styleClass="error"/>
</f:facet>
<!-- Child component -->
<h:link outcome="register">#{msgs.registerLinkText}</h:link>
</util:login>
<ui:debug/>
</h:body>
</html>
I tried to figure out the reason from the Component Tree, but I was more confused as the insertFacet
appears, here is a the section from the Component Tree when using insertFacet:
<UIOutput id="j_idt7" inView="true" rendered="true" transient="false">
<UINamingContainer id="j_idt8" inView="true" rendered="true" transient="false">
error
<HtmlMessages globalOnly="false" id="j_idt10" inView="true" layout="table" redisplay="true" rendered="true" showDetail="false" showSummary="true" styleClass="error" tooltip="false" transient="false"/>
javax.faces.component.COMPOSITE_FACET_NAME
<UIPanel inView="true" rendered="true" transient="false">
<HtmlForm enctype="application/x-www-form-urlencoded" id="form" inView="true" onsubmit="return checkForm(this, '')" prependId="true" rendered="true" submitted="false" transient="false">
header
<div class="prompt">#{msgs.loginPrompt}</div>
<HtmlPanelGrid border="-2147483648" columns="2" id="j_idt15" inView="true" rendered="true" transient="false">
....
The Component Tree when using renderFacet:
<UIOutput id="j_idt7" inView="true" rendered="true" transient="false">
<UINamingContainer id="j_idt8" inView="true" rendered="true" transient="false">
error
<HtmlMessages globalOnly="false" id="j_idt10" inView="true" layout="table" redisplay="true" rendered="true" showDetail="false" showSummary="true" styleClass="error" tooltip="false" transient="false"/>
heading
<div class="prompt">#{msgs.loginPrompt}</div>
javax.faces.component.COMPOSITE_FACET_NAME
<UIPanel inView="true" rendered="true" transient="false">
<HtmlForm enctype="application/x-www-form-urlencoded" id="form" inView="true" onsubmit="return checkForm(this, '')" prependId="true" rendered="true" submitted="false" transient="false">
<UIOutput id="j_idt15" inView="true" rendered="true" transient="false"/>
<HtmlPanelGrid border="-2147483648" columns="2" id="j_idt16" inView="true" rendered="true" transient="false">
....
The <cc:insertFacet>
is not intented for the composite itself, but for composite's child which in turn expects a facet which needs to be provided externally.
E.g. a <h:dataTable>
which supports a <f:facet name="header">
(poor composite example, but it's just to give the idea):
<cc:implementation>
<h:dataTable>
<cc:insertFacet name="header">
Which is to be used as
<my:composite>
<f:facet name="header">
This has exactly the same effect as doing as below without a composite
<h:dataTable>
<f:facet name="header">
The <cc:insertFacet>
is indeed used very rarely.
The <cc:renderFacet>
is intented for the composite implementation itself and basically achieves the same as <ui:define>
/<ui:insert>
in templates and tagfiles.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With