Popular JavaScript Framework Libraries: qooxdoo and SproutCore / Page 2

Drag & Drop

qooxdoo supports event-based drag & drop with full data exchange capabilities. Every widget can be configured to implement drag & drop capability be it as sender (draggable), receiver (droppable) or both. To enable Drag & Drop on widgets, all you have to do is enable the draggable and droppable properties. For list type sources or targets it's often enough to make the top-level widget drag & droppable:

Using the code above, the no-drop cursor will still appear over all potential targets. To fix this one needs to register actions (and optionally data types) supported by the drag target. This can be done during the dragstart event which is fired on the drag target:

Including data handling to our drag & drop example is a three step process. First, we need to add the data type to the dragTarget's event by passing an arbitrary ID string to the addType() method:

The final step is to add code for our target to handle the incoming data. The following code block appends all the dropped children to the end of the list:

Class Support

In qooxdoo, classes are created using the qx.Class.define() method. This is referred to as a "closed form" of class declaration because all of the class's properties must be set in the class's constructor. It accepts a string for the class name, and map object for setting its attributes such as the constructor, destructor, static/instance members and methods. The following code creates a child class, defines a static variable and a member function which accesses the static variable:

qooxdoo's class support incorporates other OO features including Interfaces, Static, Abstract and Singleton classes, as well as mixins, which is the qooxdoo name for a class module. A mixin can have all the things a class can have: properties, destructor, constructor and members. They contain extra functionality you can include in a class much like an include directive in a Web page. There are two ways to include a mixin into class, in the constructor and at runtime:

Note that the include key can contain either a reference to an single mixin, or an array of mixins.

The qooxdoo Communication Framework

The qooxdoo Framework offers two ways to communicate with the server: simple Ajax calls and Remote Procedure Calls (RPC).

Simple Ajax Calls

In most cases, the qx.io.remote.Request object will meet your needs. In qooxdoo, server calls are event based. It currently supports communication by XMLHttp, Iframe or Script.

To perform a server call you need to create a new instance of Request, passing in three arguments:

• URL: any valid http/https/file URL
• Method: you can choose between POST and GET.
• Response mimetype: what mimetype the response should be. text/javascript and application/json mimetypes will be directly evaluated. As content you will get the return value.

Here's a simple example that retrieves a plaintext response from the server:

Remote Procedure Calls

RPC is a more advanced mechanism for direct calls to server-side methods such as those found in client/server applications. The qooxdoo RPC is based on JSON-RPC. qooxdoo currently provides server back-ends for Java, PHP and Perl projects. A third party Python back-end library is also available.

To make remote calls, you need to create an instance of the qx.io.remote.Rpc class, rather than a Request. Once you have an Rpc instance, you can make server calls:

You can also make synchronous calls using the qooxdoo RPC, but you should think twice before doing so because they do block the browser while the call is in progress.

Find a programming school near you