One of the most exiting additions of qooxdoo's 1.3 release is the new Virtual List widget. It is especially adept at managing huge data sets, and it supports advanced features such as filtering, sorting, grouping, as well as custom renderers. In today's article, we'll be sampling some of the Virtual List's most impressive features.
The Virtual Infrastructure
The "Virtual" in Virtual List refers to the Virtual Infrastructure. Qooxdoo widgets are virtual in the sense that they create HTML markup only for the visible part of the data. The basic idea is to have a strict separation between rendering and interaction.
Data binding is a functionality that allows you to connect data from a source to a target. The entire topic can be divided into a low-level part, called "single value binding", and some higher-level concepts involving stores and controllers. The MWidgetController class handles the binding between the model and the widget. The kind of controller you need depends on the view component. Currently, there are three types of controllers available: Object Controller, List Controller, and Tree controller. The following code binds a simple array to a list:
Now every change in the model array will invoke a change in the list widget.
The JSON Store
As with Dojo, qooxdoo can also load data from a JSON-formatted text file:
The JSON store takes a URL, fetches the given data from that
URL, and converts the data to qooxdoo model instances using the JSON marshaller.
The qooxdoo model instances will be available in the model property after loading. For the loading
of the data, a
qx.io.remote.Request will be used in the store:
Another option is to use the marshaller to parse string data into a model:
A Simple Virtual List
To create a List widget, you just need to instanciate a new instance with the model:
The above code would produce the following: