Nested JSF composite components not fully compatible with Primefaces

Question

I'm trying to create a nested JSF composite control wrapped in a Primefaces Accordion control. However when the tab components are placed within the nested component they are not rendered at all.

outerComponent.xhtml

<composite:interface/>
<composite:implementation>
    <p:accordionPanel>
        <composite:insertChildren/>
    </p:accordionPanel>
</composite:implementation>

innerComponent.xhtml

<composite:interface>
    <composite:attribute name="title" type="java.lang.String"/>
</composite:interface>
<composite:implementation>
    <p:tab id="#{cc.attrs.title}" title="#{cc.attrs.title}">
        Some content
    </p:tab>
</composite:implementation>

testPage.xhtml

<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:w="http://java.sun.com/jsf/composite/wizard"
     xmlns:p="http://primefaces.org/ui">

   <h:head>

   </h:head>
   <h:body>

      <w:outerComponent>
         <w:innerComponent title="tab1"/>
      </w:outerComponent>

   </h:body>
</html>

HTML output:

<html xmlns="http://www.w3.org/1999/xhtml"><head><link type="text/css" 
rel="stylesheet" href="/iip/javax.faces.resource/theme.css.xhtml?ln=primefaces-
aristo-custom" /><link type="text/css" rel="stylesheet" href="/iip/
javax.faces.resource/primefaces.css.xhtml?ln=primefaces" /><script type="text/
javascript" src="/iip/javax.faces.resource/jquery/jquery.js.xhtml?
ln=primefaces"></script><script type="text/javascript" src="/iip/
javax.faces.resource/primefaces.js.xhtml?ln=primefaces"></script></head>

<body>

<div id="j_idt7:j_idt10" class="ui-accordion ui-widget ui-helper-reset ui-hidden-
container" role="tablist"><input type="hidden" id="j_idt7:j_idt10_active" 
name="j_idt7:j_idt10_active" value="0" /></div>

<script id="j_idt7:j_idt10_s" type="text/
javascript">PrimeFaces.cw('AccordionPanel','widget_j_idt7_j_idt10',
{id:'j_idt7:j_idt10'});</script>

</body</html>

When it runs there are no errors and while the Accordion divs are rendered, the tabs are not. However if I move the <p:tab> tags into the outerComponent.xhtml file then they are rendered correctly, but that is not what I require.

Any suggestions?

BalusC BalusC · Accepted Answer · 2012-12-14T11:41:17

Iterating components like <p:dataTable>, <p:tabView>, <p:accordionPanel>, etc cannot have composites as direct children. They should have fullworthy <p:column> or <p:tab> components as direct children. While iterating during view render time, they loop over children and do an instanceof UIColumn or instanceof Tab check on them before rendering. If it fails (the composite is NamingContainer), then it would be plain ignored. This is "by design".

Your best bet is using a tag file instead of a composite component as child of an iterating component.

Note that this isn't specfic to PrimeFaces. Standard <h:dataTable> has exactly the same problem.

Nested JSF composite components not fully compatible with Primefaces

2 Answers

See also: