QxWT a wrapper for Qooxdoo-JS

In my last blogs I wrote about my current exploration of Qooxdoo and despite the silence since then I made a lot of good progress. I explored different things:

  • Rewrite the whole library in plain-GWT: Doable but well a bit of work and without haveing a something founding this undoable
  • Simply write a wrapper using GWT’s JSNI-calling interface: Doable in an acceptable time, though to get acceptable load-performance I need to investigate a bit (minimizing JavaScript loading, …)

After having explored the above options I decided to go down to route writing a wrapper library and well I think I was quite successful until now because I now have the following examples from their demo running:

Running Demos

If you look at the list you’ll notice that in the end the all important controls to write UI applications are available to me now and naturally the next thing is to make them UFaceKit-Viewer and UFaceKit-Databinding aware.

I haven’t started yet with Databinding support because for more complex controls having a UFaceKit-Viewer implementation is much more important writing those “dumb”-Observables is a piece of cake since 3.5 and the new Properties-API. So the first thing I can show you is how to implement an UFaceKit-Viewer for QxWT-Widgets:

package at.bestsolution.ufacekit.qx.viewers.example.client;

import java.util.ArrayList;
import java.util.Collection;

import org.eclipse.ufacekit.ui.viewers.CollectionContentProvider;
import org.eclipse.ufacekit.ui.viewers.LabelConverter;

import at.bestsolution.qx.wrapper.client.application.QooxdooApp;
import at.bestsolution.qx.wrapper.client.application.QxAbstractGui;
import at.bestsolution.qx.wrapper.client.ui.layout.QxVBox;
import at.bestsolution.qx.wrapper.client.ui.window.QxWindow;
import at.bestsolution.qx.wrapper.client.util.gwt.QxOption;
import at.bestsolution.ufacekit.qx.viewers.TableViewer;
import at.bestsolution.ufacekit.qx.viewers.TableViewerColumn;

public class TableViewerExample extends QooxdooApp {
  protected void run(QxAbstractGui application) {
    QxWindow window = new QxWindow("JFace TableViewer",
    window.setContentPadding(0, 0, 0, 0);
    window.setLayout(new QxVBox());

    application.getRoot().add(window, QxOption.leftTop(50,10));

    TableViewer<Person, Collection<Person>> tableViewer = 
      new TableViewer<Person, Collection<Person>>(3);
      new CollectionContentProvider<Person>()
    TableViewerColumn<Person> col = 
      new TableViewerColumn<Person>(tableViewer, "Firstname");
        col.setLabelConverter(new LabelConverter<Person>() {
          public String getText(Person element) {
            return element.getFirstname();

    col = new TableViewerColumn<Person>(tableViewer, "Lastname");
    col.setLabelConverter(new LabelConverter<Person>() {
      public String getText(Person element) {
        return element.getLastname();

    col = new TableViewerColumn<Person>(tableViewer, "Age");
    col.setLabelConverter(new LabelConverter<Person>() {
      public String getText(Person element) {
        return element.getAge() + "";

    Collection<Person> ps = new ArrayList<Person>();
      for (int i = 0; i < 10000; i++) {
        ps.add(new Person("First " + i, "Last" + i, i));

    window.add(tableViewer.getTable(), QxOption.flex(1));
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE module PUBLIC "-//Google Inc.//DTD Google Web Toolkit 1.6.4//EN" 
<module rename-to='at_bestsolution_ufacekit_qx_viewers_example'>
  <!-- Inherit the core Web Toolkit stuff.                        -->
  <inherits name='com.google.gwt.user.User'/>

  <!-- Other module inherits                                      -->
  <inherits name="at.bestsolution.qx.wrapper.QxScript" />
  <inherits name="at.bestsolution.qx.wrapper.QxEngine" />
  <inherits name="org.eclipse.ufacekit.ui.Viewers"/>
  <inherits name="org.eclipse.ufacekit.core.UBean" />
  <inherits name="at.bestsolution.ufacekit.qx.QxViewers"/>

  <!-- Specify the app entry point class.                         -->
  <entry-point class='at.bestsolution.ufacekit.qx.viewers.example.client.TableViewerExample'/>

This results in an demo application like this:

You’ll probably notice the big start up time but this is because I’m loading all Qooxdoo-JavaScript files one by one until now without any size optimization but this is something to address later. The important fact for me now is the runtime/rendering performance of Qooxdoo and I’ll have to say that I’m amazed how fast one can scroll those 10.000 items (well I also tested with 100.000 and there’s no difference once the control is shown).

Another thing you might notice is that the colum headers are not correct and that one needs to define the amount of columns before creating the viewer. This is because I’m by far no expert in Qooxdoo and didn’t find out how to do this stuff until now so bear with me.

The last thing you might observe is that all this stuff is not under the org.eclipse.ufacekit-namespace but under at.bestsolution. The reason for this is that if there’s no one else puting resources (time and/or money) into this I don’t see a reason for releasing it into the public domain.

In the end something about Qooxdoo. I have to say that I’m amazed by the performance but what amazes me even more is that this is the first JavaScript-UI-Library I’ve worked with really concentrating on providing you widgets, just like SWT does, not requiring me to use their stores, domain object models, MVC-story, … – it’s “just” an widget library.

This entry was posted in QxWT. Bookmark the permalink.

5 Responses to QxWT a wrapper for Qooxdoo-JS

  1. Hi Tom,

    congrats to the progress you made with the GWT wrapper for qooxdoo. 🙂

    Also great to see you’re so happy with its performance (particularly the “virtual” table widget) and with just using those parts that you actually needed for the integration. Of course, qooxdoo itself is a comprehensive JS framework for creating rich internet apps with all the bells and whistles (data binding, etc.), but its architecture is meant to be clean enough to allow for many use cases (low-level DOM library to high-level GUI toolkit).

    Lets figure out how we could collaborate in improving the current solution (e.g. in terms of deployment/optimization) and possibly maintaining it to keep it in-sync with qooxdoo.

    TTYL, Andreas

    • tomeclipsedev says:

      Hi Andreas,

      You are right with your statement about the clean split and naturally if one wants to they get also all those fancy things.

      We should collaborate on the deployment optimization which is very important to make the wrapper a success. I’m looking into providing you (and others) access to the code base this week. Currently the code is license under GPL v3 and UFaceKit.org Commercial License because as stated before I’m not sure yet what business model I can have behind it.


  2. Andrea Zoppello says:

    Hi tom,

    Great works, Your works on GWT wrapper for qooxdoo seems good and i’m very interested about it.

    BTW you say you’re at the moment you’re going to use GPL3… and this could be ( at least for me a problem )… Would you consider a less restrictive license ( LGPL or Apache style???? )


    • tomeclipsedev says:

      To make the code available until I made up a business model around it I’m going to use GPL3 and a commercial license (I need to define yet and a very low fee at least a lot less than the one you pay for GXT). If I can come up with a business model ensuring that I get out some money with the work I’m doing I’d probably provide the wrapper under EPL but until now I have to say that most people even big companies profited from the work I did in the OpenSource space but never gave back anything to me.

      A possible solution might be that the wrapper is going to be under EPL but addon libraries like the up coming UFaceKit-Viewers are going to be under GPL and Commercial but as said I need to think more about it.

  3. Pingback: Eclipse Databinding and QxWT « Tomsondev Blog

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s