How to hide (or not render) a JSF control

Majority of the JSF controls have a "rendered" property. If you set this to false, then that component and its children JSF components will not be rendered. Here is an example

<h:dataTable value="#{pageData.somelist}" 
	var="rowdata" 
	styleClass="tablestyle" 
	headerClass="headerstyle" 
	rendered="#{pageData.someBooleanCondition}"/>

Hiding a panel

Consider a panel like this

<h:panelGrid columns="1" rendered="false">
	<h3>Hello: this is a heading</h3> 
	<h:dataTable />
</h:panelGrid> 

The above code will not hide the "h3" html tag. It will only hide the datatable. If you want to hide the "h3" tag then you have to write the heading using a jsf control and not a html tag.

Going the jsp route?

    <%@ page import="com.yourcom.gui.*" %>
	<% 
	 YourPageData pd = (YourPageData)SWRequest.locateObject("yourpage");
	 boolean showDiv = pd.getShowDiv();
	 String divClass = SWRequest.convertBooleanToClass(showDiv);
    %>

Using an if condition

<% if (showDiv) { %>	
	<h3>Hello: this is a heading</h3> 
	<h:dataTable />
<% } %>

This seem to work. But what I don't know is how it behaves for post backs and such.

Using the div with a style

<style>
div.invisible
{
	display:none;
}
</style>
<div class="<%=divClass%>">
	<h3>Hello: this is a heading</h3> 
	<h:dataTable />
</div>

This approach, although a bit round about or non jsf has the ability to hide the non html controls as well when they are not needed based on a server side condition.