Creating Twitter Bootstrap Widgets - Part II - Let's Assemble
Creating Twitter Bootstrap Widgets - Part IIIA - Using Dojo To Bring It Together
Twitter Bootstrap currently is the most popular open source responsive CSS framework. If you are using Bootstrap strictly as a responsive framework, you are missing out. It is also a great framework for creating UI widgets and UI components. Bootstrap normally comes with JQuery plug-ins widgets like buttons, inputs, and drop-down menus. You can use these plugins as a basis in creating more complexity widgets.
In this five part series, I will walk you through the process of creating a Bootstrap widget by first understanding how Bootstrap widgets are structured, how to layout a widget, tie it together using Dojo, turn it into a responsive widget, and how to create it as a XPages custom control for you XPagers out there. There are three prerequisites to continue, you need to have a good understanding of CSS especially CSS3, you need to know Dojo, and have created Dojo classes using dojo.declare. We will be using Dojo 1.52 and if I have time Dojo 1.83 AMD.
Many developers like JQuery since it simple to understand and use. However for our complex projects, Dojo is a better option especially when most of our iPhora Framework currently uses Dojo 1.52. When I looked into creating Bootstrap widgets, my goal was to replace the Dojo Dijits will a simpler and lighter weight widget architecture. I had already created my own widget architecture but I was having issues in maintaining it. By using the Bootstrap CSS and widget architecture, I now not only have a simpler widget architecture, but I also can create widgets that are responsive to changing screen size.
These components are combinations of standard HTML elements or groups of standard HTML elements that is assembled together and styled as a component using the Bootstrap CSS. Dojo Dijit also does this, but not to the extent as Bootstrap widgets. Dojo Dijit whom are used in XPages mostly restyles a standard HTML element using the Dijit themes. Bootstrap rely heavily on wrapper div and span elements to generate the visual layout of a widget. By combining these four types you can create any types of widgets ranging from listboxes, drop-down menu to complex visual grids. The goal of this tutorial is to walk you through the process of creating a Bootstrap combo box using bootstrap components and tie it all together using Dojo. In our tutorial, we will be creating a combo box. Bootstrap does come with a combo box, but in my opinion it is very ugly as shown in the image below.
So I decided to use basic bootstrap components to create a much more stylish combo box to my liking as shown.
So lets start. A typical INPUT element looks like:
However, with a bit of style of CSS from Bootstrap, the INPUT element now looks much nicer.
But with Bootstrap we can further enhance the INPUT tag by adding wrapper HTML elements to improve the visual aspect of the INPUT element or any type of standard HTML elements. For example:
Visually is better to append it to the front of the input tag for an email address input field. We add an icon by adding an i tag with a class of "icon-envelope" instead of a character. Bootstrap comes with a variety of icons through the Glyphicons that are included as part of the Bootstrap assets. There is a number of other open source icons that are available including FontAwesome http://fortawesome.github.io/Font-Awesome/.
The class "input-prepend" tells the browser that the visual queue will be in front of the input tag. Beside characters and icons we can also include buttons that have characters or icons. So lets append a button with caret to the input as it would be in a combo box.
By adding a span tag with the class "caret" we now have a drop-down caret in the button. We could have had added an icon using the i tag also. So now we have what looks like a combo box However, we do not have a drop-down to make a selection. So we have to create the drop-down list. We could use standard select tag but that would not be consistent and it would not look very good. We can create the drop-down by using the core Bootstrap list component that you can use to create listboxes, navigators, drop-down objects and etc. So next time, we will talk about the anatomy of the basic bootstrap list component and add it to our combo box widget to create the drop-down portion of our combo box and follow up later with a bit of Dojo to create our widget.