TabbedPanel (Ajax Tag) Example

In this section, you will learn about the tabbedPanel tag. This is an Ajax component, where each tab is either a local content or a remote content (refreshed each time when user selects that tab).

TabbedPanel (Ajax Tag) Example

TabbedPanel (Ajax Tag) Example

     

In this section, you will learn about the tabbedPanel tag. This is an Ajax component, where each tab is either a local content or a remote content (refreshed each time when  user selects that tab). 

To use tabbedPanel tag, the head tag must be included on the jsp page and must be configured for performance or debugging purposes. However, If you want to use the cookie feature then you must provide a unique id for the tabbedpanel component. This is used for identifying the name of component that is stored by the cookie.

Add the following code snippet into the struts.xml file.
struts.xml

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE struts PUBLIC
  "-//Apache Software Foundation//DTD Struts Configuration 2.0//EN"
  "http://struts.apache.org/dtds/struts-2.0.dtd">

<struts>
  <!-- Rose India Struts 2 Tutorials -->
  <constant name="struts.enable.DynamicMethodInvocation" value="false" />
  <constant name="struts.devMode" value="true" />

  <package name="roseindia" namespace="/roseindia" extends="struts-default"> 

  <action name="TabbedPanel">
  <result>/pages/tabbedpanel.jsp</result>
  </action>

 <!-- Add actions here -->
  </package>


  <!-- Add packages here -->

</struts>

Create a jsp using the tag <s:tabbedPanel>. This tag is used for creating the tabs.
       
tabbedPane.jsp

<%@ taglib prefix="s" uri="/struts-tags" %>

<html>
  <head>
  <s:head theme="ajax" debug="true"/>
  </head>
  <body>
  <table border="1" width="50%">
  <tr>
  <td width="100%">

  <s:tabbedPanel id="test" >

  <s:div id="one" label="Tab 1" theme="ajax" labelposition="top" >
  This is the first panel.
  RoseIndia.nt<br>
  JavaJazzUp.com<br>
  NewsTrackIndia.com
  </s:div>

  <s:div id="two" label="Tab 2" theme="ajax">
  This is the second panel.
  </s:div>
  
  <s:div id="three" label="Tab 3" theme="ajax">
  This is the third panel.<br>
  Java Tutorial<br>
  PHP Tutorial<br>
  Linux Tutorial
  </s:div>

  <s:div id="four" label="Tab 4" theme="ajax">
  This is the forth panel.
  </s:div>

 </s:tabbedPanel>

 </td>
  </tr>
  </table>
  </body>
</html>

Output:

When you run the above example, you get the output as:

When you click the "Tab 2" then you get the content of "Tab 2" as shown:

If you click "Tab 3" then you get the content of "Tab 3" as shown:

If you click the "Tab 4" you get the content of "Tab 4" as:

     

Tutorials

  1. Checkbox Tag (Form Tag) Example
  2. Checkboxlist Tag (Form Tag) Example
  3. Datetimepicker Tag (Form Tag) Example
  4. Doubleselect Tag (Form Tag) Example
  5. File Tag (Form Tag) Example
  6. Form Tag Example
  7. Label Tag (Form Tag) Example
  8. Optiontransferselect Tag (Form Tag) Example
  9. Optgroup Tag (Form Tag) Example
  10. Password Tag (Form Tag) Example
  11. Radio Tag (Form Tag) Example
  12. Reset Tag (Form Tag) Example
  13. Submit Tag (Form Tag) Example
  14. Textarea Tag (Form Tag) Example
  15. Textfield Tag (Form Tag) Example
  16. Updownselect Tag (Form Tag) Example
  17. Fielderror Tag (Non-Form UI Tags) Example
  18. TabbedPanel (Ajax Tag) Example
  19. tree and treenode (Ajax Tag) tags Example
  20. Auto Completer Example
  21. Struts 2 Tags (UI Tags) Examples
  22. Actionerror and Actionmessage Tags (Non-Form UI Tags) Example
  23. Div (Ajax Tag) tag Example
  24. Select Tag (Form Tag) Example
  25. Combobox Tag (Form Tag) Example
  26. Struts 2 Tags (UI Tags) Examples
  27. Struts 2 Autocompleter,Struts 2 Autocomplete
  28. Actionerror Tag