Login/Register
What is the difference between composite:insertFacet and composite:renderFacet?
Asked Answered
Solved jsfjsf-2composite-componentfacet
P

1

6

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">
 ....
Phenylalanine answered 25/1, 2015 at 13:54 Comment(0)
F
13

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.

Forestaysail answered 25/1, 2015 at 23:16 Comment(0)

© 2022 - 2024 — McMap. All rights reserved.