This tag is used to create a tabbed pane. Its has the capability of switching the tabs at client side or server side. If its "serverSideTabSwitch" attribute is set to true then switching is server side otherwise it is client side.
This tag is used to create a tabbed pane. Its has the capability of switching the tabs at client side or server side. If its "serverSideTabSwitch" attribute is set to true then switching is server side otherwise it is client side.This tag is used to create a tabbed pane. Its has the capability of switching the tabs at client side or server side. If its "serverSideTabSwitch" attribute is set to true then switching is server side otherwise it is client side. If we want a specific tab to be opened by default when it is rendered then we can set its "selectIndex" attribute to any integer value. Here index value starts from 0 i.e. setting the value to 0 indicates to the first tab and 1 to the second tab and so on. This tag offers a lot of attributes to make it according to your need of look and functionality.
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> <title>t:panelTabbedPane example<title> </head> <body> <center> <f:view> <t:panelTabbedPane width="400" bgcolor="#cddcf6" align="center" serverSideTabSwitch="false" selectedIndex="0"> <t:panelTab label="First"> <h:form id="form1"> <t:outputText value="Client Side First Tab Content."/> </h:form> </t:panelTab> <t:panelTab label="Second"> <h:form id="form2"> <t:outputText value="Client Side Second Tab Content." /> </h:form> </t:panelTab> </t:panelTabbedPane> <f:verbatim></p></f:verbatim> <t:panelTabbedPane width="400" align="center" serverSideTabSwitch="true" selectedIndex="1"> <t:panelTab label="First"> <h:form id="form3"> <t:outputText value="Server Side First Tab Content."/> </h:form> </t:panelTab> <t:panelTab label="Second"> <h:form id="form4"> <t:outputText value="Server Side Second Tab Content." /> </h:form> </t:panelTab> </t:panelTabbedPane> </f:view> </center> </body> </html>
Rendered Output :
Html Source Code :
<html> <head> <link rel="stylesheet" href="/tomahawk_tags/faces/myFacesExtensionResource/ org.apache.myfaces.renderkit.html.util.MyFacesResourceLoader/11867532/ tabbedpane.HtmlTabbedPaneRenderer/defaultStyles.css" type="text/css" /> <script type="text/javascript" src="/tomahawk_tags/faces/ myFacesExtensionResource/org.apache.myfaces.renderkit.html.util. MyFacesResourceLoader/11867532/tabbedpane.HtmlTabbedPaneRenderer/ dynamicTabs.js"><!-- //--></script> <style rel="stylesheet" type="text/css"><!-- #_idJsp0 .myFaces_panelTabbedPane_activeHeaderCell input, #_idJsp0 .myFaces_panelTabbedPane_pane, #_idJsp0 .myFaces_panelTabbedPane_subHeaderCell{ background-color:#cddcf6; } --></style> <title>t:panelTabbedPane example<title> </head> <body> <center> <form name="_idJsp0.autoform" style="display:inline" method="post" action="/tomahawk_tags/pages/panelTabbedPane.jsf"> <script><!-- panelTabbedPane_5F_5FidJsp0_5FHeadersIDs= new Array("_idJsp1_headerCell","_idJsp3_headerCell"); panelTabbedPane_5F_5FidJsp0_5FIDs= new Array("_idJsp1","_idJsp3"); //--></script> <input id="_idJsp0_indexSubmit" name="_idJsp0_indexSubmit" style="display:none" /> <table id="_idJsp0" cellspacing="0" align="center" width="400" class="myFaces_panelTabbedPane"> <tr class="myFaces_pannelTabbedPane_HeaderRow"> <td id="_idJsp1_headerCell" class="myFaces_panelTabbedPane_activeHeaderCell"> <input type="submit" name="_idJsp0.0" value="First" onclick="return myFaces_showPanelTab(0,'_idJsp0_indexSubmit', '_idJsp1_headerCell','_idJsp1',panelTabbedPane_5F_5FidJsp0_5FHeadersIDs, panelTabbedPane_5F_5FidJsp0_5FIDs,null,null,null,null);" /> </td> <td id="_idJsp3_headerCell" class="myFaces_panelTabbedPane_inactiveHeaderCell"> <input type="submit" name="_idJsp0.1" value="Second" onclick="return myFaces_showPanelTab(1,'_idJsp0_indexSubmit', '_idJsp3_headerCell','_idJsp3',panelTabbedPane_5F_5FidJsp0_5FHeadersIDs, panelTabbedPane_5F_5FidJsp0_5FIDs,null,null,null,null);" /></td> <td class="myFaces_panelTabbedPane_emptyHeaderCell"> </td> </tr> <tr class="myFaces_pannelTabbedPane_subHeaderRow"> <td id="_idJsp1_headerCell_sub" class="myFaces_panelTabbedPane_ subHeaderCell myFaces_panelTabbedPane_subHeaderCell_first myFaces_ panelTabbedPane_subHeaderCell_active"> </td> <td id="_idJsp3_headerCell_sub" class="myFaces_panelTabbedPane_ subHeaderCell myFaces_panelTabbedPane_subHeaderCell_inactive"> </td> <td class="myFaces_panelTabbedPane_subHeaderCell myFaces_ panelTabbedPane_subHeaderCell_last"> </td> </tr> <tr class="myFaces_panelTabbedPane_contentRow"> <td colspan="3" class="myFaces_panelTabbedPane_pane"> <div id="_idJsp1"><form id="_idJsp1:form1" name="_idJsp1:form1" method="post" action="/tomahawk_tags/pages/panelTabbedPane.jsf" enctype="application/x-www-form-urlencoded"> Client Side First Tab Content. <input type="hidden" name="_idJsp1:form1_SUBMIT" value="1" /> <input type="hidden" name="javax.faces.ViewState" id="javax.faces.ViewState" value="rO0ABXVyABNbTGphdmEubGFuZy5PYmplY3Q7kM5YnxBzKWwCAAB4cAAAAANzcgBHb3J nLmFwYWNoZS5teWZhY2VzLmFwcGxpY2F0aW9uLlRyZWVTdHJ1Y3R1cmVNYW5hZ2VyJFRyZWVTd HJ1Y3RDb21wb25lbnRGWRfYnEr2zwIABFsACV9jaGlsZHJlbnQASltMb3JnL2FwYWNoZS9teWZ hY2VzL2FwcGxpY2F0aW9uL1RyZWVTdHJ1Y3R1cmVNYW5hZ2VyJFRyZWVTdHJ1Y3RDb21wb25lb .............. .............. " /></form></div></td></tr> </table><input type="hidden" name="javax.faces.ViewState" id="javax.faces.ViewState" value="rO0ABXVyABNbTGphdmEubGFuZy5PYmplY3Q7kM5Y nxBzKWwCAAB4cAAAAANzcgBHb3JnLmFwYWNoZS5teWZhY2VzLmFwcGxpY2F0aW9uLlRyZWVTdH J1Y3R1cmVNYW5hZ2VyJFRyZWVTdHJ1Y3RDb21wb25lbnRGWRfYnEr2zwIABFsACV9jaGlsZHJl ........... ........... " /></form> </p> <form name="_idJsp6.autoform" style="display:inline" method="post" action="/tomahawk_tags/pages/panelTabbedPane.jsf"> <table id="_idJsp6" cellspacing="0" align="center" width="400" class="myFaces_panelTabbedPane"> <tr class="myFaces_pannelTabbedPane_HeaderRow"> <td id="_idJsp7_headerCell" class="myFaces_panelTabbedPane_inactiveHeaderCell"> <input type="submit" name="_idJsp6.0" value="First" /></td> <td id="_idJsp9_headerCell" class="myFaces_panelTabbedPane_activeHeaderCell"> <input type="submit" name="_idJsp6.1" value="Second" /></td> <td class="myFaces_panelTabbedPane_emptyHeaderCell"> </td> </tr> <tr class="myFaces_pannelTabbedPane_subHeaderRow"> <td id="_idJsp7_headerCell_sub" class="myFaces_panelTabbedPane_subHeaderCell myFaces_panelTabbedPane_subHeaderCell_first myFaces_panelTabbedPane_ subHeaderCell_inactive"> </td> <td id="_idJsp9_headerCell_sub" class="myFaces_panelTabbedPane_subHeaderCell myFaces_panelTabbedPane_subHeaderCell_active"> </td> <td class="myFaces_panelTabbedPane_subHeaderCell myFaces_panelTabbedPane_ subHeaderCell_last"> </td> </tr> <tr class="myFaces_panelTabbedPane_contentRow"><td colspan="3" class="myFaces_panelTabbedPane_pane"> <div id="_idJsp7" style="display:none"></div> <div id="_idJsp9"><form id="_idJsp9:form4" name="_idJsp9:form4" method="post" action="/tomahawk_tags/pages/panelTabbedPane.jsf" enctype="application/x-www-form-urlencoded">Server Side Second Tab Content. <input type="hidden" name="_idJsp9:form4_SUBMIT" value="1" /> <input type="hidden" name="javax.faces.ViewState" id="javax.faces.ViewState" value="rO0ABXVyABNbTGphdmEubGFuZy5PYmplY3Q7kM5YnxBzKWwCAAB4cAAAAANzcgBHb3JnLmF wYWNoZS5teWZhY2VzLmFwcGxpY2F0aW9uLlRyZWVTdHJ1Y3R1cmVNYW5hZ2VyJFRyZWVTdHJ1Y3RDb 21wb25lbnRGWRfYnEr2zwIABFsACV9jaGlsZHJlbnQASltMb3JnL2FwYWNoZS9teWZhY2VzL2FwcGx ....... .......... " /></form></div></td></tr> </table><input type="hidden" name="javax.faces.ViewState" id="javax.faces.ViewState" value="rO0ABXVyABNbTGphdmEubGFuZy5PYmplY3Q7kM5YnxBz KWwCAAB4cAAAAANzcgBHb3JnLmFwYWNoZS5teWZhY2VzLmFwcGxpY2F0aW9uLlRyZWVTdHJ1Y3R1cm ....... ........" /></form> </center> <!-- MYFACES JAVASCRIPT --> </body> </html>
This tag contains attributes given below :
- none No side, Default Value
- above Top side only
- below Bottom side only
- hsides Top and bottom sides only
- vsides Right and left sides only
- lhs Left hand side only
- rhs Right hand side only
- box All four sides
- border All four sides
Ads