Conditionally render JSF components for printing

Question

I want to print only a certain part of my webpage (so not the whole page). How can I achieve this in JSF?

Answer 1

This is normally to be controlled by CSS with display: none|block. Check the CSS media rules.

For example, as @media print {} inside a default CSS file:

@media print {
    #header, #footer, #menu { 
        display: none;
    }
}

(the above example will hide HTML elements with IDs header, footer and menu)

Or via a generic style class:

@media screen {
    .printonly { 
        display: none;
    }
}

@media print {
    .noprint { 
        display: none;
    }
    .printonly { 
        display: block;
    }
}

You then add styleClass="noprint" to those which you'd like to hide from print, and styleClass="printonly" to those which you'd like to show in print only.

You can also put the print specific CSS in its own stylesheet file and reference it using <link media="print"> or <h:outputStylesheet media="print"> as below:

<link rel="stylesheet" href="#{request.contextPath}/css/print.css" media="print" />
<!-- Or -->
<link rel="stylesheet" href="#{resource['css/print.css']}" media="print" />
<!-- Or -->
<h:outputStylesheet name="css/print.css" media="print" />

#header, #footer, #menu { 
    display: none;
}

Noted shoud be that <h:outputStylesheet media> attribute was only added in JSF 2.1, so if you're still on JSF 2.0, consider upgrading to at least 2.1 (should be 100% compatible without any code and configuration changes in the webapp itself). Otherwise just go for the plain HTML <link> approach.

Answer 2

This can be done via pure CSS by specifying media type: http://www.w3.org/TR/CSS2/media.html