CODEWITHSUNDEEP
jsfjsf-2primefaces
Tony Scialo
Tony Scialo

Reputation: 5957

PrimeFaces Datatable - What is f:facet actually doing?

Looking through some PrimeFaces code in an app I noticed the following line:

<f:facet name="header">#{trainSearch.trainCount} Trains</f:facet>

It looks like it is overriding the header, which makes sense, but can someone explain this to me in a little more detail?

What is actually happening with this line of code?

Complete code listed below:

           <p:dataTable id = "results" value = "#{trainSearch.trains}" var = "train"     rendered="#{not empty trainSearch.trains}" styleClass = "train-search-table horizontal-border">
                <f:facet name="header">#{trainSearch.trainCount} Trains</f:facet> 
                <p:column headerText = "Train ID">
                    <p:panelGrid columns="1" styleClass = "train-id-grid" layout = "grid">
                        <h:outputText styleClass = "train-id-label" value="#{train.trainI}"/>
                        <h:outputText value="#{train.originCityState} > #{train.destinationCityState}" />
                    </p:panelGrid>
                </p:column>
                <p:column headerText="Scheduled Departure">
                    <h:outputText value="#{train.formattedScheduledDepartureText}" />
                </p:column>
                <p:column headerText="Scheduled Arrival">
                    <h:outputText value="#{train.formattedScheduledArrivalText}" />
                </p:column>
                 <p:column headerText="Loco Count">
                    <h:outputText value="#{train.locoCount}" />
                </p:column>
                <p:column headerText="Car Count">
                    <h:outputText value="#{train.carCount}" />
                </p:column>
            </p:dataTable>

Upvotes: 3

Views: 3156

Answers (1)

julianomqs
julianomqs

Reputation: 118

Facets in JSF are used to customize the rendering of a component, without touching its code, like the header facet in datatable, where you can put custom code in datatable header, without touching actual PrimeFaces datatable code.

The DataTableRenderer (class that writes html code of datatable) gets the xhtml code you put inside a facet and renders it inside a div.

You can see this in the method encodeFacetof DataTableRenderer:

protected void encodeFacet(FacesContext context, DataTable table, UIComponent facet, String styleClass) throws IOException {
    if(facet == null)
        return;

    ResponseWriter writer = context.getResponseWriter();

    writer.startElement("div", null);
    writer.writeAttribute("class", styleClass, null);

    facet.encodeAll(context);

    writer.endElement("div");
}

The line facet.encodeAll(context); renders the code you put inside facet as html, in RENDER_RESPONSE jsf phase.

Upvotes: 7

Related Questions