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

It was almost two years ago to the day that I featured qooxdoo in my Popular JavaScript Frameworks series. The makers of qooxdoo built their framework around object-oriented JavaScript, while minimizing the use of HTML, CSS and the DOM. The qooxdoo library classes are fully based on namespaces and don't extend native JavaScript types, thus cutting down on global variables. Qooxdoo also offers a full set of widgets that are close approximations to those found in desktop applications, including labels, images, buttons, text fields, popups, tooltips and something you might not have seen before called an atom, which is a combination of an image and a label.

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.

The qooxdoo framework provides a set of basic components, from which many other virtual widgets can be derived. The core of this framework is the virtual scroll pane. The pane contains a set of layers, which contribute different parts of the rendered view. Using the virtual infrastructure has considerable advantages when there is a huge amount of model items to render, because the virtual infrastructure creates widgets only for visible items and reuses them. This saves both creation time and memory.

Data Binding

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:

// create the model var model = new qx.data.Array(["a", "b", "c", "d", "e"]); // create a list widget var list = new qx.ui.form.List(); // create the controller var listController = new qx.data.controller.List(model, 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:

{ "persons": [ { "lastname": "Weidner", "firstname": "Ludwig" }, { "lastname": "Mengel", "firstname": "Sonnhard" }, { "lastname": "Rehbein", "firstname": "Margarita" }, { "lastname": "Sänger", "firstname": "Mareike" }, { "lastname": "Warnke", "firstname": "Rigbert" }, ...

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:

var url = "json/data.json"; var store = new qx.data.store.Json(url); store.getModel();

Another option is to use the marshaller to parse string data into a model:

var rawData = []; for (var i = 0; i

A Simple Virtual List

To create a List widget, you just need to instanciate a new instance with the model:

//create the model data var rawData = []; for (var i = 0; i

The above code would produce the following:

Figure 1: Simple qooxdoo virtual list

Find a programming school near you

Zip Code:

Subject: - Select All Subjects - Computer Applications Computer Engineering Computer Science Computer Prog. - Software Dev. Computer Game Programming Web Design Web Development Internet Systems Internet Certification Database Design and Development Information Systems Management Information Technology Project Management Network Design - Development Systems Analyst

Degree: - Select All Degrees - Associate's Bachelor's Master's Doctoral Certificates Diplomas Coursework MBA

Online Campus Both