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

Dynamic Tabbed Layouts using HTML, CSS, and JavaScript for XPage IBM
Lotus Domino App UI Development 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):

XPage Properties - Enabling the 'oneui_extended' Theme

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?

OneUI-based Tabbed Layout Example - UI Preview

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.

About the author: Chris Toohey

Thought Leadership, Web & Mobile Application Development, Solutions Integration, Technical Writing & Mentoring

A published developer and webmaster of dominoGuru.com, Chris Toohey specializes in platform application development, solutions integration, and evangelism of platform capabilities and best practices.