The tabs tag allows to define tabbed panels.
| Attribute Name | Description |
|---|---|
| styleClass | The css style class of the tabbed panels |
| selectedTabKeyName | Name of the request/attribute/parameter/cookie used to select the tab to display. To select the tab to display, use the fr.improve.struts.taglib.layout.util.TabsUtil.setCurrentTab(selectedTabKeyName, key, request, response) method. Setting this attribute is mandatory to have the right tab selected after a server sort or change page action |
| width | The width of the panels |
Tabbed panels are defined in a tabs tag with the tab tag, which replaces the panel tag in this case.
If one of the forward, href or page attribute is set, the body of the tag is evaluated only if the panel is selected, ie its key attribute matchs the parameter or request attribute named selectedTabKeyName.
If there is an error in a field contained in a tabbed panel, the style class of the panel is set to ongletTextErr by struts-layout.
| Attribute Name | Description |
|---|---|
| key | Key of the panel title. Also used to determinate if a panel is selected or not. |
| forward, href [EL], page | If one of this attribute is set, the url specified with this attribute is invoked when a tab is selected. |
| reqCode | If this attribute is set, the current form is submitted with the DispatchAction attribute set to the reqCode value when a tab is selected. |
| width | The width of the panel title |
The following styleclasses are used by the tab and tabs tag:
See the default.css file of the example application for the default values.
All tabbed panels defined in one jsp, DHTML is used to select a panel. The first panel is selected by default.
<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>
The tabbed panels are defined in separated jsps (tab1 and tab2.jsp). If a panel is selected it is initialy displayed. Only the body of the selected panel is evaluated.
tabs.jsp: ... <layout:tabs styleClass="FORM" width="400" selectedTabKeyName="tab"> <layout:tab key="1" href="tabs.jsp?tab=1"> <%@include file="tab1.jsp" %> </layout:tab> <layout:tab key="2" href="tabs.jsp?tab=2"> <%@include file="tab2.jsp" %> </layout:tab> </layout:tabs> ... tab1.jsp: <layout:text styleClass="FIELD" property="fullName" key="fullName"/> <layout:text styleClass="FIELD" property="password" key="password"/> tab2.jsp: <layout:text styleClass="FIELD" property="username" key="username"/> <layout:text styleClass="FIELD" property="password2" key="password2"/>