Yellow is the New Blog

If you follow Declan's blog, you already know that using the OneUI CSS template makes it even easier to rapidly give your XPages a pleasant user interface. Here's a quick tip for adding an interesting UI element to your pages that takes advantage of some of the OneUI behavior.

When you wrap any link in a span that has a style class of "lotusBtn", the link is rendered with a border and background graphic, so it looks like a button even though it's just a link. This is one approach for ensuring that an element intended to behave like a button (in other words, has an onClick event) will render similarly across all browsers. Since a section control, when rendered in a browser, is nothing more than just a link that uses client-side JavaScript to toggle the display of additional content, this allows us to render the section header such that it appears to be a button that, when clicked, displays the section contents. Since the entire section is wrapped in the "lotusBtn" span, which has a 1px border, the entire section has a border, but only the header has the background graphic... in other words, it looks like an inline dialog.

For example, if your XPage includes functionality for parsing RSS/Atom feeds and you want to allow the user to submit the URL of a feed they want to subscribe to, you might create a table for the URL field and corresponding label, and a button (or link styled as a button) for submitting the value. Here's how that would look if using this style technique.

Collapsed:

Expanded:

Note that in this case I'm using a custom image for both the expanded and collapsed state.

So the user clicks an element that looks like a button, which displays the additional detail inline instead of as a modal dialog or popup window. To enable this in your own XPage, select the section you want to render this way, switch to the Source tab and wrap the xp:section element in the following markup:

<xp:span styleClass="lotusBtn"><xp:section....</xp:section></xp:span>

One more quick customization to this technique: in addition to the "lotusBtn" class, you can add either "lotusBtnAction" or "lotusBtnSpecial". Instead of a silver background with blue text, the section header will have white text on a green background if using "lotusBtnAction", or blue if using "lotusBtnSpecial". So, for example, for a white-on-green button, the source would look like this:

<xp:span styleClass="lotusBtn lotusBtnAction"><xp:section....</xp:section></xp:span>

Click here to see an example of all three styles in action.