The XPages Blog

When writing sample XPage applications I tend to use the oneUI theme that is distributed as part of the IBM Lotus Domino server, the main reason being that it can make the sample applications look good while reducing the size of the NSF file.

When it comes to creating your own internal applications you may not want to use oneUI as it contains a LOT of CSS that you may never even use so that will mean you need to build your own style sheets that will include layout stylings, font settings and color schemes. Fortunately you don't need to start from scratch, there are a couple of CSS frameworks that work well with XPages and it's very easy to create a theme document for them.

The main CSS Frameworks that I have been looking at are Blueprint ( Modified MIT License & GPL License ) and Tripoli ( GPL License ) and a merging of the two, plus some bits from a few others, called BlueTrip ( GPL License ). When selecting a CSS framework one of the important things to look at is if it uses ID's to apply it's styles or if it uses classes. As XPages dynamically changes the ID's of elements rendered to a web browser you will need to use a CSS Framework that only deals with classes. You can quickly determine this by opening the CSS file and if you see any #'s at the start of a style definition then you know it's using ID's so avoid that particular CSS framework for use in XPage applications. So far I have found that the YahooUI ( BSD Licensed ) uses some ID's for layout controls so it it probably a bad choice.

Once you have picked the CSS Framework that you want to work with adding it to your application is very easy. In your Domino Designer client got the Resources -> Style sheets section in your NSF file and import the CSS files that are part of the framework. In Blueprint these consist of screen.css, print.css and ie.css. The main file, screen.css, will reset the browsers css to basic settings so that all browsers start with the same defaults, it then contains settings for standard elements like check boxes, input fields, buttons and fonts so that these elements will appear the same across any browser and lastly it contains a grid layout system that you can read about on the Blueprint website. This grid system is where a framework like blueprint will save you a lot of time.

The other two files are not necessarily needed, ie.css contains special css hacks so that some of the framework will work in Internet Explorer 6, if your not planning on supporting that browser then you should just leave it out entirely. print.css contains special css definitions that are only applied if a web page is printed. Currently in Xpages there is no way to specify the media type for a CSS file that is added either as a resource on the XPage or via a theme so it is probably best to leave this file out also but if you don't mind editing the css file you can wrap the css in an '@Media print{}' rule to work around this current limitation. Your theme document will look something like this when finished :

<theme>

<resource>
<content-type>text/css</content-type>
<href>/screen.css</href>
</resource>

<resource>
<content-type>text/css</content-type>
<href>/print.css</href>
</resource>

<resource rendered="#{javascript:context.getUserAgent().isIE(0,6) == true}">
<content-type>text/css</content-type>
<href>/ie.css</href>
</resource>

<resource>
<content-type>text/css</content-type>
<href>/application.css</href>
</resource>

</theme>

The extra theme reference to application.css would be your own custom css resource where you will add in all your own layout and color schemes for the application. As you can also see I am using the rendered= method to make sure the css for Internet Explorer 6 does not get sent to Firefox or other web browsers.

Using a CSS framework can help you cut down on some of the more basic parts of building your XPages web application. If your not interested in using the grids portion of blueprint then even it's reset and standardization sections will ensure that all browsers start on a level playing field.