In this tutorial you will learn about the JSF 2 html panelGroup tag.
JSF 2 h panelGroup
In this tutorial you will learn about the JSF 2 html panelGroup tag.
<h:panelGroup> tag is purposed to use in the condition or position when there is an only one child component can be nested. This tag creates a component which is likely to a container that grouped the set of components into one component called parent component. This tag is useful when more than one components are required to nest into one parent component (parent panelGrid column).
Attributes of JSF 2 h panelGroup
- id : This is not a required attribute. This attribute is an
identifier of the component. This attribute makes the component uniquely
identifiable within the closest parent component. Value of this attribute must
be unique within its closest parent component.
- rendered : This is not a required 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.
- layout : This is not a required attribute. This attribute is used to specify the layout markup. If the value of this attribute is specified to "block" then render the HTML 'div' element else render the 'span 'element.
- style : This is not a required attribute. This attribute is used to specify the applicable CSS style onto the component.
- styleClass : This is not a required attribute. This attribute is used to specify the applicable CSS style of space-separated class/es list onto the component.
- binding : This is not a required 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 is demonstrate about how to use the JSF 2 html panelGroup tag in an application. In this example I have created a panelGroup.xhtml JSF view page where I have used this tag within the <h:panelGrid> tag of JSF html tag library. In this example you can see the difference of using of the other JSF tag within the <h:panelGroup> tag and outside of this tag. In this example you will see that more than one tags used outside the <h:panelGroup> tag each are divided into the individual columns because of the <h:panelGrid> tag feature but if more than one tags are used within the <h:panelGroup> tag then these tags are shown in the same column.
Directory Structure
panelGroup.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 f facet Tag Example</title> </head> <body> <f:view> <h:form> <h:panelGrid border="1" columns="2" > <f:facet name="header"> <h:outputText value="Student" /> <h:outputText value="Detail" /> </f:facet> <h:outputText value="Enter your name : "/> <h:inputText /> <h:outputText value="Enter your age : "/> <h:inputText /> <h:panelGroup> <h:outputText value="* Leave" /> <h:outputText value="Comment Here " /> </h:panelGroup> </h:panelGrid> </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>jsfHPanelGroup</display-name> <welcome-file-list> <welcome-file>panelGroup.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 then start your web server and then use the following link http://localhost:8181/jsfHPanelGroup/panelGroup.xhtml in the address bar of the web browser.
Output :
When you will execute the above code you will get the output as follows :
HTML source code will be shown 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 f facet Tag Example</title> </head> <body> <form id="j_idt3" name="j_idt3" method="post" action="/jsfHPanelGroup/panelGroup.jsf" enctype="application/x-www-form-urlencoded"> <input type="hidden" name="j_idt3" value="j_idt3" /> <table border="1"> <thead> <tr><th colspan="2" scope="colgroup">StudentDetail</th></tr> </thead> <tbody> <tr> <td>Enter your name : </td> <td><input type="text" name="j_idt3:j_idt7" /></td> </tr> <tr> <td>Enter your age : </td> <td><input type="text" name="j_idt3:j_idt14" /></td> </tr> <tr> <td>* LeaveComment Here </td> </tr> </tbody> </table> <input type="hidden" name="javax.faces.ViewState" id="javax.faces.ViewState" value="H4sIAAAAAAAAAJVUvW8TMRR/uXz0k9K0qAyotENBQoKLClR8VIiGftATaYlIQBSG4iRuc8E5G9uXXDpUdIGBBQkYkIpgYGDoxl+AGJCQigRSFybEDGwIiQn7muZSRAae5Gef/Z7fe7/38218hygTHOIlVEGmK21iziJRnEMs2vb5zduBWx/DYMxAJ6GoMIPyknILOmSRY1GkpOCx8xOgpbvarnSvGlEJsdKiXZAnXA79N1P+vQQ5y+blXAnn5fjDD9ef94ojxADwmHZgStw7sAph/bXKwdQ+nrmE8liYeVpm1MGONK9akzvrkTSnDHNZu4RrAurSpy7k0BMEnHbccvMhk9CJpOR2zpVYCB0S6vnH/Pz1CEk4qGKawnXqGWhNsBRmMp1OWdNTCq2xFhZ2mRFzCi8hl8iZ7c2RJGOklqW3sfPz1dGF9YnSRLfOpXoA4gmGHEwucuoy0yvKMlHhzwwtjX7zPAXD2P/BkOZ2BUncXLCusE3CvqDobBHJJMcZlazqTtDzJOeolrKF9NY+DT59h56FIWRBRNgr2G+SUY1orZwO/zurjFSxZxUlMM+gCuYL71+fe7S+OWeAkYKOPEFCzKMyltDnMyKhG5TIqLSc5fEUdArlU/DvkDCwbWHTRAZzGxF7BeUIHvcYq+iC4n7j+pnWXbqnPdt0O+tPoycbVIpoYknobjo+3jiM7WJdm160t2bEoRb9tuYUIyat7GI6OT+dajwjn30XKCUYOZvD/O7W+u8fBoRuQLSCiKsQDfmt2esHjDfBG1S2v2k95K3qKaZq4dhRCGOerTFc4RCpULsAgXjMdxsGCVG/Xgl7mtE59Tc4vtVoY9cI3uEufMKKjsda0fGajatXKG39KOs0jCkSSKuwGyXLkXgZ876vL17+Wrt/2tC0q6PEoTewm3fLOczvbTwZ7Hr85cHOv8NgzPsDvYkLb8IEAAA=" autocomplete="off" /> </form> </body> </html>
[ 0 ] Comments