Themes syntax for XPage Controls

12/03/2008 11:09 AM by Chris Toohey

Those of us who have jumped feet-first into the wonderful world of Domino Web Application Development with XPages may or may not have gotten into Themes. See - while XPages allows for RAD Developers to quickly and easily create up-to-date web application user interfaces for NotesDatabases - those of us (and yes, I'm certainly one of those people) who want complete and absolute control over the Domino-rendered markup have finally gotten their wish with the advent of Themes.

By using Themes in our XPage application endeavors, we can control not only which Resources (Stylesheets, Client JavaScript Libraries, etc.) are included in our XPage, but we can control each attribute for an XPage Control object.

Yeah - that sounds cool, but "but what does that mean" right? Well, after defining a Theme for your NotesApplication, we can either create custom ThemeIDs across multiple Control object types or target specific Controls and modify XPage Control attributes like styleClass. Best part - application of Theme overwrites can be conditional via the JavaScript Expression Language!!!

Okay... this might still be a little fuzzy. Let's go with an example:

Let's say we wanted to state that all Computed Field Objects in our XPage will have the styleClass (which renders as the class attribute in the web browser client) set to "computed".

Your Theme code entry might look something like this:

<control target="xsp" override="true">
 <name>Text.ComputedField</name>
 <property mode='override'>
  <name>styleClass</name>
  <value>computed</value>
 </property>
</control>

This will take a Computed Field and force the styleClass to "computed". When rendered, the XHTML markup sent to the browser will have a SPAN element with it's class set to "computed"!

Some of you might be wondering where I came up with the XPage Control name Text.ComputedField. Well, outside of the Domino Designer in Eclipse Help Contents (which can be a pain for those used to the Domino Help files), a complete list of XPage Control objects is located on your system!

The wedstandard.theme Theme - which can be found in your <Lotus Notes Client Installation Directory>\xsp\nsf\themes Directory - contains a complete list of all XPage Control objects. Simply open this file with your preferred XML editor or create a copy of this file and rename the copy's extension to either xml or txt.

So go through the webstandard.theme and start using Themes - the application of controlled usage via the JavaScript Expressions language and the ability to define cross-Control ThemeIDs may finally be that perfect marriage of RAD Web Development + Complete Control that a lot of us have been begging for (or hacking around) for years now!