Blog

08May2014

One for the geeks : Enhanced DualListField of GXT – Usability mortar

Most of our blog posts thus far have been about construction, lean thinking, and project management. Lest we forget that the reason why we have the opportunity to go to all these places and learn about this industry is our flagship solution nPulse, I think it’s time someone from the development team got a voice on the blog :)

As a part of Nadhi’s development team, I have a great opportunity to learn and explore GWT and GXT, which are the primary technologies behind the nPulse™ UI.

GWT is an open source development toolkit for building and optimizing cross browser web applications. GXT uses GWT and takes it to next level by providing richness, high-performance built-in widgets, layouts, advanced charts and more. You can refer to some of the GXT samples here.

Any developer who has explored GXT components will stop for a while at DualListField, and take look before moving on, thanks to its uniqueness. DualListField is a GXT UI component which combines two lists of fields and allows selections to be moved between lists either using buttons or by dragging and dropping. In UI technologies that I’ve seen so far (such as Ext JS, jQuery, bootstrap etc.), if the need occurs to move selections between two lists, the developer has to start by building two independent list components and combine their behavior by adding custom buttons or by implementing DnD(Drag and Drop) handlers on both lists. In GXT, all of this process packaged into single component called DualListField (see below).

An example of a DualListField

Example usages of DualListField are :

  • Online shopping context – where, stock is on left and my cart is on right.
  • Authorization settings – where, available application modules on left and authorized modules on right.
  • Customized UI components – where, list of available fields on my left and what I want to see is on right etc..

As soon as I laid my hands on a DualListField component in a demo application, I then realized that it was one major missing functionality, which is having no support for double click. Come on GXT, why would I always go to a button to move my selection from my source list to target list! Isn’t it obvious, if I am poking an item by clicking twice in my source list means that I want to move it to my target list? It is to us, anyway ;)

The good thing is that we have a large number of native event handlers available in GWT (in the com.google.gwt.event.dom.client package) which can handle almost every movement of your input devices. We can make use of one of these event handlers called DoubleClickHandler to make our DualListField respond to double clicks.

Here’s how it is done..

// Create your dual list field

DualListField = new DualListField();

// Get source and target lists

this.sourceList = this.lists.getFromList();

this.targetList = this.lists.getToList();

// Add data store to source list, set labels and so on..

…..

//Finally, add double click handler to respond to double click events

this.from.getListView().addDomHandler(new DoubleClickHandler() {

@Override
public void onDoubleClick(DoubleClickEvent event) {
List sel = sourceList.getSelection();
if (sel != null && sel.isEmpty() == false){
for (D model : sel) {
sourceList.getStore().remove(model);
}
targetList.getStore().add(sel);
targetList.getListView().getSelectionModel().select(sel, false);
}
}
}, DoubleClickEvent.getType());

And there you go, our dual list component is enhanced to respond to double clicks and ready to test. You can try enhancing it further to move the selection back from target list to source list in similar lines.

Happy coding!

  • 8 May, 2014
  • santhoshc
  • 4 Comments

Share This Story

Categories

Comments

Satya Suman Saridae
An interesting observation I made here is jquery, bootstrap, Ext JS All of them are pure presentation frameworks. When building enterprise applications it is always ideal to couple these presentation frameworks with a javascript MV* framework, This will allow the much needed event, state support required for handling these kind of components. Did you look at the http://www.jqueryscript.net/demo/Responsive-jQuery-Dual-Select-Boxes-For-Bootstrap-Bootstrap-Dual-Listbox/, it gives a single list plugin for bootstrap.
santhoshc
Good to hear from you Satya. I disagree to certain extent when you mention Ext JS as a pure presentation framework. It is very rich in event, state support with object orientation. Its adoption in enterprises is also as good as your favorites backbone and angular JS MVC frameworks. http://www.infoq.com/research/top-javascript-mvc-frameworks.
Satya Suman Saridae
Take a look at the http://davidstutz.github.io/bootstrap-multiselect/
boutique hollister
Jiangs distraught grandmother is reported to have attempted suicide afterwards. [url=http://www.2ics.net/tune.asp?boutique-hollister/]boutique hollister[/url]

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>