Tuesday, March 19, 2024

A Developer Looks at the qooxdoo 1.4 JavaScript Framework

Back in 2008, I featured qooxdoo in my Popular JavaScript Frameworks series. At the time, it was a promising newcomer in a field dominated by established players like Prototype and script.aculo.us. A lot has changed in the JS library landscape since then. Some, such as JQuery, have grown in popularity, while others, such as Prototype, have been overshadowed by sleeker and flashier competitors. It turns out that qooxdoo was one of these!

Just a short time ago, I wrote an article on qooxdoo’s Virtual List, and its contribution to the realm of data binding and the challenges of handling of large data sets. Now, the makers of qooxdoo have continued to make strides in other areas of Web development and design with their newest release, version 1.4. I’d like to provide you with a rundown on a few of those innovations today.

Overview of qooxdoo

qooxdoo Version 1.4 was released in April of this year, around the same time as version 1.3. Whereas 1.3 was just an intermediary patch release to address bug fixes, version 1.4 not only includes many additional bug fixes, but also many new features and improvements.

qooxdoo Taps into Modern Browsers’ Capabilities

Theming

Many modern browsers allow the user to apply a theme (also referred to as a “skin”) to change the look and feel of the browser. Built into CSS3, themes simplify design by eliminating the need to rely on images for gradients, rounded borders or shadows. Some browsers even include interactive content that changes the way that the browser functions and adds varying elements to the user’s internet experience.

To take advantage of these new capabilities, qooxdoo has introduced a new “Simple” theme. Moreover, the “Modern” default theme has been updated to also take advantage of CSS3 in newer browsers. Each theme utilizes a different degradation mechanism in legacy browsers: Modern falls back to the previous image-based theming, while the Simple theme has a bit less of a “shiny” appearance, but still looks plenty good.

Read more about the Simple Theme.
Read more about the Modern Theme.

HTML 5 Support

The new release comes with full support for the latest browsers, including IE9 and Firefox 4. HTML 5 support has also been improved and extended to include experimental wrappers to HTML 5 features such as Audio, Video, Geolocation, Web Storage, and Web Workers.

Low Level Framework

Qooxdoo is not only a JavaScript framework for creating rich internet applications–it can also assist in the coding of low-level functionality. The JQuery AJAX load() method is good example of a simple, but powerful high-level function:

$(selector).load(url,data,callback)

The selector is the HTML element(s) to change, and the url parameter specifies a web address for retrieving the data.

Conversely, the low-level $.ajax(options) function offers more functionality than the load(), get(), and post() higher level functions, but it also requires more thought and effort on the part of the developer to use.

While the qooxdoo low-level APIs do not include one for Ajax, it does provide several objects that are heavily relied upon by higher-level classes, but can also be called directly for low-level manipulations:

qx.bom:

The classes contained in the qx.bom module provide cross-browser support classes of the browser’s JavaScript runtime environment. It includes APIs for:

qx.bom.element:

The qx.bom.element package assists with the manipulation of DOM elements. Each class contains several static methods that take a BOM element as their first argument.

qx.dom:

The Document Object Model (DOM) is a tree model that represents the document in a browser. The classes provided by this packages allow you to query and manipulate all nodes contained in the DOM.

The qx.dom package consists of three classes:

  • Element: manages children structures, inserts, removes and replaces nodes
  • Hierarchy: for querying nodes
  • Node: basic node creation and type detection

qx.xml:

This package includes functionality to work with XML documents in a way that is browser agnostic. Its three classes are:

  • Document: for creating an XML document
  • Element: API to select, query and serialize XML elements
  • String: handles escaping and unescaping of XML strings

All of the above APIs will give developers more choices for low-level support in addition to JQuery, the established favorite.

Find out more about the Low Level Framework.
How to setup a Low Level Library.

Mobile App Support

Version 1.4 extends qooxdoo’s object-oriented programming model and widgets into the mobile app for smartphones arena. It includes dedicated mobile widget libraries to create mobile apps that will run on both Android and iOS devices. In doing so, care has been taken so that code and application logic can easily be ported into more traditional web apps whose target devices are notebooks, laptops, and desktop computers.

Visit the mobile showcase to learn more about qooxdoo’s mobile app widgets and features.

More Virtual Widgets

The Virtual List that I wrote about in my Qooxdoo Virtual List Widget’s Most Impressive Features article was still considered experimental at the time. In version 1.4, it is officially production-ready. In fact, joining the virtual widget family are the Virtual SelectBox and Virtual ComboBox. Finally, a new experimental Virtual Tree has also been introduced.

Learn more about the Virtual List.
Learn more about the Virtual SelectBox.
Learn more about the Virtual ComboBox.
Lean more about the Virtual Tree.

Application-scope Environment Variables

Many operating systems use environment variables to pass configuration information to applications. Typically, they are stored as key/value pairs. Qooxdoo now makes a number of environment variables of its own available to your JavaScript code. Their value can be set in various ways, including by code or through build configuration. These are usually set during startup of the application and are treated as constants for the life of the application. Others are read-only and contain information such as the name of the current browser, or the number of allowed server connections. The environment API also implements browser feature detection and information.

More about qooxdoo’s Environment implementation.

Built-in Unit Testing

Two testing tools that were introduced as a preview in the previous version, the Testrunner and Simulator, have been promoted to production-ready status. Based on data binding, the Testrunner comes with several different UIs: a rich user interface, a new lightweight HTML view, and a pure browser console view. More advanced capabilities include the use of spies, stubs, and mocks. The Simulator is qooxdoo’s built-in solution for automated GUI tests using Selenium.

More information on the Testrunner.
More information on the Simulator.

Conclusion

qooxdoo’s new 1.4 release has already been garnering some rave reviews. Based on my own experience with it, I can easily see why. From where I’m standing, the makers of qooxdoo have taken a really good JS library and turned it into an excellent one.

Robert Gravelle
Robert Gravelle
Rob Gravelle resides in Ottawa, Canada, and has been an IT guru for over 20 years. In that time, Rob has built systems for intelligence-related organizations such as Canada Border Services and various commercial businesses. In his spare time, Rob has become an accomplished music artist with several CDs and digital releases to his credit.

Get the Free Newsletter!

Subscribe to Developer Insider for top news, trends & analysis

Popular Articles

Featured