Utilizing REST with qx.Website

If you take a look at web APIs and the web service landscape nowadays you’ll notice that the predominant architectural style is REST (Representational State Transfer).

qooxdoo helps you utilize REST with our REST layer (qx.io.rest.Resource), which can be used to work against RESTful web-services in an elegant way. That means rather than requesting URLs with a specific HTTP method manually, you can define resource objects and invoke actions upon them. Our REST manual page explains this in greater detail.

Until now the REST layer was not available within qx.Website but this has changed. In order to provide the same functionality that qx.io.rest.Resource offers we had to introduce another Resource class: qx.bom.rest.Resource. This enabled us to change the API slightly where needed (i.e. smaller dependency footprint) while staying backwards-compatible (unchanged API for qx.io.rest.Resource).

So here is a small example of the usage of qx.bom.rest.Resource:

q.ready(function() {
  var resourceDescription = {
    "get": { method: "GET", url: "http://example.org/resources/{name}" },
  };
  var resource = q.rest.resource(resourceDescription);
  resource.on("getSuccess", function(e) {
    console.log(e.response);
  });
  resource.on("getError", function(e) {
    console.log(e.response);
  });
  resource.get({"name": "sample"});
});

This functionality is now available in the devel version of q (i.e. qx.Website) which is available in the download section (look for q-devel.min.js). If you want to dive deeper check out the qx.Website API documentation also.

The rest of this article simply goes into detail how qx.bom.rest.Resource differs from qx.io.rest.Resource – which is mainly interesting for those who already used the old one and want to try the new one within qx.Website:

  • The event object available in the listeners (e.g. success(), getSuccess() and getError()) is a native JavaScript object instead of a qooxdoo object (qx.event.type.Rest).
    • qx.io.rest.Resource vs. qx.bom.rest.Resource
      event.getId() => event.id
      event.getRequest() => event.request
      event.getAction() => event.action
      event.getData() => event.response
      event.getPhase() => --- (see below)
  • Methods which allow manipulation of the request (e.g. configureRequest()) will operate on an instance of qx.bom.request.SimpleXhr instead of qx.io.request.Xhr (the API is similar but not identical)
  • poll() returns no qx.event.Timer object. There are two new methods (stopPollByAction() and restartPollByAction()) available at qx.bom.rest.Resource which replace the functionality provided by the Timer object.
  • The phase support, which is a more elaborate version of readyState, is not available. So use readyState instead.
    • Phases (available only in qx.io.rest.Resource):
      • unsent, opened, sent, loading, load, success
      • abort, timeout, statusError
    • readyState (available in qx.bom.rest.Resource and qx.io.rest.Resource):
      • UNSENT
      • OPENED
      • HEADERS_RECEIVED
      • LOADING
      • DONE

We are looking forward to your feedback.

qx.Desktop on mobile devices

Some time ago, we started to think about the usage of qx.Desktop UI elements on mobile devices, especially on tablets. There should be no reason why an application using qx.Desktop couldn’t work on tablets as well. And basically that’s true, even for older qooxdoo releases. But our goal wasn’t just to make it usable, but to make it fun to use. With the recently announced diet of the widget set, we took a step into the right direction. This switch reduced the memory footprint and along with that, improved the performance on mobile devices. With this blog post, we want to introduce another step.

Mouse Emulation
Relying on mouse events, as the whole UI layer of qx.Desktop does, comes with some challenges on mobile devices. The common, webkit-based browsers on mobile devices delay the mouse events for a certain timespan, which leads to a sluggish user experience. So we decided not to listen to the native mouse events, but to create our own mouse events based on the touch events offered by the browser. For more details, check out the manual page, which covers what’s supported and how to use it in your own application. Basically, with a certain config setting your app should now also work on touch devices like a tablet (while it still might not be optimized for such a use case, of course).

If you have a touch device like a tablet at hand, just check out the most recent Widget Browser, which has this new feature turned on. Let us know how well you can interact with the app just using your fingers, and please file reports if you encounter any issues.

qooxdoo on a diet

You may have noticed that we’ve been busy working on a big topic recently: Improving UI responsiveness by reducing the amount of DOM elements created for each desktop widget.

Those additional elements were necessary in older browsers to allow for fully-featured rich user interfaces. Now we can take advantage of native features in modern browsers while trying to implement graceful degradation in older browsers and discontinuing support for some legacy browsers.

Every desktop widget now consists of just one content element. Before, each widget consisted of at least two (often even 3-5) DOM elements and their corresponding JavaScript object representations. So the new element or object count is significantly reduced by about 3:1.

3D DOM View: master vs. diet

qooxdoo Widget Browser in Firefox' 3D DOM view: master branch (left) vs. diet branch

This work happens in a feature branch appropriately named ‘diet’, which we now consider ready for public testing. We’ve prepared a document explaining the changes in detail. This also includes a migration guide for anyone willing to test the modifications. If you don’t use your own custom themes, layouts or widgets, it should be particularly easy to build your app against the diet branch. Give us feedback on the usual channels, e.g the mailing list or Bugzilla.

If you don’t have the time to migrate your applications, you can still help us out by testing the framework’s demo applications in your favorite (modern) browser.

We’re planning to merge the diet branch into master in about two weeks. Anyone currently using the master branch is strongly encouraged to test their application using diet before this time to prevent any unpleasant surprises.

Since these are major modifications including some API changes, they will be published along with a next major release qooxdoo 3.0 this summer.