Home > Guides > Tag Developers Guide > Struts Tags > Tag Reference > UI Tag Reference > tabbedPanel

To use this tag:

  • Add: <%@ taglib prefix="sx" uri="/struts-dojo-tags" %> to your page.
  • The head tag must be included on the page, which can be configured for performance or debugging purposes.
  • If the parseContent parameter for the head tag is false (it is false by default), then the id tag is required.

Additional Examples


For more examples see Ajax and JavaScript Recipes


The tabbedpanel widget is primarily an AJAX component, where each tab can either be local content or remote content (refreshed each time the user selects that tab).

If the useSelectedTabCookie attribute is set to true, the id of the selected tab is saved in a cookie on activation. When coming back to this view, the cookie is read and the tab will be activated again, unless an actual value for the selectedTab attribute is specified. If you want to use the cookie feature, please be sure that you provide a unique id for your tabbedpanel component, since this will also be the identifying name component of the stored cookie.


Dynamic Attributes Allowed:








accesskeyfalsefalseStringSet the html accesskey attribute on rendered html element
afterNotifyTopicsfalsefalseStringComma delimmited list of topics that will published after the request(if the request succeeds)
ajaxAfterValidationfalsefalsefalseBooleanMake an asynchronous request if validation succeeds. Only valid if 'validate' is 'true'
beforeNotifyTopicsfalsefalseStringComma delimmited list of topics that will published before the request
cssClassfalsefalseStringThe css class to use for element
cssErrorClassfalsefalseStringThe css error class to use for element
cssErrorStylefalsefalseStringThe css error style definitions for element to use
cssStylefalsefalseStringThe css style to use for element
disabledfalsefalseStringSet the html disabled attribute on rendered html element
errorNotifyTopicsfalsefalseStringComma delimmited list of topics that will published after the request(if the request fails)
errorPositionfalsefalseStringDefine error position of form element (top|bottom)
errorTextfalsefalseStringThe text to display to the user if the is an error fetching the content
executeScriptsfalsefalsefalseBooleanJavascript code in the fetched content will be executed
formFilterfalsefalseStringFunction name used to filter the fields of the form.
formIdfalsefalseStringForm id whose fields will be serialized and passed as parameters
handlerfalsefalseStringJavascript function name that will make the request
highlightColorfalsenonefalseStringColor used to perform a highlight effect on the elements specified in the 'targets' attribute
highlightDurationfalse2000falseIntegerDuration of highlight effect in milliseconds. Only valid if 'highlightColor' attribute is set
hreffalsefalseStringThe URL to call to obtain the content. Note: If used with ajax context, the value must be set as an url tag value.
idfalsefalseStringThe id to use for the element
indicatorfalsefalseStringId of element that will be shown while making request
javascriptTooltipfalsefalsefalseBooleanUse JavaScript to generate tooltips
keyfalsefalseStringSet the key (name, value, label) for this particular component
labelfalsefalseStringLabel expression used for rendering an element specific label
labelSeparatorfalse:falseStringString that will be appended to the label
labelpositionfalsefalseStringDefine label position of form element (top/left)
listenTopicsfalsefalseStringTopic that will trigger the remote call
loadingTextfalseLoading...falseStringText to be shown while content is being fetched
namefalsefalseStringThe name to set for element
notifyTopicsfalsefalseStringComma delimmited list of topics that will published before and after the request, and on errors
onblurfalsefalseString Set the html onblur attribute on rendered html element
onchangefalsefalseStringSet the html onchange attribute on rendered html element
onclickfalsefalseStringSet the html onclick attribute on rendered html element
ondblclickfalsefalseStringSet the html ondblclick attribute on rendered html element
onfocusfalsefalseStringSet the html onfocus attribute on rendered html element
onkeydownfalsefalseStringSet the html onkeydown attribute on rendered html element
onkeypressfalsefalseStringSet the html onkeypress attribute on rendered html element
onkeyupfalsefalseStringSet the html onkeyup attribute on rendered html element
onmousedownfalsefalseStringSet the html onmousedown attribute on rendered html element
onmousemovefalsefalseStringSet the html onmousemove attribute on rendered html element
onmouseoutfalsefalseStringSet the html onmouseout attribute on rendered html element
onmouseoverfalsefalseStringSet the html onmouseover attribute on rendered html element
onmouseupfalsefalseStringSet the html onmouseup attribute on rendered html element
onselectfalsefalseStringSet the html onselect attribute on rendered html element
openTemplatefalsefalseStringSet template to use for opening the rendered html.
parseContentfalsetruefalseBooleanParse returned HTML for Dojo widgets
requiredLabelfalsefalsefalseBooleanIf set to true, the rendered element will indicate that input is required
requiredPositionfalsefalseStringDefine required position of required form element (left|right)
separateScriptsfalsetruefalseStringRun scripts in a separate scope, unique for each tag
showErrorTransportTextfalsetruefalseBooleanSet whether errors will be shown or not
showLoadingTextfalsefalsefalseBooleanShow loading text on targets
stylefalsefalseStringThe css style definitions for element to use - it's an alias of cssStyle attribute.
tabindexfalsefalseStringSet the html tabindex attribute on rendered html element
targetsfalsefalseStringComma delimited list of ids of the elements whose content will be updated
templatefalsefalseStringThe template (other than default) to use for rendering the element
templateDirfalsefalseStringThe template directory.
titlefalsefalseStringSet the html title attribute on rendered html element
tooltipfalsefalseStringSet the tooltip of this particular component
tooltipConfigfalsefalseStringDeprecated. Use individual tooltip configuration attributes instead.
tooltipCssClassfalseStrutsTTClassicfalseStringCSS class applied to JavaScrip tooltips
tooltipDelayfalseClassicfalseStringDelay in milliseconds, before showing JavaScript tooltips
tooltipIconPathfalsefalseStringIcon path used for image that will have the tooltip
transportfalseXMLHTTPTransportfalseStringTransport used by Dojo to make the request
validatefalsefalsefalseBooleanPerform Ajax validation. 'ajaxValidation' interceptor must be applied to action
valuefalsefalseStringPreset the value of input element.


The following is an example of a tabbedpanel and panel tag utilizing local and remote content:

Use notify topics to prevent a tab from being selected: