Working with Themes for Lotus Domino design elements
In this section, you will take your existing project and use Themes to both streamline and future-proof your mashup application. By using Themes to structure the markup used in your build project, you will allow for easier maintenance and control of the applied CSS and generated XML for each XPage in your application.
A Theme is a defined XML object and attribute overwrite rendering template. Themes can be used to conditionally include Lotus Domino design resources like stylesheets and script libraries or to define or extend attributes for XPage controls. They can additionally be used to extend existing Themes, which allows Lotus Domino Web application developers to apply rulesets defining when, for example, a given XPage computed field control will render in the Web browser client with a
xspTextComputedField or simply CFD.
You'll start by creating a new Theme in Big Brother, and you'll use that to include a main.css stylesheet in your index.xsp XPage (see figure 20).
Figure 20. New Theme Dialog - Creating your xhtml_voodoo Theme
Your Theme, which you will name xhtml_voodoo, can be applied as the default Theme for design elements in your example application.
To apply the xhtml_voodoo Theme as the default, you can simply open the application properties from Lotus Domino Designer and select it (see figure 21).
Figure 21. Application Properties - Default Theme Definition
From your xhtml_voodoo Theme, you will add both the inclusion of the main.css stylesheet as well as a
styleClass definition for computed field controls with the following Theme markup (see listing 12).
Listing 12. Defining xhtml_voodoo
The first thing that you will notice is the inclusion of the main.css stylesheet resource. This declaration uses the rendered attribute to control how the defined stylesheet includes when the XPage is processed through the Lotus Domino HTTP server. In this case, you will want your stylesheet to always render, so you've used
The next Theme declaration is your override of the computed field control for XPages. Here you use the control object's target attribute to define the affected design elements. The declaration of xsp states that this applies to all XPages that use this Theme.
The inclusion of the control object's override attribute declares that the following control will act as the absolute definition for the given control object, overwriting any built-in or previously defined object attributes.
The Name is used as an absolute or global handle on a given control; either through reserved name usage or through custom, developer-defined names.
NOTE: For a complete list of all XPage reserved name control objects, open webstandard.theme with your preferred XML editor. This file is located in <Notes Client Installation Directory>\xsp\nsf\themes cirectory on any local machine where Lotus Domino Designer 8.5 is installed.
Using custom, developer-defined names for Control object declarations in Themes can be the functional equivalent to defining cross-HTML element class names. Themes can be used to manipulate given object attributes such as
styleClass just as CSS can be used to modify the visual rendering of HTML elements such as display and background-color.
These custom, developer-defined names for control objects are referred to as ThemeIDs. To set a given XPage Control object's ThemeID do the following:
- Highlight/select the given Control object (see figure 22).
Figure 22. Assigning a ThemeID to an XPage Computed Field Control
- Define a new control object definition for your ThemeID (see listing 13).
Listing 13. Defining a new control object definition
<control> <name>tablerow</name> <property mode='override'> <name>styleClass</name> <value>tablerow</value> </property> </control>
When rendered, any XPage control object whose ThemeID is tablerow will render with the
styleClass of tablerow, or when rendered through the Lotus Domino HTTP server, the affected HTML elements will render with a tablerow
Your simple xhtml_voodoo Theme shows the start of how you can take XPages, which are already extremely powerful tools for the Lotus Domino Web developer, and extend them even further to conditionally apply resources, specific and global control attributes. Themes allow Lotus Domino Web developers to use the RAD techniques with complete control over the rendered output.