Question

I have a JSF page that contains:

<div class="tableCaption">
  <h2>Batch Details</h2>
</div>

and a CSS that defines the look of .tableCaption h2

I want to wrap the above div in a JSF component that has the ‘rendered’ attribute so I can enable/disable the div but I cannot find the appropriate component. Is it even possible to wrap arbitrary HTML components and switch them on/off?

If that’s not possible is there a way to use

somehow to make it use the CSS already defined for .tableCaption h2?

Answer 1

You can use <h:panelGroup layout="block"> to get a HTML <div> element.

<h:panelGroup layout="block" styleClass="tableCaption" rendered="#{condition}">
    <h2>Batch Details</h2>
</h:panelGroup>

Alternatively, when using JSP as view technology, you can use <f:verbatim> instead if the sole body is pure HTML.

<f:verbatim rendered="#{condition}">
    <div class="tableCaption">
        <h2>Batch Details</h2>
    </div>
</f:verbatim>

Please note that this tag is been deprecated in JSF 2.0 in favour of Facelets.

Or, when you’re using Facelets as view technology, the <ui:fragment> should do:

<ui:fragment rendered="#{condition}">
    <div class="tableCaption">
        <h2>Batch Details</h2>
    </div>
</ui:fragment>