I always wanted to play with the browser's canvas element but never really found the right toy project. Then I read Ariya Hidayat's blog post "Let there be color". He has implemented the HSL color pie using Qt's 2D drawing canvas. How hard would it be to put something like this into the browser? I decided to try the port of his code to JavaScript and render the pie using only canvas. If this worked out maybe I could embed it into nice little qooxdoo windows.

Once I figured out how to realize "putPixel" and "getPixel" functions in canvas the port was merely a copy and paste with some minor changes. Right now I use the canvas methods "getImageData" and "putImageData" to obtain and render a pixel buffer. Unfortunately these methods are only available in Firefox. I'm still looking for an alternative for Opera and Safari. The last missing part was the conversion from HSV to RGB but luckily I could drop in a modified version of qooxdoo's hsbToRgb method.

Now the port could start. What really intrigued me was that the main algorithm was nearly the same as the C++ code. Just take this code fragment from the original code:

for (int i = 0; i < radius; i++) {
  qreal hue = 1 - init;
  qreal sat = 1 - qreal(i) / radius;
  for (int d = 0; d < depth; d++) {
    qreal value = 1 - qreal(d) / depth;
    QColor color = QColor::fromHsvF(hue, sat, value);
    img-&gt;setPixel(width / 2 - radius + i + 1, center + d, color.rgb());
  }
}

and compare it to the ported JavaScript:

for (var i = 0; i < radius; i++) {
  var hue = 1 - init;
  var sat = 1 - i / radius;
  for (var d = 0; d < depth; d++) {
    var value = 1 - d / depth;
    var color = hsbToRgb(hue, sat, value);
    setPixel(img, width / 2 - radius + i + 1, center + d, color);
  }
}

Basically only the variable declaration is different. The same is true for almost all of the relevant code. My first version was an all in one HTML file with the JavaScript code embedded. I used no framework, just plain JavaScript.

Of course I wanted to use some qooxdoo, so the next iteration was to put this into a qooxdoo application. Up to now qooxdoo had no support for embedding canvas elements into a qooxdoo widget. I used much of the new 0.8 widget infrastructure to create a canvas embedding widget. With this widget I could take the code from my first version and embed it into a qooxdoo window. You can see this application life or download the sources. This code is based on the latest qooxdoo 0.8 trunk.

Have fun!

For qooxdoo 0.8 we have introduced a layered architecture from low-level DOM to high-level widget system. For instance, we extracted all lower-level implementation details out of the widget system and moved them into a new layer (that could also be used independently). Interestingly, this was already mentioned about a year ago and I thought it would be a good idea to refresh the information from the last report.

The layers of qooxdoo in 0.8:

• qx.dom contains generic DOM methods. This includes basic stuff like information about the different node types, positioned inserts of nodes, a huge range of traversal functions.
• qx.xml contains specific features to work with XML documents. Features include selectNode, createDocument and string escape routines specific to XML.
• qx.bom contains all stuff which is specific to the so-called "browser object model". Included are features to control specific attributes of HTML elements e.g. utilities to work with styles, class names, etc. It also connects elements to the event system. There are many more things: Computing locations of arbitrary elements in relation to the document, scrolling any visible element into the viewport, inserting Flash movies, working with the browser history and creating pseudo bookmarkable pages, dealing with XMLHttp requests in a unified fashion, detecting the client and a number of the most common plugins, creating enhanced shrinkable labels with ellipsis symbol etc. All these features work in all four supported browsers equally well.
• qx.html is the new high-level DOM manipulation API. It is mainly thought for the managed creation of HTML nodes. It wraps most of the features of qx.bom and offers them in the well-known qooxdoo OO style programming fashion. With this API you work with an instance for every DOM node you like to create. This may seem very expensive at first glance, and in fact it isn't without cost, but in practice it performs quite well. And best of all: it automatically gets a lot of stuff right which otherwise had to be done over and over again in an application or the widget system itself. Yes, the widget system uses this API to work with the DOM. The major feature of this API is the managed creation and insertion of DOM nodes. It works perfectly for multi-pane views (e.g. Tab Views) and makes generation of whole areas as lazy as possible without any additional work required. Compared to qx.bom these features do make most sense when creating a huge chunk of HTML. For simple modification of existing nodes or creation of a handful of nodes qx.bom is the better choice.
• qx.ui contains the GUI toolkit of qooxdoo 0.8. Here you can find all things comparable to other (native) toolkits. This means for instance: real layout managers, improved event and focus handling, decorators for all types of styles, full-blown theming capabilities without the need to use HTML or CSS.

Hope this is a useful overview. Feed free to ask questions, your feedback is appreciated. This blog post will become part of the forthcoming documentation of 0.8.

There was planned another one for Fabian. This time a deeper insight to the internals of qooxdoo's Widget system. Because the first workshop took too long there was no more time for this one. Without the oral narrative this is quite lightweight. Hope this is still interesting for you. More detailed documentation is planned for 0.8 in the next weeks.

| View | Upload your own

Together with Fabian I did a workshop GUI Development with qooxdoo using the brand new qooxdoo 0.8-alpha1. The workshop was planned for three hours on the workshop day of the Webinale 2008 in Karlsruhe, Germany. It contains these parts:

• Status of 0.8
• First Steps
• Understanding the GUI
• Creating the GUI
• Data Handling
• Making It Work
• Improving the GUI

Due to the fact that the topic is quite advanced, the workshop ended without showing the last third of the presentation.

If you were in the presentation or are interested in a qooxdoo 0.8 workshop, please feel free to download the prepared material (about 13MB). The archive contains a snapshot of the framework folder of qooxdoo. The prebuilt application steps make use of this qooxdoo version (Due to the trunk's nature to change rapidly newer or older versions may not work by the way). You do not need to have a current checkout of qooxdoo's trunk.

Try to follow the described steps on your own. Each snapshot (in the Snapshots folder) contains the full implementation done the corresponding slide. You can find step-by-step code blocks in the Steps folder. At the bottom of some slides you can find a small area where the current step is mentioned. Use this to keep in sync with the snapshot or code block.

If you have questions or comments feel free to post them here or on our mailing list. We are really interested in any feedback for this quite new presentation style (at least for us).

| View | Upload your own