Custom themes belonging to a web application are placed in
WEB-INF/lib/themes folder of the
application. You need to have a theme folder for each theme you use
in your application, although applications rarely need more than a
single theme. For example, if you want to define a theme with name
example, you will place it in folder
WEB-INF/lib/themes/example.
A basic theme for AJAX rendering consists of a CSS file, a dummy JavaScript file, and a theme descriptor that lists the CSS and JavaScript files included in the theme.
Themes need an XML descriptor file that lists the different files
included in the theme. The descriptor file has name
description.xml and is placed in the theme's
top directory.
The following example shows a AJAX theme with name
"example" that inherits the
corporate theme.
<?xml version="1.0" encoding="ISO-8859-1"?>
<theme name="example">
<author name="IT Mill Ltd" email="info@itmill.com" />
<description>
Example theme.
</description>
<!-- Base theme to inherit. -->
<extends theme="corporate" />
<!-- List of rendering modes supported by the theme. -->
<modes>
<mode name="ajax"/>
</modes>
<fileset>
<!-- UIDL Mode support files -->
<fileset mode="ajax">
<!-- CSS stylesheets to load in html head -->
<file name="css/example.css" />
<!-- JavaScripts to load in html head -->
<file name="script/example-components.js"/>
</fileset>
</fileset>
</theme>
In this example, we defined only the theme for AJAX rendering. If
you wish to support HTML rendering as well, you need to define a
another mode with name "html" and the
corresponding fileset.
Below is the minimal JavaScript skeleton that you need to define
for a custom theme. It defines a JavaScript class with name
Example that inherits the
Base theme. The only required method is
the registerTo method. It needs to
register all rendering functions in the parent class, but
otherwise you can leave it empty.
/** Example theme class extends Base theme */
itmill.themes.Example = itmill.themes.Base.extend( {
/** Register all renderers to a ajax client.
*
* @param client The ajax client instance.
*/
registerTo : function(client) {
// Register all parent rendering functions
arguments.callee.$.registerTo.call(this,client);
},
}); // End of class