Using themes with Struts XDIME elements

In XDIME, themes can be used to define an overall look and feel that is tailored to the requesting device. Within the Theme editor in Rational Application Developer there are numerous style properties categories. One of these categories is Form. Within the Form category, there are different properties that control how form elements are displayed.

Supporting radio, checkbox, and multibox tags

One of the properties in the Form category, Selection List Style, is used to control how selection elements are displayed within a form. If no theme is applied or if a theme that contains the value "defaults" as the Selection List Style is used, the default display type is a drop down list.

For compatibility reasons, the Struts HTML radio and multibox tags have the same names in the Struts XDIME tag libraries. The function they provide is intended to be as similar to the original as possible. However it is impossible to guarantee that the presentation of these controls matches their names, as that depends on the applied theme. If you would like the radio tag to generate radio buttons and the multibox element to generate check boxes, an appropriate theme must be applied.

Coding example:

Create a new selector called controls.
Select Form under the Style Properties category.
Select controls for the Selection List Style property.
Save the theme in the Theme editor.

In the JSP add the theme as an attribute on the canvas tag:

<canvas layoutName="/Subscription.mlyt" type="portlet" theme="/subscription.mthm">

Finally add the controls selector as the styleClass attribute to the <xdime:select> tag that contains the radio or multibox tag(s):

<xdime:select property="accountType" multiple="false"
	entryPane="mailserver_type" styleClass="controls">
	<xdime:radio property="accountType" value="primary">
		<bean:message key="option.primary" />
	</xdime:radio>
..
</xdime:select>

The MWPStrutsSample Portlet demonstrates this function and can be used as a reference.

Supporting the TextArea tag

XDIME does not have a separate element type to create textarea controls. Instead, to create the equivalent of an HTML textarea, a theme must be applied. Two of the properties in the Form category of the Theme editor are Rows and Columns. These values can be set to create a textarea of the desired height and width.

Note: For more information see the topic Working with Themes to create a theme policy in the IBM® Mobile Portal Accelerator Toolkit Information Center.

Create a new selector called xftextinput.textarea.
Select Form under the Style Properties category.
Assign an integer value to the Rows property.
Optionally, assign an integer value to the Columns property.
Save the theme in the Theme editor.

In the JSP add the theme as an attribute on the canvas tag:

<canvas layoutName="/Registration.mlyt" type="portlet"
	theme="/subscriptionTable.mthm">

Finally add the textarea selector as the styleClass attribute to the <xdime:textarea> tag:
```
<xdime:textarea property="comment" entryPane="comment" styleClass="textarea" />
```