My personal stuff and my interest in Business Processes Management, Collaboration Methodologies and Technologies, Data Security and User Experience.
Technologies that I currently focus on are Dojo, iPhora Foundation/Touch, Linux, NOSQL, and NodeJS.

Monday, May 20, 2013

Registration for MWLUG 2013 is now opened. We have expanded MWLUG 2013 to almost three full days this year with events starting on Wednesday morning. We will have three special events, two workshops plus the evening reception on Wednesday. As usually, we will have two full days of sessions on Thursday and Friday along with other events.

In addition, on Tuesday just before MWLUG, TLCC will be offering a XPages TackItOn session for attendees that are interesting XPages training.

We have some unique and fun surprises installed this year. I am always thinking of interesting events. So look forward to announcements coming in the next few weeks as we get closer to MWLUG 2013.

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.

Monday, May 13, 2013

This year MWLUG celebrates it 5th anniversary in providing our IBM community a first-class conference to network and share our knowledge in collaboration technology. This year, MWLUG will be held in the heart of downtown Indianapolis, Indiana at the Crowne Plaza Hotel - Union Station.

We invite you to submit your MWLUG 2013 presentation abstract(s) for an opportunity to speak at MWLUG 2013. MWLUG 2013 provides you as a speaker a unique opportunity to share your knowledge of collaboration technology with our vase IBM community.

Each year, we combine outstanding technical sessions with fun activities and networking events to help grow our vibrant community. As always our sessions include not only IBM related topics, but sessions on topics that helps you grow as an IT professional.

MWLUG 2013 will include over 40 technical sessions, workshops, and events. Topics for MWUG 2013 include:

Administration

Application Development

Best Practices and Customer Business Cases

Mobility and Web Security

Social Business

As a MWLUG speaker you are entitled to all the benefits of an attendee plus free admission and more.

As always at MWLUG, reserve about 25% of all speaking slots for new speakers. So whether you are a veteran speaker of Lotusphere, MWLUG, or never have presented at a major conference, here is your chance to speak and present your knowledge to our great IBM community.

Friday, May 10, 2013

Right after MWLUG 2012 last year, my son volunteered me to participate with him on his Science Olympiad quest. I figure it would not take too much time. As a kid, I was involved with Science Fair competition for many years. However, it seems things have changed. I discovered that I was volunteered for the Mission Possible competition. I was a bit surprised on the tasks that were required. So over the next five months I had to build a Rube Goldberg machine that had 10 to 13 tasks. In order to complete this machine, I would have had a machine shop at home. Everyone has a machine shop don't they. With no machine shop, I had to improvise with what tools I had. Many many nights were spent in 20 degrees or less weather milling, sanding, cutting, and grinding wood and metal to make this machine. Did I mentioned, that I do not have a heated garage nor is it attached.

So after many competitions and modifications we were successful in winning Gold in the Regional Competition. I am very proud that he won four Gold Medals in every competition he participated. Since my son was not a varsity member, Regionals was the end of this years competition. His school however is going to the Nationals. Unlike, our competitors whom had up to three electric motors to drive their machine, our machine relied only on potential and kinetic energy created by gravity.

As of this weekend, the machine is no longer functional since I needed the ball bearing to fix my bike.

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.

Widgets with Bootstrap takes significant advantage of HTML 5 and CSS3 allowing you to use it both for the desktop and mobile environments. The key to creating Bootstrap widgets is having a good understanding of the core and responsive versions of the Bootstrap CSS, bootstrap.css and bootstrap-responsive.css. It is extremely powerful and gives you tremendous flexibility while minimizing the amount of JavaScript code that you need to make the widget function within your application.

With the aid of the core Bootstrap CSS, you can create countless types of widgets without too much coding. The first step is to look at the structure of a Bootstrap widget. Bootstrap widgets can be divided into four core components just as any type of JavaScript widgets:

Input

Button

List

Display

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.

When you place you focus into the input field, it will automatically highlight, all without any JavaScript code.

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:

You get:

By adding the span tag with the class "add-on" with "%", the user visually understands the type of information that is expected. There is no validation of information, but by adding the span tag after the input tag within a div tag wrapper, the user now understands that they are expected to input a number. The class "span2" defines the width of the INPUT element which we will address when we talk about responsive widgets. Using JavaScript and Regexp we can create client validation. The wrapper class of "input-append" tell the browser that you want to append the visual queue after the input tag. You can add these visual queue in front or after the input. They can be characters like % or $, icons, or even buttons, Now lets expand on this widget by adding an icon instead of character. In this case, we want to let the user know that we are expecting them to input an email address.

You get:

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.

Always be Happy

About Me

I have been working with Notes and Domino since Notes 3. I have started three different companies after working as a consultant in a large firm including Phora Group, Taishan Works and ReCor. I promote the use of collaboration and business processing technologies.
I am the Past President of the GRANITE Lotus User Group here in Chicago and co-organizer of the Midwest Lotus User Group Conferences.
I focus on Business Process Management, UI Design, and Data Security. IBM Champion 2015, 2016, 2017