The qooxdoo Virtual List Widget's Most Impressive Features | 4

Adding Icons

Qooxdoo's unique Atom widget combines an image with a label and allows some alignment options for them. The Atom supports shrinking of the label, while keeping the image intact. Here's some code that adds folder icons to the items:

Notice that every fourth icon is made larger by testing the item number in the rawData array's icon property. The set() method can be applied directly to the List constructor. In the iconOptions property, the converter() method is overridden to return the correct icon path. The data argument would contain the icon's size, which corresponds to the appropriate folder.

Here is the same list as above, with icons added:

Figure 2: qooxdoo list with icons

Sorting the List Items

The list's behavior, including filtering, sorting and grouping, is configured by implementing the qx.ui.list.core.IListDelegate interface. Objects that are used as delegates for the qx.ui.list.List may implement any of the methods of this interface; they do not need to implement all the methods because the qx.ui.list.List provides a default implementation if a method is not implemented.

One of the IListDelegate interface methods is sorter(var a, var b). It gives the user the opportunity to sort the model. The sorting method should return a negative value if a < b, zero if a = b, or a positive value if a > b:

Selection Options

The list class's selectionMode property sets the selection mode to use. The accepted values are "single", "multi", "additive", and "one". The default value is "single."

single: One or no element is selected
multi: Multiple items can be selected; Also allows empty selections
additive: Easy Web-2.0 selection mode; Allows multiple selections without modifier keys
one: If possible, always exactly one item is selected

In addition to the above selection options, qooxdoo offers two more:

The quickSelection property enables quick selection, where no click is needed to change the selection. In other words, hovering over the item is enough to select it. It's possible only for the modes single and one. The default value is false.

The dragSelection property enables drag selection, which is the selection of multiple items through dragging the mouse in a pressed state. It's possible only for the selection modes multi and additive. The default value is false.

Each property is managed via its associated getter, setter, isXXX, and resetXXX methods:

Event Handling

In qooxdoo, the same methods and events apply for single and multiple selections. To do that, both single and multiple selections must work with arrays. The upside of this minor inconvenience is that it allows you to change widgets without having to worry about the selection method, because the method and event names don't change.

You can attach the listener directly to the getSelection() method so that it will have access to the Event's data. From there, you have to call getItem(0) to get the first item for a single item selection:

Grouping

Besides sorting, another use for delegates is to create item groups. The group() function defines and returns the grouping criteria as shown in the following code:

The group headers are displayed as "greyed-out" (disabled) items:

Figure 4: qooxdoo list with grouping

Conclusion

For developers who are familiar with the Java programming language, qooxdoo's Virtual List widget offers a lot of possibilities for presenting large data sets to the end user. Its flexible handling of data stores using JSON marshalling and visual appeal sets it apart from many other JavaScript libraries. For more information about qooxdoo's Virtual List, take a look at the references below.

References

Have a suggestion for an article topic? Do you have a product or service that you'd like reviewed? Email it to Rob .

resides in Ottawa, Canada, and is the founder of GravelleConsulting.com. Rob has built systems for Intelligence-related organizations such as Canada Border Services, CSIS as well as for numerous commercial businesses. Rob to receive a free estimate on your software project. Should you hire Rob and his firm, you'll receive 15% off for mentioning that you heard about it here!

In his spare time, Rob has become an accomplished guitar player, and has released several CDs. His former band, Ivory Knight, was rated as one Canada's top hard rock and metal groups by Brave Words magazine (issue #92).

Rob uses and recommends MochaHost, which provides Web Hosting at $3.10 per month, 2 LifeTime Free Domains, and 6 Months Free!

Original: January 5, 2010

[prev]