This is used to create a component that acts as a container to group a set of components. All these components are under one component or can say one parent. So this can be useful when we want to nest two or more components into one parent panelGrid colum
This is used to create a component that acts as a container to group a set of components. All these components are under one component or can say one parent. So this can be useful when we want to nest two or more components into one parent panelGrid columThis is used to create a component that acts as a container to group a set of components. All these components are under one component or can say one parent. So this can be useful when we want to nest two or more components into one parent panelGrid column. If we want to render two components without using this tag then these will be rendered in separate columns. This component renders its all children and count them as one component. So this fact of this tag can be useful for us in the case where a component allows only one child component. The program given below will make you clear this concept.
Code Description :
<%@ taglib uri="http://java.sun.com/jsf/html" prefix="h"%> <%@ taglib uri="http://java.sun.com/jsf/core" prefix="f"%> <%@ taglib uri="http://myfaces.apache.org/tomahawk" prefix="t"%> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <title>t:panelGroup example</title> <style type="text/css"> <!-- body{ margin-top:30; } .highlight {background-color: #A8D1E8; color:#000000;} .TableRow1 { background-color: #D0E6E0; } .TableRow2 { background-color: #E8F7F1; } .TableColumn { text-align: center } .TableClass { font-family : verdana, Geneva, Arial, Helvetica, sans-serif; font-size: 13px; color: #000000; padding: 2; border-style: solid; border-width: 2px; } .TableHeader { color: #000000; background-color: #F1F1F1; padding: 3; text-align: center; border: none; } .TableFooter { background-color: #F1F1F1; } --> </style> </head> <body ><center> <f:view> <h:form id="form1" > <t:panelGrid id="dt1" columns="2" border="10" cellpadding="5" cellspacing="3" dir="LTR" frame="hsides" rules="all" > <f:facet name="header"> <h:outputText value="Customer Profile" /> </f:facet> <t:panelGroup colspan="2"> <t:panelGrid columns="2" width="100%" style="color:green;" > <f:facet name="header"> <h:outputText value="Personal Information" style="color:#006699;"/> </f:facet> <t:outputText value="Name"></t:outputText> <t:inputText /> <t:outputText value="Contact Number" onmouseover="this.className='highlight1'" onmouseout="this.className='normal'"> </t:outputText> <t:inputText /> </t:panelGrid> </t:panelGroup> <t:panelGroup > <t:panelGrid columns="2" width="100%" style="color:green;"> <f:facet name="header"> <h:outputText value="Educational Information" style="color:#006699;"/> </f:facet> <t:outputText value="Certificate Name" ></t:outputText> <t:inputText /> <t:outputText value="Year"></t:outputText> <t:inputText /> </t:panelGrid> </t:panelGroup> <t:panelGroup> <t:panelGrid columns="4" width="100%" style="color:green;"> <f:facet name="header"> <h:outputText value="Achievements & Awards" style="color:#006699;"/> </f:facet> <t:outputText value="Name"></t:outputText> <t:inputText /> <t:outputText value="Year"></t:outputText> <t:inputText /> <t:outputText value="Name"></t:outputText> <t:inputText /> <t:outputText value="Year"></t:outputText> <t:inputText /> </t:panelGrid> </t:panelGroup> <t:panelGroup colspan="2" style="color:#006699; font-weight:bold" onmouseover="this.className= 'highlight'" onmouseout="this.className='normal'"> <t:outputText value="Additional Informtion" > </t:outputText> <f:verbatim></br></f:verbatim> <t:inputTextarea rows="2" cols="60" /> <f:verbatim></br></f:verbatim> <t:outputText value="* If you want to add any extra information, describe those in the above area." > </t:outputText> </t:panelGroup> <f:facet name="footer"> <h:outputText value="** Your information will be kept secret." /> </f:facet> </t:panelGrid><br><br> </h:form> </f:view> </center></body> </html>
Rendered Output :
Html Source Code :
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <title>t:panelGrid example</title> <style type="text/css"> <!-- body{ margin-top:30; } .highlight {background-color: #A8D1E8; color:#000000;} .TableRow1 { background-color: #D0E6E0; } .TableRow2 { background-color: #E8F7F1; } .TableColumn { text-align: center } .TableClass { font-family : verdana, Geneva, Arial, Helvetica, sans-serif; font-size: 13px; color: #000000; padding: 2; border-style: solid; border-width: 2px; } .TableHeader { color: #000000; background-color: #F1F1F1; padding: 3; text-align: center; border: none; } .TableFooter { background-color: #F1F1F1; } --> </style> </head> <body ><center> <form id="form1" name="form1" method="post" action="/tomahawk_tags/pages/panelGroup.jsf" enctype="application/x-www-form-urlencoded"> <table id="form1:dt1" border="10" cellpadding="5" cellspacing="3" frame="hsides" rules="all" dir="LTR"> <thead><tr><th scope="colgroup" colspan="2"> Customer Profile </th></tr></thead> <tfoot><tr><td colspan="2"> ** Your information will be kept secret. </td></tr></tfoot><tbody><tr><td colspan="2"><table width="100%" style="color:green;"> <thead><tr><th scope="colgroup" colspan="2"> <span style="color:#006699;">Personal Information</span> </th></tr></thead><tbody><tr><td>Name</td><td><input id="form1:_idJsp5" name="form1:_idJsp5" type="text" value="" /></td></tr> <tr><td><span onmouseover="this.className='highlight1'" onmouseout="this.className='normal'">Contact Number</span></td> <td><input id="form1:_idJsp7" name="form1:_idJsp7" type="text" value="" /></td></tr> </tbody></table></td></tr> <tr><td><table width="100%" style="color:green;"> <thead><tr><th scope="colgroup" colspan="2"> <span style="color:#006699;">Educational Information</span> </th></tr></thead><tbody><tr><td>Certificate Name</td><td> <input id="form1:_idJsp12" name="form1:_idJsp12" type="text" value="" /></td></tr> <tr><td>Year</td><td><input id="form1:_idJsp14" name="form1:_idJsp14" type="text" value="" /></td></tr> </tbody></table></td><td><table width="100%" style="color:green;"> <thead><tr><th scope="colgroup" colspan="4"> <span style="color:#006699;">Achievements & Awards</span> </th></tr></thead><tbody><tr><td>Name</td><td><input id="form1:_idJsp19" name="form1:_idJsp19" type="text" value="" /> </td><td>Year</td><td><input id="form1:_idJsp21" name="form1:_idJsp21" type="text" value="" /></td></tr> <tr><td>Name</td><td><input id="form1:_idJsp23" name="form1:_idJsp23" type="text" value="" /></td><td>Year</td> <td><input id="form1:_idJsp25" name="form1:_idJsp25" type="text" value="" /></td></tr> </tbody></table></td></tr> <tr><td colspan="2"><span onmouseover="this.className='highlight'" onmouseout="this.className='normal'" style="color:#006699;font-weight:bold">Additional Informtion</br> <textarea name="form1:_idJsp29" cols="60" rows="2"></textarea></br> * If you want to add any extra information, describe those in the above area.</span></td></tr> </tbody></table><br><br> <input type="hidden" name="form1_SUBMIT" value="1" /> <input type="hidden" name="javax.faces.ViewState" id="javax.faces.ViewState" value="rO0ABXVyABNbTGphdmEubGFuZy5PYmp lY3Q7kM5YnxBzKWwCAAB4cAAAAAN0AAEzcHQAFS9wYWdlcy9wYW5lbEd yb3VwLmpzcA==" /></form> </center><!-- MYFACES JAVASCRIPT --> </body> </html>
This tag contains attributes given below :
Ads