qooxdoo Beginner's Guide

By Mohamed Raffi , Rajesh Kumar Bachu
    What do you get with a Packt Subscription?

  • Instant access to this title and 7,500+ eBooks & Videos
  • Constantly updated with 100+ new titles each month
  • Breadth and depth in over 1,000+ technologies
  1. Free Chapter
    What is qooxdoo?

About this book

Over the past few years, all the major internet or enterprise applications are developed or migrated to Rich Internet Application to support all the features that are provided in the desktop applications. This helps organizations keep the end users happy and also improves application deployment and maintenance. qooxdoo is a stable, open source RIA framework. If you are waiting and watching for the right time to migrate your application to qooxdoo, this is the right time!

This book explains in detail about the rich user interface development in qooxdoo. It explains various concepts of qooxdoo framework in an easy to grasp and organized way, making it simple even for a novice in qooxdoo and also increases the competency level of the developer who is already working in qooxdoo.

This book helps developers understand the qooxdoo framework, setup the environment, and start the development of RIA using qooxdoo. You will learn the core programming techniques in qooxdoo, user interface development in qooxdoo, testing & debugging qooxdoo applications, internationalization of qooxdoo applications to multiple languages, customizing the look and feel of qooxdoo applications using Themes, Performance management, etc.

In the course of the book, we develop a complete application which will help the developer to understand the concepts better and to put things together to see the step-by-step progress to complete an application. By the end, this book will get the developer accustomed to the widgets and API available in the qooxdoo framework, and will enable him to design, develop, debug, and test the RIA in qooxdoo.

Publication date:
December 2011


Chapter 1. What is qooxdoo?

This chapter introduces the qooxdoo framework to you, explains the architecture, explores the framework features, briefs you about the GUI widget library, and provides an overall understanding about the qooxdoo framework. It takes you through an application developed in qooxdoo and also explains the application that we are going to develop throughout this book.

In this chapter, we'll cover the following:

  • A feel of an RIA developed in qooxdoo

  • Architecture of the qooxdoo SDK

  • qooxdoo framework features

  • Event-based Rich UI Programming

  • GUI Library

  • The application to be developed in this book—Team Twitter

  • What you should know and what you don't need to know

By the end of this chapter, you will have an understanding of the qooxdoo RIA framework and the programming languages or technologies required to develop an application in qooxdoo.

Let's begin to understand qooxdoo.

A feel of an RIA developed in qooxdoo

Before anything, let's get a feel for an application developed in qooxdoo. This will give a rough idea about the things that you can develop, depending on the features in that application. You can do more than that with qooxdoo. The following screenshot will give you an overview of the feed reader application:


A feel of an RIA developed in qooxdoo

Before anything, let's get a feel for an application developed in qooxdoo. This will give a rough idea about the things that you can develop, depending on the features in that application. You can do more than that with qooxdoo. The following screenshot will give you an overview of the feed reader application:


Time for action - play with the feed reader application

Go to the qooxdoo demo feed reader URL (http://demo.qooxdoo.org/current/feedreader/), play with the feed reader application, and feel the qooxdoo application. Perform all the operations available in the application; observe the AJAX behavior, desktop-like features, and so on. Compare the behavior of this application with any typical web application. You can perform the following operations:

Adding a feed to the feed reader

Click on the Add Feed menu in the toolbar and add any feed that you want to put into the feed reader. Let's add the feed to the Google Open Source Blog. Enter Google Open Source Blog in the Title field and http://feeds.feedburner.com/GoogleOpenSourceBlog in the URL field. Click on the Add button. This will add a feed to the User Feeds section:


You must have observed that the add feed action displayed a modal dialog box without disturbing the existing content, and on add action, it just added a feed under the User Feeds section. It did not reload the entire page displayed in the browser. That is the beauty of AJAX applications.

Checking the feeds

Clicking on the RSS feed nodes on the tree panel will load the feeds on the right-hand side panel. Once you click on a particular feed post on the top pane in the right-hand side panel, it will load the details of that particular feed post on the bottom of the right-hand side panel. Go to User Feeds | Google Open Source Blog and check the Google Open Source Blog feed.

If you observe closely, it just loads the required data on the respective content area without disturbing user context or without reloading the entire page (as shown in the following screenshot). This is done through AJAX. In AJAX applications, the application just sends and receives the required data and updates only the impacted portion in the GUI. This helps to retain the user context, improves performance because of less transfer of data between client and server, and improves the usability of the GUI:

Try the following actions, too:

  • Reload

  • Preferences

  • Remove feed

What just happened?

You played with a Rich Internet Application (RIA) developed in qooxdoo. Let's have a look at the key aspects provided by an RIA developed in qooxdoo.

User context

AJAX-based RIA does not reload the whole page every time; instead it just loads the required data in the respective content area. This is the main differentiating aspect in RIA. It holds the user context all the time, thus the user experience is very much appreciated by the users. RIA applications do not open multiple browser windows, as it is done in the traditional web application using window.open(). Instead, it uses the modal dialog and avoids the floating browser windows. RIA applications do not wipe out the whole page and reload the new page, as it is done in traditional web applications; instead, they retain the user context, send and receive only the necessary data, and update only the changed or impacted portion of the screen. qooxdoo is an RIA framework based on AJAX.

Desktop characteristics

RIA provides rich features developed through the off-the-shelf widgets provided by RIA frameworks such as qooxdoo. Because of this, RIA provides rich user experience. You have seen the toolbar, split-pane, modal dialog, and so on in the feed reader application. There are many more widgets provided by qooxdoo for various purposes that you'll come to know about in the coming chapters.

GUI library

qooxdoo provides a wide range of widgets in the GUI library, which helps you to develop your application pretty quickly with all the rich features. For example, qooxdoo provides the Tree widget that does not come with the plain HTML, it supports column sorting on the table and the remote data model for the table. There are many more widgets with very nice features that are readily available for you. You don't have to spend time to develop these things on your own in HTML and struggle between multiple browser implementations. Instead, just focus on your application's functionalities.


Architecture of qooxdoo SDK

Architecture of the qooxdoo SDK is pretty neatly done to hide the modules that include internal parts such as HTML rendering, multiple browser handling, and so on in different layers and provide the GUI toolkit on top of all the layers.

Let's explore the architecture of the qooxdoo framework to know more about the framework capability:

Core layer

qooxdoo is an object-oriented framework and its working is based on event programming. All the core framework modules are in this layer. You don't have to worry about this until you contribute to the qooxdoo framework.

Browser Abstraction layer

This layer abstracts the document-object model, browser-based events, and so on. This layer is also an internal layer; you don't have to worry about this until you contribute to the qooxdoo framework.

Low-Level layer

This layer contains all the modules that work over the Browser Abstraction layer to achieve actual things on the browser. It contains the modules to render the HTML, select the CSS based on the themes, to animate things, and so on. In addition to these, it has a module called Parts, which helps to divide your application into multiple parts and load only the necessary parts required at any point of time to improve the performance. You need to know only about the Parts module in this layer; the rest of the modules are internal to the qooxdoo implementation.

GUI Toolkit layer

This layer is exposed to the users. You should know all of the modules in this layer. It has a separate module for core UI classes. The widgets and layouts are developed over the core UI. qooxdoo provides a wide range of layouts and widgets for you. Once you know all the layouts provided by the qooxdoo framework, it will be easy to pick the right layout for your needs. It provides a full-blown set of widgets. You can learn the basic widgets first and the other widgets as and when you need to use them. The qooxdoo framework separates the style part into a separate module called Themes, which allows you to change the look and feel of your application without touching the application logic code. This is based on JavaScript, not CSS. The qooxdoo framework supports keyboard navigation, focus handling, tab handling, and drag-and-drop functionalities.

Data Binding

This functionality is available across multiple layers. Basically, this provides a way to attach the data source to the UI widget. The data could be fetched from a file, web server, or web service, and the store will fetch the data from any of these sources and attach that to the data model of the UI widget. The controller will make sure that the data is displayed in the view part of the widget. One of the data sources can be YQL API or REST API from twitter.


This functionality is also available across multiple layers. qooxdoo supports the internationalization of the application, so that you can localize your application to support locale information for virtually every country in the world. You need to prepare your application code to read from the locale files, and as you translate the texts to multiple locales, your application will work as per the locale that is chosen in the application.


qooxdoo framework features

qooxdoo is an entirely object-oriented framework based on JavaScript. This framework is properly organized on the basis of namespaces. It supports most of the modern browsers, provides utilities to generate documentation based on javadocs such as comments, and also supports themes and internationalization. In this section, you will learn about all these features.

Let's check all the features provided by the qooxdoo framework. This will improve your knowledge on qooxdoo and help you further understand the qooxdoo framework.


  • The qooxdoo application runs in most of the modern web browsers, including:

    • Internet Explorer 6+

    • Firefox 2+

    • Opera 9+

    • Safari 3.0+

    • Chrome 2+

  • No plugins (ActiveX, Java, Flash, or Silverlight) are required. It is completely based on JavaScript.

  • Non-critical modifications of the native JavaScript objects to allow for easy integration with other libraries and custom code.

  • Cross-browser JavaScript 1.6 (string/array generics).


  • Framework is fully class-based

  • Framework uses namespaces. It avoids the conflicts in global variables

  • Besides regular classes, it offers abstract, static, or singleton classes

  • Constructor and destructor support

  • Multiple access specifiers—public, protected, and private

  • Single inheritance and full polymorphism

  • Java-like interfaces

  • Ruby-like mixins

  • So-called dynamic properties, a very convenient and powerful way to have optimized setter and getter methods generated from simple configuration


  • Purely client-side JavaScript

  • No need to know HTML, DOM, or CSS

  • Complete support for event-based programming

  • Development of qooxdoo applications fully supported on all platforms; for example, Windows, Linux, all flavors of Unix, and Mac OS X

  • Quick start for easy evaluation of the framework without the need to install any software

  • Skeletons are pre-configured for full-featured custom applications

  • Many sample applications and examples

  • Designed for high performance

  • Framework has no issue of memory leak

  • Aids in developing memory-leak free user applications

  • Extensive logging capabilities (for example, different log appenders and Firebug support)

  • Straightforward debugging (for example, object introspection and benchmarking)

  • Browser history management, that is, browser back/forward button, bookmarks

  • Cookies

  • Generic JavaScript pretty printer/code formatter for unified code style


  • Built-in internationalization (i18n) and localization (l10n) support

  • Support for all languages and locales, at least on this planet

  • Based on the comprehensive Common Language Data Repository (CLDR)

  • Internally using the mature GNU gettext tools

  • Well-known translation file format (.po)

  • Support by professional, free translation tools (PO editors) on all platforms

API reference

  • Extended javadoc-like source code comments

  • Full API reference for both framework and custom applications

  • Online (http://api.qooxdoo.org/) and offline API viewer applications


  • Integrated unit testing framework (test runner)

  • Integrated functional testing framework (simulator)


  • Generation of a self-contained and easily-deployable build version

  • Complexity of the build process hidden behind user-friendly commands

  • JavaScript compression (removal of whitespaces, and so on)

  • Automatic dependency resolution of JavaScript classes; no need for manual require() statements or tweaking a custom build

  • Automatic linking of JavaScript classes (JS linker)

  • Copying of required static resources like images or other external files into a self-contained build

  • String extraction (tremendous performance improvement for IE6)

  • Shortening and obfuscating local variables and/or private members

  • Optional browser-specific variant for each supported browser (For example, Firefox-only build)

  • Generation of build versions depending on user-defined variants, which allows for different products from the same code base

  • Removal of debug statements within the application code before deployment


  • Support for easy migration of custom applications from one framework release to another

  • Migration in the qooxdoo framework is painless as it is technically easy to carry out

  • Fully integrated into the regular build system

  • All non-ambiguous changes are done automatically for maximum convenience and to avoid manual find/replace errors

  • All ambiguous or semantic changes that require some developer decision are put into a comprehensive checklist

Alternative programming models

In addition to the JavaScript programming model, you can also develop qooxdoo applications using one of the following alternative programming models or development platforms. Some are not quite stable, some are not active, and some are pretty new. This book focuses only on the JavaScript programming model, which is the built-in development model of the qooxdoo framework.

The list of alternative programming models is growing. You can check the updated list at http://qooxdoo.org/documentation/general/development_platforms


Event-based rich UI programming

qooxdoo provides complete support for event-based programming. If you have already programmed in QT or Java Swing, you'll find qooxdoo very similar. qooxdoo separates out the view widgets, model classes, and the controllers. Listeners observe the widget all the time and fire the right event based on the action. The action could be a click, a key entry, a selection of an item, mouse over the widget, change of the value in a table cell, and so on. An example of event-based programming is shown in the following diagram:

For example, you can add a listener for the Button widget to perform something on the click of a button. You can even set a command, which will be called on the execute action of the button-click event. qooxdoo provides lots of events for various widgets. For example, the List widget has many events such as changeSelection, addItem, removeItem, and so on.


GUI widget library

qooxdoo is on par with the desktop GUI toolkits such as QT, Java Swing, and so on. It provides a whole lot of off-the-shelf widgets for the GUI development. The good thing with the qooxdoo framework is the demo browser application, where you can see the behavior of each widget even without setting up the qooxdoo environment.

Similar to the feed reader application, demo browser is another application that comes with the qooxdoo framework. You can use this application to see the behavior of different widgets and select the widget that you want to use in your application. This application demonstrates various widgets, and it displays the widgets under neat categorizations such as widget, layout, UI, and so on.

In addition to the demo browser application, the qooxdoo framework provides another application called playground. As the playground application is linked with the demo browser, you can select the widget that you want to use in the demo browser, take that widget to the playground, change the code, run it, and see the behavior.

This makes it easy to select the widget in the demo browser; try it in the playground before actually trying it in your application. You can access the online version of these applications for the current qooxdoo version. You can also set these applications locally in your network if you download the qooxdoo framework. We will explore the online version of these applications in this section.


Time for action - checking the demo browser and the playground applications

Let's check the supporting tools that qooxdoo provides to explore all the widgets in the GUI Toolkit.

Demo browser

The demo browser allows you to browse through all the widgets provided by the qooxdoo framework. Double-click the tree nodes in the left panel to see the behavior on the right panel.

Go to the URL (http://demo.qooxdoo.org/current/demobrowser/#) and browse through all the widgets shown in the demo. The demo browser application is shown in the following screenshot:


You can change the sample code and play in the playground environment provided by the qooxdoo framework. Run it immediately, and see the results. Even without setting the qooxdoo development environment, you can do some coding in the playground environment and try it. Either you can play with one of the samples in the playground environment or select one of the widgets in the demo browser, take it to the playground, and play with it.

Go to the URL http://demo.qooxdoo.org/1.3/playground/# and play with the widgets. The qooxdoo playground application is shown in the following screenshot:

What just happened?

You have browsed the demo and played in the playground of the qooxdoo framework. These are the pretty cool features offered by the qooxdoo framework that allow you to explore the widgets provided by the qooxdoo framework. As qooxdoo provides a lot of widgets for different purposes, it is a nice idea to browse the demo and play in the playground environment once in a while to know more about all these widgets. Another option is to carry out this activity whenever you are looking for a widget for use in your application.


Application to be developed in this book—Team Twitter

To try out the qooxdoo framework, we will develop an application across this book as we learn the framework. In this section, we'll define the high-level functional requirements of the application that we are going to develop in this book.

The Team Twitter application allows the members of the team to read the tweets written by the fellow team mates and tweet to the team. It supports tagging and filtering based on team members.


Time for action - checking the Team Twitter application

Let's define some functional requirements for the Team Twitter application.

Reading team tweets

You can read all the tweets of a team in a reverse chronological order, search the tweets for any specific keyword, or navigate through the tweets by the tags. In addition to this, you can also filter the tweets by the team members. By default, tweets from all team members are displayed:

Logging in to the Team Twitter application

To tweet in a team, one should log in to the application. If he or she is not already part of the team, they can join the team.

Tweeting to the team

One can tweet a text or video. One can tag the tweet to categorize it and all the tweets are displayed in reverse chronological order.

What just happened?

We have seen the high-level functional requirements of the Team Twitter application. We'll develop this application across the book as we learn more about the qooxdoo framework. In this book, all code related to the user interface development of the team twitter application will be explained in detail, but the server-side and the database part of the code will not be explained, as it is not in the scope of this book. The code for the entire application can be downloaded from the site.


What you should know and what you don't need to know

qooxdoo is completely based on object-oriented JavaScript. So, what you should know is just JavaScript. If you know the object-oriented concepts and have worked with any object-oriented language such as Java, it will really help you to understand the qooxdoo programming concepts pretty quickly. Even if you haven't worked with any object-oriented language, it is okay. You can learn the object-oriented concepts with qooxdoo.

Even though it is a web development application, you don't need to know HTML, DOM, CSS, and so on. qooxdoo generates the HTML at runtime from the JavaScript code that you have written.

Pop quiz

  1. 1. qooxdoo is a

    a. Browser-independent JavaScript framework

    b. Framework that supports object-oriented programming

    c. Event-based programming

    d. All of the above

  2. 2. qooxdoo works on most of the web browsers

    a. Yes

    b. No

  3. 3. I need to install the following on the client machine to run the qooxdoo application in a web browser

    a. ActiveX

    b. Java plugins

    c. Flash

    d. Silverlight

    e. None of the above

  4. 4. The following are possible with qooxdoo programming

    a. Code re-use through object-oriented programming

    b. Modularize the application

    c. Namespace and access control of the member variables

    d. All of the above

  5. 5. I can do the following with qooxdoo

    a. Develop an application, allow my country members to see it in their language, and show it to the world in their language

    b. Support personalization of the web application in qooxdoo

    c. Pull data from multiple data source and bind it to the widget

    d. All of the above

  6. 6. Playground allows you to

    a. Just go through the widget behavior

    b. Edit, run immediately, and see the widget behavior



We learned a lot in this chapter about the qooxdoo framework. Specifically, we:

  • Had a feel of RIA, developed in qooxdoo

  • Got to know the layers in the qooxdoo architecture and the layers or modules that we need to learn for GUI development

  • Got an idea about the various features provided by the qooxdoo framework. This broadens the understanding of the qooxdoo framework

  • Went through the widgets (if not all, as many as we could), with the help of the demo browser and the playground utilities provided by the qooxdoo framework

  • Defined the functional requirements for the application that we are going to develop in this book

We also discussed the things we should know and the things we don't need to know. Now that we've got an overview of qooxdoo, we're ready to say "hello" to the qooxdoo world.

About the Authors

  • Mohamed Raffi

    Mohamed Raffi is an Enterprise Application specialist. His area of work includes Architecture, Design, Development, Training, and Mentoring. He has over thirteen years of product development experience in variety of java and javascript-based technologies and frameworks. You can find more about him at http://in.linkedin.com/in/raffimd and he writes his thoughts at http://thoughtstoblog.blogspot.com

    Browse publications by this author
  • Rajesh Kumar Bachu

    Rajesh Kumar Bachu has over six years of experience in the design and development of Enterprise Applications and Mobile Games. He is good at programming in java and j2ee technologies. He has worked extensively in Qooxdoo application development and migrated an enterprise application to Qooxdoo. You can find more about him at http://in.linkedin.com/in/rajbachu

    Browse publications by this author
qooxdoo Beginner's Guide
Unlock this book and the full library FREE for 7 days
Start now