Jsf panelgrid html tag

by

JSF h:panelGrid tag is used to render HTML table element.

Attributes of h:panelGrid tag.

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:

welcome.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:ui="http://java.sun.com/jsf/facelets">
	<h:head>
		<title>JSF panel grid example.</title>
	</h:head>
<h:body>
	<h3>JSF panel grid example.</h3>
	<h:panelGrid id="panel" columns="2" border="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>
</h:body>
 
</html>

faces-config.xml

<?xml version="1.0" encoding="windows-1252"?>
<faces-config version="2.0" 
xmlns="http://java.sun.com/xml/ns/javaee" 
xmlns:xi="http://www.w3.org/2001/XInclude" 
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://java.sun.com/xml/ns/javaee 
http://java.sun.com/xml/ns/javaee/web-facesconfig_2_0.xsd">
 
</faces-config>

web.xml

<?xml version="1.0" encoding="UTF-8"?>
<web-app version="3.0" 
    	xmlns="http://java.sun.com/xml/ns/javaee" 
    	xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" 
    	xsi:schemaLocation="http://java.sun.com/xml/ns/javaee 
    	http://java.sun.com/xml/ns/javaee/web-app_3_0.xsd">
 
    <servlet>
        <servlet-name>faces</servlet-name>
        <servlet-class>
          javax.faces.webapp.FacesServlet
        </servlet-class>
    </servlet>
 
	<servlet-mapping>
        <servlet-name>faces</servlet-name>
        <url-pattern>/faces/*</url-pattern>
    </servlet-mapping>
 
</web-app>

URL:

http://localhost:7001/JSFExample19/faces/welcome.xhtml

Output:

JSF example19-1
 
Download this example.