JSF 2 h panelGrid

In this tutorial you will learn about the JSF 2 html panelGrid tag.

JSF 2 h panelGrid

In this tutorial you will learn about the JSF 2 html panelGrid tag.

<h:panelGrid> tag of JSF 2 html tag library is rendered the HTML <table> tag into which the elements are automatically arranged to the specified column's cell. Child element of this tag is rendered table's column cell. Default value of the column number is "1" but, the row number depends on the number of elements required to be displayed on the defined number of columns. for example : if the number of columns is specified to '2' and if we takes the 4 elements to display them then these elements will be automatically arranged to the column's cell i.e. elements will be displayed in the two consecutive rows i.e. 2 elements in one row and the rest 2 elements in another row.

Attributes of JSF 2 h panelGrid

• id : This is an optional attribute. This attribute is used to make the component uniquely identifiable. Value of this attribute must be unique within the closest component.
• rendered : This is an optional attribute. It evaluates a boolean expression. Presence of this attribute specifies that whether the current component should be rendered in the Rendered Response phase or not or worked on any later form submission. The default value of this attribute is defined to true.
   
• bgcolor : This is an optional attribute. This attribute specifies the background colour code or name for the table.
• bodyrows : This is an optional attribute. This attribute evaluates a String value and specifies the comma separated list of row indices that a new 'tbody' element should be opened and (if any)opened should be closed.
   
• border : This is an optional attribute. This attribute is used to specify the border's width (in pixels) of table.
• captionClass : This is an optional attribute. This attribute specifies the CSS style class/es list to apply on the generated (if any) caption for the table. List of CSS style class/es is a space separated list.
  
• captionStyle : This is an optional attribute. This attribute evaluates a String value which specifies the CSS style which will be applied on the rendered caption.
   
• cellpadding : This is an optional attribute. This attribute is used to specify the space between cell's contents and its border.
• cellspacing : This is an optional attribute. This attribute is used to specify the space should be left between the cells as well as it is also used to specify the space should be left between the right most column and the right side of the table, left most column and the left side of the table and so on for the bottom and top of the table.
   
• columnClasses : This is an optional attribute. This attribute specifies the CSS style class/es list to be applied on the table's column. The list of CSS style class/es for the table is a comma-delimited list. There may also a CSS style class/es list be specified for an individual column. The list of CSS style class/es for an individual column would be a space-separated list.
   
• columns : This is an optional attribute. This attribute is used to specify the number of columns in a row.
• dir : This is not a required attribute. This attribute evaluates to the java.lang.String value that suggests the direction for the text which doesn't inherit the property of maintaining a direction. The allowable values are "LTR (Left-to-Right)" and "RTL (Right-to-Left)".
   
• footerClass : This is an optional attribute. This attribute specifies the CSS style class/es list to apply on the generated (if any) footer for the table. List of CSS style class/es is a space separated list.
   
• frame : This is an optional attribute. This attribute is used to specify that the side of the frame where the table will be visible. Values for this attribute can be given to : none (for no sides, default values), above (only for top side), below (only for bottom side), hsides (only for top and bottom sides), vsides (only for right and left sides), lhs (only left hand side), rhs (only right hand side), box (all four sides), border (all four sides).
   
• headerClass : This is an optional attribute. This attribute specifies the CSS style class/es list to apply on the generated (if any) header for the table. List of CSS style class/es is a space separated list.
   
• lang : This is an optional attribute. This attribute specifies the language code for the component.
• onclick : This is an optional attribute. This attribute evaluates to a java.lang.String which specifies that on clicking of the mouse pointer button on the current element a Javascript code is executed.
   
• ondblclick : This is an optional attribute. This attribute evaluates to a java.lang.String which specifies that on the double clicking of the current element by mouse pointer button a Javascript code will be executed.
   
• onkeydown : This is an optional attribute. This attribute evaluates to a java.lang.String which specifies that on pressing down of the key over the current element a Javascript code is executed.
   
• onkeypress : This is an optional attribute. This attribute evaluates to a java.lang.String value, specifies that when a key is pressed and released throughout the current element a JavaScript code is executed.
   
• onkeyup : This is an optional attribute. This attribute evaluates to a java.lang.String value, specifies that on releasing of key over the current element a Javascript code is executed.
   
• onmousedown : This is an optional attribute. This attribute evaluates to a java.lang.String value, specifies that on pressing down of the mouse pointer button over the current element a Javascript code is executed.
   
• onmousemove : This is an optional attribute. This attribute evaluates to a java.lang.String value, specifies that on moving of the mouse pointer button inside the current element a Javascript code is executed.
   
• onmouseout : This is an optional attribute. This attribute evaluates to a java.lang.String value, specifies that on moving away of the mouse pointer button from the current element a Javascript code is executed.
   
• onmouseover : This is an optional attribute. This attribute evaluates to a java.lang.String value, specifies that on moving of the mouse pointer button onto the current element a Javascript code is executed.
   
• onmouseup : This is an optional attribute. This attribute evaluates to a java.lang.String value, specifies that on releasing of mouse pointer button above from the current element a Javascript code is executed.
   
• rowClasses :  This is an optional attribute. This attribute specifies the CSS style class/es list to be applied on the table's row. The list of CSS style class/es for the table is a comma-delimited list. There may also a CSS style class/es list be specified for an individual row. The list of CSS style class/es for an individual row would be a space-separated list.
   
• rules : This is an optional attribute. This attribute is used to specify the rules to be looked on the table's cells. Value for this attribute can be : none (for no rules, default value), groups ( between row groups), rows (between rows only), cols (between columns only), all (between all rows and columns).
   
• style : This is an optional attribute. This attribute is used to specify the CSS style to be applied on rendering of this component.
• styleClass : This is an optional attribute. This attribute is used to specify the CSS style class/es to be applied on rendering of this element. The CSS style class/es is space-separated list.
   
• summary : An optional attribute used to specify the summary (why this table is created, structure) for this element.
• title : This is an optional attribute. This attribute is used to specify the title information which will be displayed as tooltip about the markup elements.
• width : This is an optional attribute. This attribute is used to specify the border width of the whole table.
• binding : This is an optional attribute. This attribute evaluates to a javax.faces.component.UIComponent specified for linking the component with the property of backing bean.

Example :

An example is being given here demonstrates about how to use the JSF 2 h panelGrid tag in the applications. In this example I have created a JSF view pages where I have used the JSF 2 <h:panelGrid> tag with various of attributes.  Explaining one by one. However details of these used and other attributes are given above so, here I will only explained what are their effect in this example.

• columns="2" : Value "2" of this attribute specifies that there will be only two columns in the table.
• styleClass="pgHeaderClass" : Value "pgHeaderClass" is a variable name of the table class defined in the CSS file. Using this name in CSS file, CSS classes style is defined for the border of the table and for the data of the row of table.
• headerClass="table-pgHeaderClass-header" : Value "table-pgHeaderClass-header" is a variable name of class for the header of the table. Using this name in CSS file, CSS class style is defined for the header of the table.
• frame="vsides" : Value "vsides" specifies that the table will be shown within only the left and right border.
• cellspacing="5" : Value "5" specifies that the space between the sides (left, right, top, bottom) and cells (left most, right most, top most, bottom most) would be the 5 px.
• cellpadding="3" : Value "3" specifies that the space between the contents of the cell and its border is of 3 px.
• onmouseover=" this.style.backgroundColor='#ffff66' " : When mouse pointer will be moved within the table then its background colour will be changed to yellow.
• onmouseout=" this.style.backgroundColor='black' " : When mouse pointer will be moved away from the table then its background colour will be changed to black.

Directory Structure

panelgrid.xhtml

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:f="http://java.sun.com/jsf/core">

<h:head>
<title>JSF 2 h panelGrid Example</title>
</h:head>
<h:body>
<h:outputStylesheet library="css" name="tableStyle.css"/>
<f:view>
<h:form>
<h:panelGrid columns="2" styleClass="pgHeaderClass" 
headerClass="table-pgHeaderClass-header" 
frame="vsides" cellspacing="5" cellpadding="" 
onmouseover="this.style.backgroundColor='#ffff66'"
onmouseout="this.style.backgroundColor='black'">
<f:facet name="header">
<h:outputText value="PanelGrid Example" />
</f:facet>
<h:outputText value="Name"/>
<h:outputText value="Age" />

<h:outputText value="Deepak"/>
<h:outputText value="38" />
<h:outputText value="Arun"/>
<h:outputText value="33"/>
</h:panelGrid>
</h:form>
</f:view>
</h:body>
</html>

tableStyle.css

table.pgHeaderClass {
width= 300px;
}
table.pgHeaderClass tr td {
color: #d8da3d;
background-color: red
}
.table-pgHeaderClass-header {
color: #d8da3d;
background-color: black
}

web.xml

<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns="http://java.sun.com/xml/ns/javaee" xmlns:web="http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd" xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_3_0.xsd" id="WebApp_ID" version="3.0">
<display-name>jsfHPanelGrid</display-name>
<welcome-file-list>
<welcome-file>panelgrid.xhtml</welcome-file>
</welcome-file-list>
<servlet>
<servlet-name>Faces Servlet</servlet-name>
<servlet-class>javax.faces.webapp.FacesServlet</servlet-class>
<load-on-startup>1</load-on-startup>
</servlet>
<servlet-mapping>
<servlet-name>Faces Servlet</servlet-name>
<url-pattern>/faces/*</url-pattern>
<url-pattern>*.jsf</url-pattern>
<url-pattern>*.xhtml</url-pattern>
</servlet-mapping>
<context-param>
<description>State saving method: 'client' or 'server' (=default). See JSF Specification 2.5.2</description>
<param-name>javax.faces.STATE_SAVING_METHOD</param-name>
<param-value>client</param-value>
</context-param>
<context-param>
<param-name>javax.servlet.jsp.jstl.fmt.localizationContext</param-name>
<param-value>resources.application</param-value>
</context-param>
<listener>
<listener-class>com.sun.faces.config.ConfigureListener</listener-class>
</listener>
<servlet-mapping>
<servlet-name>Faces Servlet</servlet-name>
<url-pattern>*.faces</url-pattern>
</servlet-mapping>
</web-app>

How To Run

After copying the above code paste them to the respective files or by downloading the code from Download Source Code start your web server and then use the following link http://localhost:8181/jsfHOutputLabel/jsfHtmlOutputLabel.xhtml in the address bar of the web browser.

Output :

When you will execute the above code you will get the output as follows :

1. The main page will be viewed first time as follows :

2. When you will move the mouse pointer on the table then its background colour will be changed to yellow and looked as follows :

3. But when you will move the mouse pointer away from the table then its background colour will be changed to black and looked as follows :

And the HTML source code of the main page will be as follows :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><head>
<title>JSF 2 h panelGrid Example</title><link type="text/css" rel="stylesheet" href="/jsfHPanelGrid/javax.faces.resource/tableStyle.css.xhtml?ln=css" /></head><body>
<form id="j_idt7" name="j_idt7" method="post" action="/jsfHPanelGrid/panelgrid.xhtml" enctype="application/x-www-form-urlencoded">
<input type="hidden" name="j_idt7" value="j_idt7" />
<table class="pgHeaderClass" cellpadding="" cellspacing="5" frame="vsides" onmouseout="this.style.backgroundColor='black'" onmouseover="this.style.backgroundColor='#ffff66'">
<thead>
<tr><th class="table-pgHeaderClass-header" colspan="2" scope="colgroup">PanelGrid Example</th></tr>
</thead>
<tbody>
<tr>
<td>Name</td>
<td>Age</td>
</tr>
<tr>
<td>Deepak</td>
<td>38</td>
</tr>
<tr>
<td>Arun</td>
<td>33</td>
</tr>
</tbody>
</table>
<input type="hidden" name="javax.faces.ViewState" id="javax.faces.ViewState" value="H4sIAAAAAAAAALVVT0hUQRyeXV3/J6urooHSwYQgnkQYhkRuueLSqktrknnYxn2jO+vse9PMvN23QlLXIgg6RGB09dDNk5ciJAJBoSCC/ty6Fh3qUpdmZnd9a2rSoYH3Y3Zmvpnv9/2+mX36BQQoZ6AlA3PQcAQmxhjk6XFIA7XvX2x0XH9dBfyjoIHY0ByFKWGzKKgXaYZ42iamS88PA9Wa8nUyBuUXEKAmk8SmGHAYCM3G9L4EWgvG5FwGpcTQ/e2rT4L8BPED4FIJ8Ds3wDKoUlAqm/drmYEBhXaNeZhC3EjZWWpbyBLGlejFcr83zmyKmChcQgUeZzgHBQKl1ipPYKDZYxCxnGzlJBWgDQrB8JwjEJ9KQxFmKIGE1CPk6RFmDBZimAv39pvuR6/g4yrgi4JqjpdQMYF8tYoS1Lc/3YSQpMakXIglYA6xmc21cw9Wtsb9wB8D9SkCOZ+AWSRAq1arX3HtT0ha1sJQDDRwiTH1HgJ0FFdguz+BGIYEL8E5goZcSnNKt0au4hGZV4883uCOVSKjIpGJGeF4PBaNjLhSXOPfxK0UTp1SJ0CDJ54+GJTcUKPdoD6fGg5JaQYO4IOzlBgjaB46RIwWB3vDlJLClL2IrB+rJ2dWhjPDTapY+aMg2E+hhcgCw6bhpkWWyBPOBu98bHalAmXjndmxUKW1pBvbZvexY+fzX4nPix82y3b0eegcA72VGqGc0iducxE2zSl7GqN8RA19u7v+8l1wbd2v/da3F7IjaKLABcpq0LOFwe/T29PNRVD3XlDF2uOLDzfwp67t4tp2z5p6tphI7F79RGf25qrOQ1ejscKbRVuo2FLsCxA5vPz78VYXAVmIhU1IBWKeWuV9/6g0Q5b0/SIWhqpXcg5ynJI3okDkC4KQuKynEaNS7J6DGE06gjoCeM2lrnoryhU/vW/Fdz0mqlN/uCy6H9L+bv+rpVXo0qYLKAqnPAZqrEtnktSZJImdggLbVnIsEh7ZWVezi1/tsuq1CdDESoJMFSiSmlTnbGzuyvz/ZLLzF6DvxgXbJghaW8fYrbcrP7/6ge8aCOQgcdSLpwCD7m+1Ieh4OQYAAA==" autocomplete="off" />
</form></body>
</html>