First XPages site addressing user interface design
TwitterFacebookGoogleLinkedInEmail

XPages meets Twitter Bootstrap with Downloadable Template

Bootstrap has gained popularity and it just makes perfect sense when you need to support multiple devices.  How do we use Twitter Bootstrap in XPages?  I built a template where you never ever have to remember how to set up Bootstrap in your NSF.  When you begin a development project, the template you start with should be bootstrapped already and your job is to assign the appropriate CSS Classes to the XPages core controls.  Never worry about forgetting to add a custom control to your page to enable bootstrap or copy and pasting between pages/controls.  Download this template, then go to Bootstraps website and copy and paste any sample code into the template and preview it.  It magically renders and your markup stays clean.

Download the NSF with Twitter Bootstrap  xpagesbootstrap also available on OpenNTF.org

Benefits:

  • Easily compare different designs using the XSP Theme Properties to switch between bootstrap and other design frameworks.
  • You do not have to remember how to setup Twitter Bootstrap.
  • Easily test different versions of Bootstrap and JQuery with easy rollback using XSP Theme Property settings.
  • Developers do not have to remember to add custom controls.  Developers can now focus on learning the classes and not be mind boggled about architecture.
  • XPages markup is a lot cleaner with less artifacts.
  • In theory, should be quicker server side because there is less the server needs to process in the XSP when converting the page into Java Classes.

If you have an existing application.  These are the steps you would take to add Bootstrap to your application.

First step is to understand how the bootstraps directory structure fits into the NSF as it relates to XPages to build this template.

WebContent is where all Java Web Servers start working.  WebContent folder data is accessible through the web server except the WEB-INF folder.  You will build this directory structure in your XPages application using Domino Designers Navigator view.  Download JQuery and Bootstrap to your computer so you could use Domino Designer to import the files and folders into your NSF.

Download bootstrap

Download jquery

WebContent/
  ├── WEB-INF/
  ├── bootstrap/
  │  ├── css/
  │  │    ├── bootstrap.css
  │  │    └── bootstrap.min.css
  │  ├── js/ 
  │  │    ├── bootstrap.js
  │  │    └── bootstrap.min.js
  │  └── img/
  │      ├── glyphicons-halflings.png
  │      └── glyphicons-halflings-white.png
  └── jquery.js

Step 1: When you have Domino Designer open, open the Eclipse Navigator View.  Window -> Show Eclipse Views -> Navigator.
Step 2: Expand your application in the Navigator window and locate the WebContent folder.
Step 3: Right click on it and choose import.  The import dialog appears.  Choose General -> File System then click Next.  Select your parent directory and you will have check boxes to choose which folders you want to import.  Choose bootstrap/ and jquery.js.
NOTE: If you make a mistake, you can move files and folders around in the Navigator View with designer.

Once all your files are in.  Your ready to use Twitter Bootstrap and JQuery.

Here is a sample XPage:
<?xml version="1.0" encoding="UTF-8"?>
<xp:view xmlns:xp="http://www.ibm.com/xsp/core"
    pageTitle="Dynamic Bootstrap with XPages">
    <xp:this.resources>
        <xp:metaData name="viewport"
            content="width=device-width, initial-scale=1.0">
        </xp:metaData>
        <xp:linkResource href="css/bootstrap.min.css" type="text/css" rel="stylesheet" media="screen"></xp:linkResource>
    </xp:this.resources>
    <h1>Hello World</h1>
    <script src="jquery.js"></script>
    <script src="bootstrap/js/bootstrap.min.js"></script>
</xp:view>

As a rule of thumb, you'll want to load your script at the bottom of the page.  This makes your application load faster.  Read this article on performance to learn more.
Keep in mind, when your using an Extension Library Dynamic Content Control, it doesn't load page resources on refresh if the resource is defined in the dynamic content, so that is another reason to load the library at the highest page level... ignore this statement if IBM has resolved this issue since the post.

Using Themes
You can take this further, if you choose Twitter Bootstrap for your applications design then most likely you will want less setup time by dragging and dropping controls and polluting your XPages markup.  Instead use themes.
You can create bootstrapRed, bootstrapMetal, bootstrapEaster as examples.

bootstrapTheme

Step 4: Create a Theme.  Paste this markup in it and save it as bootstrap.

    <resource>
        <content-type>text/css</content-type>
        <href>bootstrap/css/bootstrap.min.css</href>
        <media>screen</media>
    </resource>

    <resource>
         <content-type>application/x-javascript</content-type>
         <href>jquery.js</href>
    </resource>

    <resource>
         <content-type>application/x-javascript</content-type>
         <href>bootstrap/js/bootstrap.min.js</href>
    </resource>

    <resources>
        <metaData>
            <name>viewport</name>
            <content>width=device-width, initial-scale=1.0</content>
        </metaData>
    </resources>

Step 5: Create a XPage (notice how clean the markup is with less information)
<?xml version="1.0" encoding="UTF-8"?>
<xp:view xmlns:xp="http://www.ibm.com/xsp/core" pageTitle="Dynamic Bootstrap with XPages Beast">
<!-- copy and paste any bootstrap demo code and it just works -->
    <div class="btn-group">
       <button class="btn btn-mini">Action</button>
       <button class="btn btn-mini dropdown-toggle" data-toggle="dropdown">
             <span class="caret"></span>
       </button>
       <ul class="dropdown-menu">
             <!-- dropdown menu links -->
       </ul>
    </div>
</xp:view>
Step 6: Finaly, change "Application Theme" in XSP Properties in IBM Notes 9 or Application Properties in earlier releases using Domino Designer.  Preview your page.

Download the template and your ready to use Twitter Bootstrap. Now its time to learn the CSS boostrap classes 

Also available on OpenNTF.org