JSF Tutorial - JSF PanelGrid Example

The h:panelGrid tag renders an HTML "table" element.

The following JSF tag

<h:panelGrid id="panel" columns="2" border="1"
   cellpadding="10" cellspacing="1">
      <f:facet name="header">
         <h:outputText value="Login"/>
      </f:facet>
      <h:outputLabel value="Username" />
      <h:inputText  />
      <h:outputLabel value="Password" />
      <h:inputSecret />
      <f:facet name="footer">
         <h:panelGroup style="display:block; text-align:center">
            <h:commandButton id="submit" value="Submit" />
         </h:panelGroup>
      </f:facet>
</h:panelGrid>

is rendered into the following HTML tag.

<table id="j_idt10:panel" border="1" cellpadding="10" cellspacing="1">
<thead>
   <tr><th colspan="2" scope="colgroup">Login</th></tr>
</thead>
<tfoot>
   <tr>
      <td colspan="2">
      <span style="display:block; text-align:center">
      <input id="j_idt10:submit" type="submit"
      name="j_idt10:submit" value="Submit" />
      </span></td></tr>
</tfoot>
<tbody>
   <tr>
      <td><label>Username</label></td>
      <td><input type="text" name="j_idt10:j_idt17" /></td>
   </tr>
   <tr>
      <td><label>Password</label></td>
      <td><input type="password" name="j_idt10:j_idt21" value="" /></td>
   </tr>
</tbody>
</table>

Tag Attributes

Attribute	Description
id	id for the tag
binding	Reference to the component used in a backing bean
rendered	A boolean value; false would suppress rendering
styleClass	Cascading stylesheet (CSS) class name
value	value binding
bgcolor	Background color for the table
border	Width of the table's border
cellpadding	Padding around table cells
cellspacing	Spacing between table cells
columnClasses	Comma-separated list of CSS classes for columns
columns	Number of columns in the table
footerClass	CSS class for the table footer
frame	frame Specification for sides of the frame surrounding the table that are to be drawn; valid values: none, above, below, hsides, vsides, lhs, rhs, box, border
headerClass	CSS class for the table header
rowClasses	Comma-separated list of CSS classes for columns
rules	Specification for lines drawn between cells; valid values: groups, rows, columns, all
summary	Summary of the table's purpose and structure used for non-visual feedback such as speech
dir	Direction for text. Valid values are ltr (left to right) and rtl (right to left).
lang	Base language of an element's attributes and text
border	Pixel value for an element's border width
lang	Base language of an element's attributes and text
title	A title used for accessibility. Browsers typically create tooltips for the title's value
width	Width of an element
onblur	Event handler for losing focus
onchange	Event handler for value changes
onclick	Event handler for Mouse button clicked over the element
ondblclick	Event handler for Mouse button double-clicked
onfocus	Event handler for element received focus
onkeydown	Event handler for Key pressed
onkeypress	Event handler for Key pressed and released
onkeyup	Event handler for Key released
onmousedown	Event handler for Mouse button pressed
onmousemove	Event handler for mouse moved
onmouseout	Event handler for mouse left
onmouseover	Event handler for mouse moved onto
onmouseup	Event handler for mouse button released

Example

The following code is from result.xhtml.

<?xml version="1.0" encoding="UTF-8"?>
<!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"
      xmlns:c="http://java.sun.com/jsp/jstl/core">
    <h:body>
  Number :  <h:outputText value="#{user.number}" />
        
    </h:body>
</html>

The following code is from demo.xhtml.

<?xml version="1.0" encoding="UTF-8"?>
<!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"
      xmlns:c="http://java.sun.com/jsp/jstl/core"
      >
    <h:body>
    <h:form>
      <h:panelGrid columns="3">
        Enter a number : 
        <h:inputText id="number" value="#{user.number}" 
          size="20" required="true"
          label="Number" >
          <f:convertNumber />
        </h:inputText>
        <h:message for="number" style="color:red" />
      </h:panelGrid>
      <h:commandButton value="Submit" action="result" />
    </h:form>
    </h:body>
</html>

The following code is from UserBean.java.

package com.java2s.common;

import java.io.Serializable;
import javax.faces.bean.ManagedBean;
import javax.faces.bean.SessionScoped;
 
@ManagedBean(name="user")
@SessionScoped
public class UserBean implements Serializable{
  
  int number;

  public int getNumber() {
    return number;
  }

  public void setNumber(int number) {
    this.number = number;
  }
  
}

Download PanelGrid.zip

To RUN

Copy the generated WAR file from the target folder to Tomcat deployment folder and run Tomcat-Install-folder/bin/startup.bat.

After Tomcat finish starting, type the following URL in the browser address bar.

http://localhost:8080/simple-webapp/demo.xhtml