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
- 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.
<?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