Changing the "theme" of UI components - struts 2

The struts 2 UI components come with four themes for rendering HTML markup into your view page.

• simple
• xhtml
• css_xhtml
• ajax

The default theme coming with struts 2 is xhtml which is involving html table layout to render the form component in the view page. For example consider the fallowing UI components.

<s:form action="doLogin.action" method="POST">
<s:textfield name="userName" label="User name" />
</s:form>

This UI components will render the fallowing HTML markup into your view page base on the default theme of the struts 2. You may confuse, if you haven't heard about struts 2 themes.

<form method="post" action="doLogin.action" onsubmit="return true;" id="doLogin">
<table class="wwFormTable">
<tbody>
<tr>
<td class="tdLabel">
<label class="label" for="doLogin_userName">User name:</label>
</td>
<td>
<input type="text" id="doLogin_userName" value="" name="userName"/>
</td>
</tr>
</tbody></table>
</form>

This HTML markup was rendered into view page on xhtml theme of struts 2. You may probably want to change the default theme. You can change this by overriding the default property which is defined in default.properties, found in struts 2 core jar file at org.apache.struts2.

To override any of the framework’s default properties, you only need to create your own properties file, named struts.properties, and place it in the classpath. To change the default theme, just create a struts.properties file with the following property definition:

struts.ui.theme=css_xhtml

In addition to these four themes that comes with struts 2, you can create your own them too.