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 or as below:

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

Noted shoud be that 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 approach.