Qooxdoo

Infobox Software
name = qooxdoo


caption = Webbrowser running a qooxdoo application.
latest release version = 0.8.0
latest release date = release date|2008|08|29
genre = Ajax framework
license = LGPL License and EPL License
website = http://qooxdoo.org

qooxdoo (IPAEng|ˈkuːksduː) is an open source Ajax web application framework. It is an LGPL- and/or EPL-licensed multipurpose framework that includes support for professional JavaScript development, a GUI toolkit and high-level client-server communication.

Framework

qooxdoo is entirely class-based and tries to leverage the features of object-oriented JavaScript. It is based on namespaces and does not modify or extend native JavaScript types. Most modern browsers are supported (Mozilla, Internet Explorer, Opera, Safari/WebKit). [cite web| url=http://blogs.techrepublic.com.com/programming-and-development/?p=552 | title=TechRepublic article | accessdate=January 2008] It includes an API reference that is auto-generated from Javadoc-like comments. Among the accompanying tool set is a comprehensive JavaScript parser that is an integral part of the automatic build process and is used for optimizing, compressing, linking and the deployment of custom applications, as well as documentation generation. Internationalization and localization of applications are supported.

qooxdoo is offered in various packages, [cite web | url=http://qooxdoo.org/download | title=qooxdoo Download page | accessdate=January 2008] from minimal to full SDK. While the entry-level packages simply require a suitable browser, the SDK poses more demands on the environment, [cite web| url=http://qooxdoo.org/documentation/0.7/installing_cygwin | title=SDK prerequisites |accessdate=January 2008] in order to make use of its features.

GUI toolkit

Despite being a pure JavaScript framework, qooxdoo is quite on par with GUI toolkits like Qt, SWT and others to implementing user interfaces. It offers a rich set of widgets that resemble elements of native desktop applications. Built-in support for keyboard navigation, focus and tab handling and drag & drop is provided. Dimensions can be specified as static, auto-sizing, stretching, percentage, weighted flex or min/max or even as combinations of those. All widgets are based on flexible layout managers which are instrumental to many advanced layout capabilities. Interface description is done programmatically in JavaScript for enhanced performance.

No HTML has to be used to define the user interface, and CSS is not required to style the interface. Simple appearance themes are used to style colors, icons and other visual properties; they also support runtime switching.

Object-oriented programming

qooxdoo uses a closed form to define new classes. The global class constructor takes two arguments, the name of the new class and a map that provides values for a set of predefined keys, like 'construct' (the constructor method hook), 'statics' (for static class attributes and methods), 'members' (for instance attributes and methods) and 'destruct' (for the destructor). This (possibly large) map represents the class definition. Classes can be derived from other classes using the 'extend' keyword.

The following application skeleton [cite web | url=http://qooxdoo.svn.sourceforge.net/viewvc/qooxdoo/trunk/qooxdoo/frontend/application/skeleton/source/class/custom/Application.js?view=log | title=SVN view of Application.js | accessdate=2008-01-17 ] gives an impression on how that works. The code will create a small application with a button that features a tooltip and opens an alert box when pressed:

qx.Class.define("custom.Application",{ extend : qx.application.Gui,

members : {

main : function() { this.base(arguments);

// Define alias for custom resource path qx.io.Alias.getInstance().add("custom", qx.core.Setting.get("custom.resourceUri"));

// Create button var button1 = new qx.ui.form.Button("First Button", "custom/image/test.png"); // Set button location button1.setTop(50); button1.setLeft(50);

// Add button to document button1.addToDocument();

// Attach a tooltip button1.setToolTip(new qx.ui.popup.ToolTip("A nice tooltip", "icon/32/status/dialog-information.png")); // Add an event listener button1.addEventListener("execute", function(e) { alert("Hello World!"); }); },

close : function() { this.base(arguments);

// Prompt user // return "Do you really want to close the application?"; },

terminate : function() { this.base(arguments); } },

settings : { "custom.resourceUri" : "./resource" );

Interfaces and mixins are defined and used in a similar fashion.

Ajax

While being a client-side and server-agnostic solution, the qooxdoo project does include optional RPC server implementations (currently in Java, PHP and Perl) to demonstrate client-server communication. An abstract transport layer supports queues, timeouts and implementations via XMLHttpRequest, Iframes and Scripts. Like the rest of qooxdoo it entirely relies on event-based programming which simplifies asynchronous communication.

References

Related links

* JavaScript
* Ajax (programming)
* Comparison of JavaScript frameworks

External links

* [http://qooxdoo.org/ qooxdoo Homepage]
* [http://demo.qooxdoo.org/ Demos]
* [http://api.qooxdoo.org/ API reference]
* [http://sourceforge.net/projects/qooxdoo/ Sourceforge project page]
* [http://ajaxian.com/archives/video-brief-on-the-qooxdoo-framework Video brief on Ajaxian.com]
* [http://blogs.techrepublic.com.com/programming-and-development/?p=552 Critical review on TechRepublic]