Tomahawk panelTabbedPane tag

Tomahawk pannelTabbedPane tag

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">&#160;</td>
</tr>
<tr class="myFaces_pannelTabbedPane_subHeaderRow">
<td id="_idJsp1_headerCell_sub" class="myFaces_panelTabbedPane_
subHeaderCell myFaces_panelTabbedPane_subHeaderCell_first myFaces_
panelTabbedPane_subHeaderCell_active">&#160;</td>
<td id="_idJsp3_headerCell_sub" class="myFaces_panelTabbedPane_
subHeaderCell myFaces_panelTabbedPane_subHeaderCell_inactive">&#160;</td>
<td class="myFaces_panelTabbedPane_subHeaderCell myFaces_
panelTabbedPane_subHeaderCell_last">&#160;</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">&#160;</td>
</tr>
<tr class="myFaces_pannelTabbedPane_subHeaderRow">
<td id="_idJsp7_headerCell_sub" class="myFaces_panelTabbedPane_subHeaderCell
 myFaces_panelTabbedPane_subHeaderCell_first myFaces_panelTabbedPane_
subHeaderCell_inactive">&#160;</td>
<td id="_idJsp9_headerCell_sub" class="myFaces_panelTabbedPane_subHeaderCell
 myFaces_panelTabbedPane_subHeaderCell_active">&#160;</td>
<td class="myFaces_panelTabbedPane_subHeaderCell myFaces_panelTabbedPane_
subHeaderCell_last">&#160;</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 :

id : This is the value which is used to uniquely identify the component within the closest container like form or subview. The main thing to remember is that its value must be a static value.

binding : This attribute is used to specify the property of the backing bean with which this component instance is to be bound.

rendered : Its default value is true. If this attribute is set to true then this component is presented in the page to the user. If false, then this component is not rendered.

dir : It is used to set the direction of the text to be displayed. It can take two values LTR(left to right) and RTL (right to left).

lang : It is used to set the base language of the component when displayed.

style : It is used to set the CSS style definition for the component.

title : It is the standard html attribute. It is used to set the tooltip text for this component.

styleClass : It is used to set the CSS class for the component. It is same as html class attribute.

onclick : Script to be invoked when the element is clicked.

ondblclick : It is used for Java Script code to be invoked when the element is double-clicked.

onmousedown : It is used for Java Script code to be invoked when the pointing device is pressed over this element.

onmouseup : It is used for Java Script code to be invoked when the pointing device is released over this element.

onmouseover : It is used for Java Script code to be invoked when the pointing device is moved into this element.

onmousemove : It is used for Java Script code to be invoked when the pointing device is moved while it is in this element.

onmouseout : It is used for Java Script code to be invoked when the pointing device is moved out of this element.

onkeypress : It is used for Java Script code to be invoked when a key is pressed over this element.

onkeydown : It is used for Java Script code to be invoked when a key is pressed down over this element.

onkeyup : It is used for Java Script code to be invoked when a key is released over this element.

align : This attribute is used to set the horizontal alignment of the component.

border : This attribute is used to specify the width of the border of this element.

bgcolor : This attribute is used to specify background color of the element.

cellpadding : This sets the space between the content and the border of the cell.

cellspacing : It specifies the amount of space to leave between cells.

frame : This attribute specifies which sides of the frame surrounding this table will be visible. This attribute can take some values shown 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

rules : This attribute is used to draw lines between cells. It can take some values given below :

none No rules, default value
groups Between row groups
rows Between rows only
cols Between columns only
all Between all rows and columns

summary : You can specify summary of the purpose of the table.

width : This is used to set the width of the entire table. Its value is specified in %. Suppose we set it to 50% then this table will be shown in the 50% space of the width of your screen.

enabledOnUserRole : If the current user has one of the roles listed in the enabledOnUserRole attribute then enabling or disabling of the component is decided on the base of "disabled" attribute. If disabled attribute is set to true then component is disabled otherwise enabled. If the user is not in the above list then the component is rendered disabled.

visibleOnUserRole : If the current user has one of the roles listed in the visibleOnUserRole attribute then processing of the component is decided on the base of "rendered" attribute. If the rendered attribute is set to true then component is not rendered otherwise displayed on the page. On the other hand if the current user is not in the above list then the component is not processed.

selectedIndex : This attribute is used to specify the index of the tab that is to be selected by default. The index starts from 0 onwards i.e. if we set this attribute's value to "1" then second tab is shown first when the component is rendered.

activeTabStyleClass : This is used to specify the style class for the active tab cell.

inactiveTabStyleClass : This is used to specify the style class for the inactive tab cell.

disabledTabStyleClass : This is used to specify the style class for the disabled tab cell.

activeSubStyleClass : This is used to specify the style class for the active tab sub cell.

inactiveSubStyleClass : This is used to specify the style class for the inactive tab sub cell.

tabContentStyleClass : This is used to specify the style class for the active tab content cell.

serverSideTabSwitch : This attribute specifies whether to provide server side component. If we set it to true then the switching of the tabs are server side.

activePanelTabVar : This is a boolean attribute that is set in request scope when rendering a panelTab. If it has value "true" that means currently rendered panelTab is active.