Quick UI trick for XPages
Category xpages
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.
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.
Comments