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:

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 {
  @Override
  protected void run(QxAbstractGui application) {
    QxWindow window = new QxWindow("JFace TableViewer",
      "/icon/16/apps/office-spreadsheet.png");
    window.setWidth(600);
    window.setHeight(400);
    window.setContentPadding(0, 0, 0, 0);
    window.setShowClose(false);
    window.setShowMinimize(false);
    window.setLayout(new QxVBox());
    window.open();

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

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

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

    col = new TableViewerColumn<Person>(tableViewer, "Age");
    col.setLabelConverter(new LabelConverter<Person>() {
      @Override
      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));
      }
    tableViewer.setInput(ps);

    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" 
   "http://google-web-toolkit.googlecode.com/svn/tags/1.6.4/distro-source/core/src/gwt-module.dtd">
<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'/>
</module>

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.