dominoGuru.com
Your Development & Design Resource
Dynamic Tabbed Layouts using HTML, CSS, and JavaScript for XPage IBM Lotus Domino App UI Development
09/29/2010 03:33 PM by Chris Toohey
Taking my dynamic tabbed layouts from Traditional to XPages leveraging the IBM OneUI Theme, this article showcases the combination of XPage markup with HTML, CSS, and JavaScript to deliver a fluid UI and intuitive UX design for XPage-based HTML Forms.
The first step is to have your XPage app use the IBM OneUI Theme. To do this, as well as ready the app for our extension of the OneUI Theme, I'll create a simple Theme named oneui_extended:
<theme extends="oneui">
<resource>
<content-type>text/css</content-type>
<href>main.css</href>
</resource>
</theme>
This Theme simply leverages all of the OneUI goodness while additionally loading my main.css CSS Stylesheet as a resource for the XPage. We can use this theme to customize the classNames for any of our to-be-rendered Controls... but we won't be doing that in this article.
To use this Theme, simply modify the Application Properties (from the XPages Tab):
The main.css Stylesheet is included in the download, so I'll skip the creation of that particular resource...
As I mentioned in the previous article, I use the The Ultimate
GetElementsByClassName JavaScript Library, which I've copied into my own
main.js (which houses my settab()
function).
I then create an XPage named index.xsp -- which will act as the Default Launch Object for both the Lotus Notes and Web Browser Clients -- and add the following XPage markup via the Source pane:
<?xml version="1.0" encoding="UTF-8"?>
<xp:view xmlns:xp="http://www.ibm.com/xsp/core"
pageTitle="#{javascript:return
database.getTitle();}"
xmlns:xc="http://www.ibm.com/xsp/custom">
<xp:this.resources>
<xp:script src="/main.js" clientSide="true"></xp:script>
</xp:this.resources>
<div id="lotusFrame">
<div id="lotusBanner"></div>
<div id="lotusTitleBar">
<div class="lotusRightCorner">
<div class="lotusInner">
<h1>
<xp:text
escape="false"
id="dbTitle">
<xp:this.value><![CDATA[#{javascript:return
database.getTitle();}]]></xp:this.value>
</xp:text>
</h1>
<div id="container_search">
<xc:ccSearch></xc:ccSearch>
</div>
<span class="clear"></span>
</div>
</div>
</div>
<div id="lotusPlaceBar">
<xc:ccTabs></xc:ccTabs>
</div>
<div id="lotusMain">
<div id="lotusColLeft">
<ul class="tabs" id="formtabs">
<li>
<a href="#tab1" id="tab1" class="tab_active"
onclick="settab(this, document.getElementById('formtabs'),
document.getElementById('container_formcontent'));">
Tab 1
</a>
</li>
<li>
<a href="#tab2" id="tab2"
onclick="settab(this, document.getElementById('formtabs'),
document.getElementById('container_formcontent'));">
Tab 2
</a>
</li>
<li>
<a href="#tab3" id="tab3"
onclick="settab(this, document.getElementById('formtabs'),
document.getElementById('container_formcontent'));">
Tab 3
</a>
</li>
</ul>
<span class="clear"></span>
</div>
<div id="lotusContent">
<div id="container_formcontent">
<div id="container_tab1" class="container">
Tab 1 Content
</div>
<div id="container_tab2" class="container">
Tab 2 Content
</div>
<div id="container_tab3" class="container">
Tab 3 Content
</div>
<div class="actionbar">
<xp:button
value="Save
Changes"
id="submitform">
<xp:eventHandler event="onclick"
submit="true" refreshMode="complete"
immediate="false"
save="true">
</xp:eventHandler>
</xp:button>
</div>
<span class="clear"></span>
</div>
</div>
<script>
if (window.location.hash) {
settab(document.getElementById(window.location.hash.split('#')[1]),documen
t.getElementById('formtabs'),
document.getElementById('container_formcontent'));
} else {
settab(document.getElementById('tab1'),document.getElementById('formtabs')
,
document.getElementById('container_formcontent'));
}
</script>
</div>
<div id="lotusfooter">
<div id="lotusFooter" class="lotusFooter">
</div>
</div>
</div>
<xp:this.navigationRules>
<xp:navigationRule outcome="xsp-failure"
viewId="/index.xsp"></xp:navigationRule>
</xp:this.navigationRules>
</xp:view>
The result?
The tabbed navigation triggers are located in the OneUI's
lotusColLeft
while the tabbed layouts/containers are located in
the OneUI's lotusContent
. Like my traditional example,
this also honors hashtag/anchors for navigating across the various tabs on the
HTML Form.
You can now add labels, fields, and other controls to your XPage and leverage this simple but quite effective design shell.
Download
OneUI-based Tabbed Layout Example - Download
This application design works in both the IBM Lotus Notes Client as well as the Web Browser Client (tested on Lotus Notes 8.5.1, 8.5.2, Google Chrome, and Mozilla Firefox). If it helps you quickly ramp-up your XPages UI development, feel free to use it for your applications. If it really helps, track down one of the various donate links on this site or -- better yet -- tell a friend.