Globocol Logo

Twitter Bootstrap and One UI

Posted by EddiePrentice on May 2, 2014

Having worked with IBM Domino Designer for many years the opportunity presented by XWorks Server and XPages to make our legacy business applications based on IBM Domino available on the web is hugely exciting - all the benefits of Domino (security, rapid application development, non-sql server) but now available without having to have an IBM Notes client installed.

Using the One UI theme which came with XPages, we can "style" our applications very quickly and easily without having to worry about writing our own CSS.  Along with the Extension Library, a set of "extra" controls developed for XPages, and in particular the Application Layout Control we are able to very quickly build working prototypes for clients.  The Application Layout Control is a brilliant building block which can be used as a screen layout template for any applications; other controls and content like navigators, footer links, views, forms, login/logout links and much more can simply be dragged and dropped into the Application layout control.  So what's not to like?  

No matter how good the functionality of your web application, if it looks unappealing, users will dislike it.  Good design is certainly about function, but form is as, if not more, important.  The One UI theme is not the most exciting UI we have ever seen and the latest incarnation v3.0.2 in my view has taken a backward step; it mirrors in many ways the standard UI which we now see on IBM web pages, but it's understated, minimalist black, gray, and white look and feel do nothing to enhance the application and delight the user. Having a theme we can apply to the application is great, but having a dull boring theme is not so good. Our organisation form rendered with v3.0.2 is shown below


David Leedy mentioned alternative themes in one of his early videos from his outstanding Notesin9 series but until recently the theme mentioned in most blog posts and XPages training was One UI.  Then last year I began to notice more and more mentions of  a new kid on the block - the Twitter Bootstrap framework.  Examples of web applications created using Bootstrap showed a bright modern design - if this design could be integrated with the functionality of Xpages then we would have a really good combination.  As well as the aesthetic appeal of the Bootstrap framework, there is also a major functional gain - Bootstrap offers responsive design so that your XPage code can be run on desktop, tablet or smartphone. 

There is an excellent XPages community resource for getting started using Bootstrap with XPages.  There is also a project on Open NTF called Bootstrap4Xpages which in theory allows existing One UI applications to be run with Bootstrap but we have not been able to test this as we are having problems with the installation.  Eventually, we came across Patrick Kwinten's "Using Bootstrap in XPages - the ultimate incomplete guide"  and followed that through.  I found that even a non-developer like me could follow it.  We also downloaded Oliver Busse's Bootstrap UI template kit which includes a bootstrap allication layout control. 

Using this template and Patrick's guide we now have "bootstrapped" our first application, and very good it looks too.  Our new company profile form is shown in Fig 2. The layout control is not as easy to use as the standard Application Layout control and we found that our forms work much better stripped of the Form Table Control in the Extension library which we had used for all our forms. There is much more we can do - a new date picker and the Select2 combo box are next on our list - but without a doubt this is a huge step forward in allowing us to design web applications with all the advantages of Domino as the foundation, XPages as the rapid application development tool and Bootstrap providing the bright, modern, web 2.0 user interface.

Contact Globocol