Using insertChildren AND getting child attributes

childrencomponentscompositejsfnested

I am actually trying to create a custom composite table component because h:datatable or p:datatable do not fit my needs. Nevertheless it shall be used like a primefaces datatable.
After I found JSF composite component childrens
and
Expose items of a list while iterating within composite component I saw the finish line, but now I got stuck.

My xhtml:

<h:body>
    <sm:datatable mode="columntoggle" id="mytable" value="#{managerBean.objects}" var="object">
        <sm:column header="KeyHeader" property="key">
            <h:outputText value="#{object.key}"/>    
        </sm:column>
        <sm:column header="ValueHeader" property="value">
            <h:outputText value="#{object.value}"/>    
        </sm:column>
    </sm:datatable>
</h:body>

And this is the datatable composite:

<cc:interface>
    <cc:attribute name="id" />
    <cc:attribute name="mode" />
    <cc:attribute name="var" />
    <cc:attribute name="value" type="java.util.List"/>
</cc:interface>

<cc:implementation>
    <table data-role="table" data-mode="#{cc.attrs.mode}" id="my-table">
        <thead>
            <tr>
                <ui:repeat value="#{component.getCompositeComponentParent(component).children}" var="child">
                    <th>
                        <h:outputText value="#{child.attrs.header}"/>
                    </th>
                </ui:repeat>
            </tr>
        </thead>
        <tbody>
            <ui:repeat value="#{cc.attrs.value}" var="object">
                <tr>
                    <c:forEach items="#{cc.children}" var="child" varStatus="loop">
                        <cc:insertChildren/>
                    </c:forEach>
                </tr>
            </ui:repeat>
        </tbody>
    </table>
</cc:implementation>

And that's the column composite

<cc:interface>
    <cc:attribute name="header" />
    <cc:attribute name="property" />
    <cc:facet name="content"/>
</cc:interface>

<cc:implementation>
    <td><cc:insertChildren/></td>
</cc:implementation>

thead works standalone

tbody works standalone

Putting them together like above I only get tbody. thead always stays empty Any suggestions?
Thanks for your help in Advance!

Best Answer

This is not a bug, it actually works as designed in mojarra. Using cc:insertChildren moves the children to the parent tag of the cc:insertChildren tag. This problem is equivalent to another problem and has the same solution. See my answer to this question.

Basically, you put a <ui:fragment> around the <cc:insertChildren>, bind that fragment to a property in a FacesComponent bean.

Related Solutions

Css – Margin on child element moves parent element

Found an alternative at Child elements with margins within DIVs You can also add:

.parent { overflow: auto; }

or:

.parent { overflow: hidden; }

This prevents the margins to collapse. Border and padding do the same. Hence, you can also use the following to prevent a top-margin collapse:

.parent {
    padding-top: 1px;
    margin-top: -1px;
}

2021 update: if you're willing to drop IE11 support you can also use the new CSS construct display: flow-root. See MDN Web Docs for the whole details on block formatting contexts.

Update by popular request: The whole point of collapsing margins is handling textual content. For example:

h1, h2, p, ul {
  margin-top: 1em;
  margin-bottom: 1em;
  outline: 1px dashed blue;
}

div { outline: 1px solid red; }

<h1>Title!</h1>
<div class="text">
  <h2>Title!</h2>
  <p>Paragraph</p>
</div>
<div class="text">
  <h2>Title!</h2>
  <p>Paragraph</p>
  <ul>
    <li>list item</li>
  </ul>
</div>

Because the browser collapses margins, the text would appear as you'd expect, and the <div> wrapper tags don't influence the margins. Each element ensures it has spacing around it, but spacing won't be doubled. The margins of the <h2> and <p> won't add up, but slide into each other (they collapse). The same happens for the <p> and <ul> element.

Sadly, with modern designs this idea can bite you when you explicitly want a container. This is called a new block formatting context in CSS speak. The overflow or margin trick will give you that.

Java – the difference between JSF, Servlet and JSP

JSP (JavaServer Pages)

JSP is a Java view technology running on the server machine which allows you to write template text in client side languages (like HTML, CSS, JavaScript, ect.). JSP supports taglibs, which are backed by pieces of Java code that let you control the page flow or output dynamically. A well-known taglib is JSTL. JSP also supports Expression Language, which can be used to access backend data (via attributes available in the page, request, session and application scopes), mostly in combination with taglibs.

When a JSP is requested for the first time or when the web app starts up, the servlet container will compile it into a class extending HttpServlet and use it during the web app's lifetime. You can find the generated source code in the server's work directory. In for example Tomcat, it's the /work directory. On a JSP request, the servlet container will execute the compiled JSP class and send the generated output (usually just HTML/CSS/JS) through the web server over a network to the client side, which in turn displays it in the web browser.

Servlets

Servlet is a Java application programming interface (API) running on the server machine, which intercepts requests made by the client and generates/sends a response. A well-known example is the HttpServlet which provides methods to hook on HTTP requests using the popular HTTP methods such as GET and POST. You can configure HttpServlets to listen to a certain HTTP URL pattern, which is configurable in web.xml, or more recently with Java EE 6, with @WebServlet annotation.

When a Servlet is first requested or during web app startup, the servlet container will create an instance of it and keep it in memory during the web app's lifetime. The same instance will be reused for every incoming request whose URL matches the servlet's URL pattern. You can access the request data by HttpServletRequest and handle the response by HttpServletResponse. Both objects are available as method arguments inside any of the overridden methods of HttpServlet, such as doGet() and doPost().

JSF (JavaServer Faces)

JSF is a component based MVC framework which is built on top of the Servlet API and provides components via taglibs which can be used in JSP or any other Java based view technology such as Facelets. Facelets is much more suited to JSF than JSP. It namely provides great templating capabilities such as composite components, while JSP basically only offers the <jsp:include> for templating in JSF, so that you're forced to create custom components with raw Java code (which is a bit opaque and a lot of tedious work) when you want to replace a repeated group of components with a single component. Since JSF 2.0, JSP has been deprecated as view technology in favor of Facelets.

Note: JSP itself is NOT deprecated, just the combination of JSF with JSP is deprecated.

Note: JSP has great templating abilities by means of Taglibs, especially the (Tag File) variant. JSP templating in combination with JSF is what is lacking.

As being a MVC (Model-View-Controller) framework, JSF provides the FacesServlet as the sole request-response Controller. It takes all the standard and tedious HTTP request/response work from your hands, such as gathering user input, validating/converting them, putting them in model objects, invoking actions and rendering the response. This way you end up with basically a JSP or Facelets (XHTML) page for View and a JavaBean class as Model. The JSF components are used to bind the view with the model (such as your ASP.NET web control does) and the FacesServlet uses the JSF component tree to do all the work.