Tabbed panel FAQ

How can I create tabbed panels ?

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

 1<%@ page language="java" %>
 2<%@page import="org.apache.struts.action.ActionErrors,org.apache.struts.action.ActionError,org.apache.struts.action.Action" %>
 3<%@ taglib uri="/WEB-INF/struts-layout.tld" prefix="layout" %>
 4
 5<%
 6   if (request.getParameter("error")!=null) {
 7        /// put a dummy error in a tab for the demo.
 8      ActionErrors lc_errors = new ActionErrors();
 9      lc_errors.add( "password2", new ActionError("required"));
10      request.setAttribute(Action.ERROR_KEY, lc_errors);
11  }
12%>
13
14<layout:html styleClass="FORM" key="menu.test.menu1">
15
16<layout:form action="/registration">
17    <layout:tabs styleClass="FORM" width="400">
18        <layout:tab key="1" width="50">
19            <layout:text styleClass="FIELD" property="fullName" key="fullName"/>
20            <layout:text styleClass="FIELD" property="password" key="password"/>
21        </layout:tab>
22        <layout:tab key="2" width="50">
23            <layout:text styleClass="FIELD" property="username" key="username"/>
24            <layout:text styleClass="FIELD" property="password2" key="password2"/>
25        </layout:tab>
26    <layout:tab key="3" width="50">
27    <tr><td>
28    panel content 3
29    </td></tr>
30    </layout:tab>
31    </layout:tabs>
32
33</layout:form>
34    <a href="tabs.jsp?error=true">Show this page with an error</a>
35    <br />
36    <a href="tabs.jsp">Show this page without errors</a>
37</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 :

 1<html>
 2    <%@ taglib uri="http://struts.improve-technologies.com/layout" prefix="layout" %>
 3    <head>
 4        <layout:skin includeScript="true"/>
 5        ...
 6    </head>
 7    <body>
 8        ...
 9        <layout:tabs>...</layout:tabs>
10        ...
11    </body>
12</html>