In this tutorial you will learn about the JSF 2 html column tag.
JSF 2 h column tag
In this tutorial you will learn about the JSF 2 html column tag.
<h:column> tag is used to create column in the table. This tag is generally used within the <h:dataTable> tag. <h:dataTable> tag treats column tag as a child component. This tag is rendered to the HTML <td> tag.
Attributes of JSF 2 h column tag
- rendered : This is an optional attribute. This attribute
evaluates to a boolean value which indicates that whether the current component
should be rendered in the Render Response Phase or not or worked on any later
form submission. Default value is 'true'.
- 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.
- id : This is an optional attribute. This attribute is used
to make the attribute uniquely identifiable. The value given to this attribute
must be unique within the closest parent.
- footerClass : This is an optional attribute. Specifies the
CSS style class/es for the column footer of the table to be applied on. The list of CSS
style class/es is a space-separated list.
- headerClass : This an optional attribute. Specifies the CSS
style class/es for the any column header of the table to be applied on. The list of CSS
style class/es is a space-separated list.
- rowHeader : This is an optional attribute. It evaluates a boolean value that specifies the column is a header column and it is rendered to <th> tag except the <td> tag.
Example :
An example of JSF 2 h column is being given here which will demonstrate you about how this tag can be used in the JSF applications. In this example you will see how the columns of a table can be created. For this we will use the <h:dataTable> tag and used the <h:column> tag inside it.
Directory Structure
columnExample.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"> <head> <title>JSF 2 html column</title> </head> <body> <h:outputStylesheet library="css" name="table.css" /> <f:view> <h:form> <h:dataTable value="" border="1" title="column tag example"> <f:facet name="header"> <h:outputText value="JSF column example" /> </f:facet> <h:column> <f:facet name="header"> <h:outputText value="Name" /> </f:facet> <h:outputText value="Deepak"/> </h:column> <h:column> <f:facet name="header"> <h:outputText value="Address" /> </f:facet> <h:outputText value="Rohini"/> </h:column> <h:column> <f:facet name="header"> <h:outputText value="Ph.No" /> </f:facet> <h:outputText value="9328888888"/> </h:column> </h:dataTable> </h:form> </f:view> </body> </html>
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>jsfHColumn</display-name> <welcome-file-list> <welcome-file>columnExample.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
Download the above code from the link Download Source Code and import this file into the eclipse or copy the above codes and paste them into the respective files as per the directory structure given above and then start your server and then type the following link http://localhost:8181/jsfHColumn/columnExample.jsf into the address bar of your web browser.
Output :
When you will execute the above example you will get the output as follows :
The HTML source code will be viewed 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 html column</title> </head> <body> <form id="j_idt4" name="j_idt4" method="post" action="/jsfHColumn/columnExample.jsf" enctype="application/x-www-form-urlencoded"> <input type="hidden" name="j_idt4" value="j_idt4" /> <table border="1" title="column tag example"> <thead> <tr><th colspan="3" scope="colgroup">JSF column example</th></tr> <tr> <th scope="col">Name</th> <th scope="col">Address</th> <th scope="col">Ph.No</th> </tr> </thead> <tbody> <tr> <td>Deepak</td> <td>Rohini</td> <td>9328888888</td> </tr> </tbody> </table> <input type="hidden" name="javax.faces.ViewState" id="javax.faces.ViewState" value="H4sIAAAAAAAAAJVUT2hcRRj/ssnmX9M2SWNtDwkeYqFQXhANRIOY1WzI4jZd3Bj657Cd3f2afcm8N+PM93bfFgz2oociKCoiRPTgoYfeeupFkSpCoQEFERRBxKvioSLoQWdmN3kbm6U48Gbmzcw38/u+3+/7bv4KaakVjG2wOvMi8rm3zHTtLJPpge8/v3P88te9kFqCYS5YdYlVSKgcDFFNoa4JXo3lcwtg20hj0PSj5ksT9G+U/Co9FSk4dinv7uUsXPfOlTewQvNv7Zz/aFSf5imAWFoDaVr0CmxBr/3bUuBZm9i7wiqovYoIpAgxJO/l3Au78+mCEhIVNV/EpoZ2GzcXKjiSPJgNo6BzUxIMMyLllyNCre2T0Mbf7/Dbr4dgyrzp6ShsI7A9R9JeplDI57KLJlqzXU74geTeIl5hEael1uJ0RkreXBWbGP5x48yF7YWNhRGLpTEFEzMVwaMgzMbM2KEX1yjgBsHTb5cHvohjE4nZ/xeJgvLrjLDTZ+vkAMFE4vdqjVFGYdHgNQQltGeUYs28rym+9s3kB1+xD3uhJwd92r+KjqdUo8/2xujUwaiKZN5eNqpAVWR1VBfu3nr2ne17Z1OQysNQhTOtV1iABONOFDOWo5migRWuz+dhWBubqruD4HjrhC9miqh8xv2rrMxxPpaybh0ac9wdk7Y/ZGltKe7JPRWlEj1JI8OJSwfo8MRnfxd/2fzh7q4OexLruoLpTh+xbv0rCE2ZanVVrPnYyNql36/f/vK70Vu3U055px402aOp2NSEgTP6dH3u/trO2pGW0eSDRh1nH998/47/48md1tlHErLcbsuR/JtDKyeCV284P1xgxjrYSgL1aGtOkH24qA7CbaWBIapMlUlClURr997/JIXC0Chh0yfPyrpUZtqvGI00uSkdiPSS20YlTbCnuiE6F5GMCJIWy9iWC4K0ZfyJBIRdO9yqO8+4YbZDAp0Fptek1elu7y0yYl1rSzuVBpVo5Az2eK9qOlXlQsJ1VOM/f/zJn9femEvZ5EnXGY/QMDeanFuJgjKq12++N3no3Z+uO9L+Mc3AP+lQlRyqEhcVRr4IS8vZzOIe+P59rgzYyWC3OuaSw3aHHfKjD5dGO5+27NBPMKLaFK02JRqW+urCr+7jYn8EnheCIwvvPaZe+3b7r99MBC7uRkCCvXMu/hcbSaA5bgYAAA==" autocomplete="off" /> </form> </body> </html>
[ 0 ] Comments