Exploring OneUI v2.1 in Domino 8.5.3

While exploring the new features of Domino 8.5.3 I found out that OneUI v2.1 is now installed automatically with the server. Since I’m using OneUI in a couple of applications I wanted to see what the differences are compared to version 2.0. My starting point was IBM’s Lotus OneUI documentation site, but the last documentation change was performed in 2009 (UPDATE 01/12/2011: the OneUI v2.1 documentation is now available). Although the structure of OneUI hasn’t changed, the examples on that site are all based on OneUI v2.0. A Google search also didn’t return much useful information so I decided to create a test page myself. This is what OneUI v2.1 looks like (change the color by clicking on one of the links in the top navigation bar). You might notice that I didn’t use the (new in 8.5.3) option to combine CSS/ JavaScript resources so you can check what stylesheets are loaded.

The biggest notable differences with the previous version are the black top bar (which more vendors seem to implement nowadays), the left column menu and redesigned sections. OneUI v2.1 also features a couple of new colors (see the demo page for all available options). Since OneUI v2.1 uses gradients in the top bars (using the -moz-linear-gradient CSS directive) the theme looks better in Firefox than in Internet Explorer 9.

To use OneUI v2.1 in your application you need to create a theme that extends oneuiv2.1. Doing so will take care of including the required basic stylesheets. A specific color can be loaded by adding two additional stylesheet per color: <color>Theme.css and dojoTheme.css, both from the domino/oneuiv2.1/<color>Theme/ folder. So if you want to use the orange stylesheet, you need to add this to your theme definition:

<resource>
<content-type>text/css</content-type>
<href>/.ibmxspres/domino/oneuiv2.1/orangeTheme/orangeTheme.css</href>
</resource>
<resource>
<content-type>text/css</content-type>
<href>/.ibmxspres/domino/oneuiv2.1/orangeTheme/dojoTheme.css</href>
</resource>

If you want to be able to make the color used configurable, you can do so be including these stylesheets conditionally. Using a sessionScope variable that would mean changing the <resource> tag to

<resource rendered="#{javascript:sessionScope.get('theme')=='orange'}">

Note that the demo also includes a Dojo tree using the (new in Dojo 1.5) Claro theme.

Thanks to the people over at ClearIT Consulting for hosting my demo page!

For all those interested: here’s the demo database.