[TYPO3-hci] GUI Toolkit Qooxdoo

Patrick Broens patrick at patrickbroens.nl
Fri Nov 10 11:26:14 CET 2006


Hi HCI Folks,

In the past week I've been thinking about making or using a GUI toolkit 
for TYPO3. Right now TYPO3 doesn't use a real toolkit for the appearance 
of the backend which, especially for a framework like TYPO3, in my 
opinion should use. Right now a lot of testing is done with separate 
code snippets, which I prefer to see in one toolkit. With AJAX in my 
mind I went on a quest on the Internet to search for sollutions. Some of 
you probably know the Prototype Window Class [1], Lasse used for the 
desktop-like application mentioned in the PDF Jens Hoffmann made, or 
Dojo [3], I think Kasper is playing with (regarding the drag and drop 
features of the 'Dashboard'), or other Javascript snippets. A commercial 
solution, for instance, is Bindows [2].

Looking for the holy grail, I stumbled upon Qooxdoo [4].

Below is a summary of their 'about' page [5], which I believe is totally 
true.
----
Qooxdoo is one of the most comprehensive and innovative Open Source AJAX 
frameworks. It is an LGPL-licensed multipurpose framework that includes 
support for professional JavaScript development, a state-of-the-art GUI 
toolkit and high-level client-server communication.

It is entirely class-based and tries to leverage the features of 
object-oriented JavaScript. qooxdoo is fully based on namespaces and 
does not modify or extend native JavaScript types. The fast and complete 
JavaScript parser not only allows for doc generation, but is an integral 
part of the automatic build process that makes optimizing, compressing, 
linking and deployment of custom applications extremely simple.

Despite being a pure JavaScript framework, qooxdoo is quite on par with 
GUI toolkits like Qt or SWT when it comes to advanced yet easy to 
implement user interfaces. It offers a full-blown set of widgets that 
are hardly distinguishable from elements of native desktop applications. 
Full 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 powerful and flexible 
layout managers which are a key to many of the advanced layout 
capabilities. Interface description is done programmatically in 
JavaScript for maximum performance.

No HTML has to be used and augmented to define the interface. The 
qooxdoo user does not even have to know CSS to style the interface. 
Clean and easy-to-configure themes for appearance, colors or icons allow 
for a full-fledged styling that even supports runtime switching.
----
Their website has some outstanding demo's [6] which shows a lot of the 
capablilities of Qooxdoo. Especially the tests [7] are interesting 
because it shows most of the internal functionality. (There are some RPC 
tests, but they forgot to add the server functionality)

I've played with it in the past week, and this toolkit surprised me. It 
is very simple to use, is beautifully written (I'm a programmer), has a 
lot of features and you can extend it very easily. It has also some nice 
features to change the appearance of the GUI completely.

Maybe something to keep in the back of our minds.

Right now I'm working on some mockups with Qooxdoo to see how we can 
change the appearance of TYPO3 to be more user friendly. Maybe we can 
use these mockups to test what the best way is to make the backend more 
usable for normal backend users.

Patrick

[1] http://prototype-window.xilinus.com/index.html
[2] http://www.bindows.net/
[3] http://dojotoolkit.org/
[4] http://qooxdoo.org/
[5] http://qooxdoo.org/about
[6] http://qooxdoo.org/demo
[7] http://demo.qooxdoo.org/html/test/index.html



More information about the TYPO3-team-hci mailing list