Personal tools
Mixing Lotus Domino and Twitter together - a way for mobile approach

"Mobilize" your Lotus Domino

Nov 28, 2012

Mixing Lotus Domino and Twitter together - a way for mobile approach

What if you want to create different layouts for different devices in Lotus Domino? This is a way to make this possible, for example using Twitter Bootstrap

It's always more important to develop applications that are accessible from any device so we wondered what it takes to adapt an application, perhaps already developed, to ensure this possibility. In this case, Twitter provides its layout via Twitter Bootstrap, so it was decided to integrate it.

Twitter Bootstrap requires the HTML 5 doctype as you can see in the documentation.
Since version 8.5.3 Lotus Domino allows to define, for the XPages, this kind of doctype, in this way:

doctype

Next step: we imported the resources you need to Twitter Bootstrap within the Domino project:

resources

And finally, we have created an XPages with the following source code:

<?xml version="1.0" encoding="UTF-8"?>
<xp:view xmlns:xp="http://www.ibm.com/xsp/core">
    <xp:this.resources>
       <xp:styleSheet href="bootstrap.css"></xp:styleSheet>
       <xp:styleSheet href="bootstrap-responsive.css"></xp:styleSheet>
       <xp:metaData name="viewport" content="width=device-width, initial-scale=1.0">
       </xp:metaData>
    </xp:this.resources>
    <!-- NAVIGATION BAR -->
    <br/><br/>
  <xp:panel styleClass="navbar navbar-inverse navbar-fixed-top">
    <xp:panel styleClass="navbar-inner">
    <xp:panel styleClass="container">
    <xp:panel styleClass="row">
    <xp:panel styleClass="span4">
      <xp:label id="label1">
        <xp:this.value><![CDATA[#{javascript:"Welcome " + @Name("[CN]",@UserName())}]]></xp:this.value>
      </xp:label>
    </xp:panel>
    <xp:panel styleClass="span6">
      <ul class="nav nav-pills">
       <li class="dropdown">
         <a class="dropdown-toggle" data-toggle="dropdown" href="#">
           <i class="icon-white icon-file"></i> Dropdown <b class="caret"></b>
         </a>
         <ul class="dropdown-menu">
           <li><a tabindex="-1" href="#">Action</a></li>
           <li><a tabindex="-1" href="#">Another action</a></li>
           <li><a tabindex="-1" href="#">Something else here</a></li>
           <li class="divider"></li>
           <li><a tabindex="-1" href="#">Separated link</a></li>
         </ul>
      </li>
     </ul>
    </xp:panel>
    <xp:panel styleClass="span2">
      <xp:label value="Logout" id="label3"></xp:label>
    </xp:panel>
   </xp:panel>
  </xp:panel>
 </xp:panel>
 </xp:panel>
 <!-- APPLICATION LAYOUT -->
 <xp:panel styleClass="subhead">
   <xp:panel styleClass="container">
     <xp:panel styleClass="row">
       <xp:panel styleClass="span4">
        <ul class="nav nav-list sidebar-nav-fixed">
          <li class="nav-header">List header</li>
          <li class="active"><a href="#"><i class="icon-white icon-home"></i>Home</a>
          </li>
          <li><a href="#"><i class="icon-book"></i>Library</a></li>
          <li><a href="#"><i class="icon-pencil"></i>Applications</a></li>
          <li class="nav-header">Another list header</li>
          <li><a href="#"><i class="icon-user"></i>Profile</a></li>
          <li><a href="#"><i class="icon-cog"></i>Settings</a></li>
          <li class="divider"></li>
          <li><a href="#"><i class="icon-flag"></i>Help</a></li>
        </ul>
       </xp:panel><br/>
       <xp:panel styleClass="span8">
         <xp:table>
           <xp:tr>
            <xp:td><xp:label value="First Name" id="label2"></xp:label></xp:td>
            <xp:td><xp:inputText id="inputText1"></xp:inputText></xp:td>
           </xp:tr>
           <xp:tr>
            <xp:td><xp:label value="Last Name" id="label4"></xp:label></xp:td>
            <xp:td><xp:inputText id="inputText2"></xp:inputText></xp:td>
           </xp:tr>
           <xp:tr>
            <xp:td><xp:label value="Address" id="label5"></xp:label></xp:td>
            <xp:td><xp:inputTextarea id="inputTextarea1"></xp:inputTextarea></xp:td>
           </xp:tr>
           <xp:tr>
            <xp:td><xp:label value="Phone" id="label6"></xp:label></xp:td>
            <xp:td><xp:inputText id="inputText3"></xp:inputText></xp:td>
           </xp:tr>
         </xp:table>
       </xp:panel>
      </xp:panel>
     </xp:panel>
    </xp:panel>
  <script type="text/javascript" src="js/jQuery-1.8.0.min.js" clientSide="true"></script>
  <script type="text/javascript" src="js/bootstrap.js" clientSide="true"></script>
</xp:view>


This is what you get on the page number from the web:preview
Of course, nothing prevents you from using any other responsive layout: Twitter is only one of the choices!

Filed under: , , ,
comments powered by Disqus