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.
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:
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:
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:
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:
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
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.
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.
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.
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 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:
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.
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.
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.
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.
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 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 uses namespaces. It avoids the conflicts in global variables
Besides regular classes, it offers
abstract, static, orsingletonclassesConstructor and destructor support
Multiple access specifiers—
public, protected, andprivateSingle inheritance and full polymorphism
Java-like interfaces
Ruby-like mixins
So-called dynamic properties, a very convenient and powerful way to have optimized
setterandgettermethods generated from simple configuration
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
gettexttoolsWell-known translation file format (
.po)Support by professional, free translation tools (PO editors) on all platforms
Full API reference for both framework and custom applications
Online (http://api.qooxdoo.org/) and offline API viewer applications
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 buildAutomatic 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
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.
Java/Eclipse: Eclipse Rich Ajax Platform (RAP); for more information, see http://eclipse.org/rap
Java: qooxdoo Web Toolkit (QWT); for more information, see http://qooxdoo.org/contrib/project/qwt
QxWT: JSNI wrapper for the qooxdoo JavaScript library; for more information, see http://www.ufacekit.org/index.php?cat=02_qooxdoo&page=01_QxWT
LISP (qooxlisp): LISP programming for web applications; for more information, see https://github.com/kennytilton/qooxlisp/wiki/
XML: XML-based GUI description; for more information, see http://qxtransformer.org/
The list of alternative programming models is growing. You can check the updated list at http://qooxdoo.org/documentation/general/development_platforms
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.
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.
Let's check the supporting tools that qooxdoo provides to explore all the widgets in the GUI Toolkit.
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:
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.
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.
Let's define some functional requirements for the Team Twitter application.
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:
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.
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.
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. qooxdoo works on most of the web browsers
a. Yes
b. No
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. 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. 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. 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.