Tabbed panel

Tabbed panel
How can I create tabbed panels ?

The <layout:tabs> and <layout:tab> tags can be use to create a tabbed panel. Example:


<%@ page language="java" %>
<%@page import="org.apache.struts.action.ActionErrors,org.apache.struts.action.ActionError,org.apache.struts.action.Action" %>
<%@ taglib uri="/WEB-INF/struts-layout.tld" prefix="layout" %>

<%
   if (request.getParameter("error")!=null) {
  	  /// put a dummy error in a tab for the demo.
	  ActionErrors lc_errors = new ActionErrors();
	  lc_errors.add( "password2", new ActionError("required"));
	  request.setAttribute(Action.ERROR_KEY, lc_errors);
  }
%>

<layout:html styleClass="FORM" key="menu.test.menu1">

<layout:form action="/registration">
	<layout:tabs styleClass="FORM" width="400">
		<layout:tab key="1" width="50">
			<layout:text styleClass="FIELD" property="fullName" key="fullName"/>
			<layout:text styleClass="FIELD" property="password" key="password"/>
		</layout:tab>
		<layout:tab key="2" width="50">
			<layout:text styleClass="FIELD" property="username" key="username"/>
			<layout:text styleClass="FIELD" property="password2" key="password2"/>
		</layout:tab>
	<layout:tab key="3" width="50">
	<tr><td>
	panel content 3
	</td></tr>
	</layout:tab>
	</layout:tabs>

</layout:form>
	<a href="tabs.jsp?error=true">Show this page with an error</a>
	<br />
	<a href="tabs.jsp">Show this page without errors</a>
</layout:html>


Result

How can I link a tab to an url ?
If you want a request to be done when the user clicks on a tab, use the href attribute of the <layout:tab> to set the link url.
How do I submit a form when the user select a tab ?
Just set the reqCode attribute of the <layout:tab> tag.
How do I select the initial tab to display ?

To select the initial tab, you must :

  • Set the selectedTabKeyName attribute of the <layout:tabs> tag
  • Set the key attribute of the different <layout:tab> tags
  • Invoke the fr.improve.struts.taglib.layout.util.TabsUtil.setCurrentTab(selectedTabKeyName, key, request, response) in your Struts action before displaying the page

I got a Javascript error and nothing happen when I click on a tab, what happens ?

Your page is probably missing the tabs javascript code. To include this code, you need to put a <layout:html> or <layout:skin includeScript="true"> in the page.

Example :

<html>
	<%@ taglib uri="http://struts.improve-technologies.com/layout" prefix="layout" %>
	<head>
		<layout:skin includeScript="true"/>
		...
	</head>
	<body>
		...
		<layout:tabs>...</layout:tabs>
		...
	</body>
</html>