Skip to main content

Creating Twitter Bootstrap Widgets - Part II - Let's Assemble


Creating Twitter Bootstrap Widgets - Part I - Anatomy of a Widget
Creating Twitter Bootstrap Widgets - Part II - Let's Assemble
Creating Twitter Bootstrap Widgets - Part IIIA - Using Dojo To Bring It Together

This is two part of my five part series "Creating Twitter Bootstrap Widgets".   As I mentioned in part one of this series, Twitter Bootstrap widgets are built from a collection standard HTML elements, styled, and programmed to function as a single unit. The goal of this series is to teach you how to create a Bootstrap widget that utilizes the Bootstrap CSS and Dojo. The use of Dojo with Bootstrap is very limited with the exception of Kevin Armstrong who did an incredible job with his Dojo Bootstrap, http://dojobootstrap.com.

Our example is a combo box that we are building to replace the standard Bootstrap combo box. In part one, we built a widget that looks like a combo box but did not have a drop down menu associated with it to allow the user to make a selection.





In part two, we will create the drop down list associated with the combo box using the Bootstrap list component which is actually a collection of many standard HTML elements. However, before you create the drop down for our combo box, let's take a look at Bootstrap list component.  Show below are five Bootstrap widgets that you as a developer should be familiar with: listbox, navigator, menu, tab, and pagination.


What does these five widgets have in common? They all are made of the same collection of HTML components. They are A tag wrapped within a LI tag inside a DIV UL tag combination.













Without the Bootstrap CSS, this HTML element collection will get you this:











Not very appealing.  And this is the power of Bootstrap.  By using a combination of standard Bootstrap CSS classes, you can make a HTML element combination to represent a tab, navigator, or menu.

For our dropdown list all we have to do is add the class "dropdown" to the DIV wrapper tag and "dropdown-menu" to the UL wrapper and you will get a drop down menu which we will use in our combo box.













One important thing is the class "active". The way that Bootstrap CSS is structured, this class can be used to define the selected tab, menu item or in the case of a navigator, a selected panel. You can continuously use the same structure to build widgets.  Later I will show you that this will greatly benefit us when we connect the widget together using Dojo.

As with the input field that we discussed previously, we can append icons before or after the text. For example, to add an icon to a menu item all you have to do place an I tag with an icon class before the text in the menu.  Here we have added the icon-wrench icon before the text "Settings".










Tip: To create a blank icon to align the text in the menu use the class "icon-".

Bootstrap CSS also automatically handles the reversal of the icon when your mouse highlights over the menu item.  No programming at all.


We now can add the our dropdown menu to our combo box shell and get the structure of our combo box.



















Couple of comments here. By having the "dropdown" class in the primary div wrapper, the dropdown menu will automatically align below the input field.  The "span3" class is applied to both the input and ul tag so that they will be the same width.  In addition, the "span3" class normally applies a margin-left of 30px so we need to add the margin-left:0px style inline to remove that for the ul element. To expand the dropdown list to also beneath the button we will need to use a bit of JavaScript or define another class of span3_30 that is 30 pixels longer than span3.  If this is a responsive fluid layout, you will need to resize it using JavaScript and in general that is what I do. Or you can leave it as is.

So far we have not done anything with JavaScript at all and only relied on the Bootstrap CSS to assemble our widget. Bootstrap is just so amazing. Next time in Part III, we will use Dojo and dojo.declare to program our widget and make it functional.  We will also discuss how the structure of Bootstrap components lends itself well to Dojo and object oriented classes.

Note: If you want to try this, make sure you add a .dropdown-menu { display:block;} into head/style tag to override the Bootstrap CSS so that you can see the dropdown menu. If not, it is always hidden.

Comments

Popular posts from this blog

The iPhora Journey - Part 8 - Flow-based Programming

After my last post in this series -- way back in September 2022, several things happened that prevented any further installments. First came CollabSphere 2022 and then CollabSphere 2023, and organizing international conferences can easily consume all of one's spare time. Throughout this same time period, our product development efforts continued at full speed and are just now coming to fruition, which means it is finally time to continue our blog series. So let's get started... As developers, most of us create applications through the conscious act of programming, either procedural, as many of us old-timers grew up with, or object-oriented, which we grudgingly had to admit was better. This is true whether we are using Java, LotusScript, C++ or Rust on Domino. (By the way, does anyone remember Pascal? When I was in school, I remember being told it was the language of the future, but for some reason it didn't seem to survive past the MTV era).  But in the last decade, there a

The iPhora Journey - Part 3 - Creating an Integrated UI Framework

The iPhora Journey - Part 1 - Reimagining Domino The iPhora Journey - Part 2 - Domino, the Little Engine that Could The iPhora Journey - Part 3 - Creating an Integrated UI Framework There are many ways to create the user interface (UI) for a web application. The HTML page could be created on the server and then pushed out. It could be static with the data generated on the page by the server with JavaScript, providing a more dynamic experience, or the server could generate new HTML content to update portions of the web page. XPages or PHP are good examples of this. Another method is to have the web page partially generated by the server and have JavaScript build the rest of the HTML by pulling data from the server via an API. This is the approach used in the Single Page Application (SPA) model. In all cases, it is still dependent on the web server technology being using.  As mentioned previously in this blog, XPages is dependent on complete integration between form and document, which e