Thus in our case, Struts 2 automatically rendered the controls using default xhtml theme.
Specifying The Theme in Struts 2
The Struts 2 tags have a theme attribute you can use to specify which Struts 2 theme should be used when creating the HTML for that tag. The values for the theme attribute are simple, xhtml, css_xhtml, and ajax.
You can specify the theme on a per Struts 2 tag basis or you can use one of the following methods to specify what theme Struts 2 should use:
- The theme attribute on the specific tag
- The theme attribute on a tag’s surrounding form tag
- The page-scoped attribute named “theme”
- The request-scoped attribute named “theme”
- The session-scoped attribute named “theme”
- The application-scoped attribute named “theme”
- The struts.ui.theme property in struts.properties (defaults to xhtml)
Thus, you can specify what theme you want to use at any level. Tag level, enclosed tag lever, form level, page level or at application level.
I preferred specifying theme at the application level. To override the default scheme you can create (or update existing) struts.xml file in your project.
Create struts.xml file and add following line into it:
<constant name="struts.ui.theme" value="css_xhtml" /> <constant name="struts.ui.templateDir" value="template" />
So if you want to take full control for your user interface and want to align all controls yourself, I would suggest you to use css_xhtml theme instead of default xhtml.
The theme for above JSP code when changed into css_xhtml would generate following HTML code.
<%@ page contentType="text/html; charset=UTF-8"%>
<%@ taglib prefix="s" uri="/struts-tags"%>
<html>
<head>
<title><s:property value="getText('global.form')" /> - Struts2 Demo | dineshonjava.com</title>
<s:head />
</head>
<body>
<h2><s:property value="getText('global.form')" /></h2>
<s:form action="employee" method="post" validate="true" theme="css_xhtml">
<s:textfield name="name" key="global.name" size="20" theme="css_xhtml"/>
<s:textfield name="age" key="global.age" size="20" theme="css_xhtml"/>
<s:textfield name="email" key="global.email" size="20" theme="css_xhtml"/>
<s:textfield name="telephone" key="global.telephone" size="20" theme="css_xhtml"/>
<s:submit name="submit" key="global.submit" align="center" theme="css_xhtml"/>
</s:form>
<s:url id="localeEN" namespace="/" action="locale" >
<s:param name="request_locale" >en</s:param>
</s:url>
<s:url id="localeHN" namespace="/" action="locale" >
<s:param name="request_locale" >hn</s:param>
</s:url>
<s:url id="localeES" namespace="/" action="locale" >
<s:param name="request_locale" >es</s:param>
</s:url>
<s:url id="localezhCN" namespace="/" action="locale" >
<s:param name="request_locale" >zh_CN</s:param>
</s:url>
<s:url id="localeDE" namespace="/" action="locale" >
<s:param name="request_locale" >de</s:param>
</s:url>
<s:url id="localeFR" namespace="/" action="locale" >
<s:param name="request_locale" >fr</s:param>
</s:url>
<s:a href="%{localeEN}" >English</s:a>
<s:a href="%{localeHN}" >Hindi</s:a>
<s:a href="%{localeES}" >Spanish</s:a>
<s:a href="%{localezhCN}" >Chinese</s:a>
<s:a href="%{localeDE}" >German</s:a>
<s:a href="%{localeFR}" >France</s:a>
</body>
</html>
