- Topic : Java Server Faces (JSF), RichFaces, Ajax4Jsf
- Environment : J2EE 5.0, MyFaces 1.1.5, RichFaces 3.1.0
rich:tabPanel
also read:
This example illustrates how to set the selected tab in rich:tabPanel. This tag is used for creating the multiple tabs
with in same page and allowing user to populate the each tab with different data. RichFaces provides three types of mechanism to fetch the data from server. They are: client,server and ajax. These values are used in the attribute called switchType. Our example uses switchType as client.
switchType=”client”
If the switchType is “client”, then all the data will be reterived from the server and stored in the client. When you select different tabs, javascript is used for dsiplaying the data. This is the fastest solution compare to other approaches.
switchType=”server”
If the switchType is “server”, then the data will be reterived from the server for every request. The page will be refreeshed for
the each request.
switchType=”ajax”
If the switchType is “ajax”, then the data will be reterived from the server for ever request. The page will not be refreeshed for the
each request because we are using ajax call to the server.
selectedTab attribute
selectedTab attribute is used for setting the default selected tab in the rich:tabPanel. If you are not providing the
correct tab name to this attribute, it will throw java.lang.IllegalStateException: No active tabs!.
specifies the default tab as “Tabname1”. The “TabName1” is
the name of the tabs used in rich:tab.
selectedTab.jsp
<!--
Source : www.javabeat.net
-->
<html>
<body>
<f:view>
<h:form id="select">
<rich:tabPanel selectedTab="TabName1" switchType="client">
<rich:tab name="TabName1" label="Java">
<!-- Tab content here -->
<h:outputText value="Sample Text 1"/>
</rich:tab>
<rich:tab name="TabName2" label="J2EE">
<!-- Tab content here -->
<h:outputText value="Sample Text 2"/>
</rich:tab>
<rich:tab name="TabName3" label="Java Server Faces">
<!-- Tab content here -->
<h:outputText value="Sample Text 3"/>
</rich:tab>
</rich:tabPanel>
</h:form>
</f:view>
</body>
</html>
