Fork me on GitHub
Edit on GitHub << back to Tag Reference

component

Please make sure you have read the Tag Syntax document and understand how tag attribute syntax works.

Description

Renders an custom UI widget using the specified templates. Additional objects can be passed in to the template using the param tags.

Render a custom ui widget

Freemarker:

Objects provided can be retrieve from within the template via $parameters._paramname_.

JSP:

Objects provided can be retrieve from within the template via <s:property value="%{parameters._paramname_}" />

In the bottom JSP and Velocity samples, two parameters are being passed in to the component. From within the component, they can be accessed as:

Freemarker:

$parameters.get('key1') and $parameters.get('key2') or $parameters.key1 and $parameters.key2

JSP:

<s:property value="%{parameters.key1}" /> and <s:property value="%{'parameters.key2'}" /> or <s:property value="%{parameters.get('key1')}" /> and <s:property value="%{parameters.get('key2')}" />

Currently, your custom UI components can be written in Velocity, JSP, or Freemarker, and the correct rendering engine will be found based on file extension.

Remember: the value params will always be resolved against the ValueStack so if you mean to pass a string literal to your component, make sure to wrap it in single quotes i.e. value="'value1'" (note the opening "' and closing '" otherwise, the value stack will search for an Object on the stack with a method of getValue1().

If JSP is used as the template, the JSP template itself must lie within the webapp itself and not the classpath. Unlike Freemarker or Velocity, JSP template could not be picked up from the classpath.

(!) templateDir and theme attribute

The final path to the template will be built using the templateDir and template attributes, like ${templateDir}/${theme}/${template}. If for example your component is under /components/html/option.jsp, you would have to set templateDir=”components”, theme=”html” and template=”options.jsp”.

For any Struts tag that you use in your component, make sure that you set its templateDir=”template”

Attributes

Dynamic Attributes Allowed:

false

Name

Required

Default

Evaluated

Type

Description

accesskey false false String Set the html accesskey attribute on rendered html element
cssClass false false String The css class to use for element
cssErrorClass false false String The css error class to use for element
cssErrorStyle false false String The css error style definitions for element to use
cssStyle false false String The css style definitions for element to use
disabled false false String Set the html disabled attribute on rendered html element
errorPosition false false String Define error position of form element (top|bottom)
id false false String HTML id attribute
javascriptTooltip false false false Boolean Use JavaScript to generate tooltips
key false false String Set the key (name, value, label) for this particular component
label false false String Label expression used for rendering an element specific label
labelPosition false false String Define label position of form element (top/left)
labelSeparator false : false String String that will be appended to the label
name false false String The name to set for element
onblur false false String Set the html onblur attribute on rendered html element
onchange false false String Set the html onchange attribute on rendered html element
onclick false false String Set the html onclick attribute on rendered html element
ondblclick false false String Set the html ondblclick attribute on rendered html element
onfocus false false String Set the html onfocus attribute on rendered html element
onkeydown false false String Set the html onkeydown attribute on rendered html element
onkeypress false false String Set the html onkeypress attribute on rendered html element
onkeyup false false String Set the html onkeyup attribute on rendered html element
onmousedown false false String Set the html onmousedown attribute on rendered html element
onmousemove false false String Set the html onmousemove attribute on rendered html element
onmouseout false false String Set the html onmouseout attribute on rendered html element
onmouseover false false String Set the html onmouseover attribute on rendered html element
onmouseup false false String Set the html onmouseup attribute on rendered html element
onselect false false String Set the html onselect attribute on rendered html element
performClearTagStateForTagPoolingServers false false false Boolean Whether to clear all tag state during doEndTag() processing (if applicable)
requiredLabel false false false Boolean If set to true, the rendered element will indicate that input is required
requiredPosition false false String Define required position of required form element (left|right)
style false false String The css style definitions for element to use - it's an alias of cssStyle attribute.
tabindex false false String Set the html tabindex attribute on rendered html element
template false false String The template (other than default) to use for rendering the element
templateDir false false String The template directory.
theme false false String The theme (other than default) to use for rendering the element
title false false String Set the html title attribute on rendered html element
tooltip false false String Set the tooltip of this particular component
tooltipConfig false false String Deprecated. Use individual tooltip configuration attributes instead.
tooltipCssClass false StrutsTTClassic false String CSS class applied to JavaScrip tooltips
tooltipDelay false Classic false String Delay in milliseconds, before showing JavaScript tooltips
tooltipIconPath false false String Icon path used for image that will have the tooltip
value false false String Preset the value of input element.

Examples

JSP

<s:component template="/my/custom/component.jsp"/>

or

<s:component template="/my/custom/component.jsp">
    <s:param name="key1" value="value1"/>
    <s:param name="key2" value="value2"/>
</s:component>

Velocity

#s-component( "template=/my/custom/component.vm" )

or

#s-component( "template=/my/custom/component.vm" )
    #s-param( "name=key1" "value=value1" )
    #s-param( "name=key2" "value=value2" )
#end

Freemarker

<@s..component template="/my/custom/component.ftl" />

or

<@s.component template="/my/custom/component.ftl">
    <@s.param name="key1" value="%{'value1'}" />
    <@s.param name="key2" value="%{'value2'}" />
</@s.component>