RAP 2.0 Countdown (5/5)

Today’s our big day: RAP 2.0 is being released. Here’s my last post in this RAP 2.0 series. In my first post, I wrote about the new JSON protocol and how it connects the half objects on client and server. The question is, can you leverage this protocol for custom add-ons? You can, using the new Remote API. I saved this topic until last. It’s my favorite because I’m excited about its potential to make RAP more extensible.

Custom Widgets with RAP 2.0

custom RAP 2.0 Countdown (5/5)

There are several alternatives to writing real custom widgets in RAP: you can compose widgets out of existing ones, draw on a Canvas, or embed mashups in a Browser widget. However, for advanced widgets you don’t get around writing a “real” custom widget with a server part and a client part that are connected by the protocol.

This has become a lot easier with RAP 2.0, since you don’t have to understand the internals of RWT anymore. The new Remote API allows both parts of an object to communicate with each other over the JSON protocol. In fact, its methods are direct representations of the protocol operations such as set, call, etc. Just like the protocol itself, this API is not restricted to widgets, it can be used to synchronize any kind of objects.

The Remote API at a Glance

Let’s have a quick look at this API. The central interface is called RemoteObject. As the name says, it represents the corresponding object on the client. When an instance of the server-side object is created, we first need to create a client-side object as well and synchronize with this object. We do so by creating a RemoteObject. The constructor of our custom widget would be a suitable place to do so:

Connection connection = RWT.getUISession().getConnection();
remoteObject = connection.createRemoteObject( "charts.PieChart" );

This will render a create message that instructs the client to create an object of the type charts.PieChart. When a property is changed on the custom widget, we need to pass the new value to the remote object:

remoteObject.set( "radius", 200 );

When the custom widget is being disposed of, the remote object has to be destroyed as well:

remoteObject.destroy();

There are also methods for the other protocol operations and a handler to receive updates from the client. I don’t want to go through all details here, just give you a rough idea how the Remote API looks like.

JavaScript API

We also need a client implementation to display your custom widget and allow users to interact. For the web client, this has become a lot easier. For the first time ever, RAP 2.0 provides a minimal JavaScript API. It’s minimal because it just contains the methods needed to hook your JavaScript code into the RAP client. You don’t have to care about RAP’s client library anymore. Use whatever JavaScript library you like.

To look at an example, let’s see how the client notifies the server of an event:

var remoteObject = rap.getRemoteObject( this );
remoteObject.notify( "Selection", { "index": index } );

Of course, it uses a remote object to do so, and its API is quite similar to the Java RemoteObject.

Let’s Create Widgets!

With this new Remote API, custom widgets are no longer reserved for experts. Writing them is easier, requires less code, and it’s definitely more fun. That’s what we found when we employed the Remote API for existing components. As an example, switching the clientscripting component to the Remote API, allowed us to get rid of more than 30% of the Java code in this component!

Tim just updated his CKEditor widget for RAP to use the new API. You can try it out in the online demo. If you’re looking for a rich text editor for RAP, here’s a 2.0-compatible version.

During the last days, I’ve created a prototype for a charting widget (the one seen above) based on the fascinating d3 toolkit. You can play with it already in the online demo. It’s just a spike, but I’m going to publish a stable version soon and announce it in this blog.

The new Remote API is still provisional and might change slightly over time. We’ve already published it anyway to allow others to start experimenting. I’m looking forward to more custom widgets becoming available for RAP. Let us know about your custom widgets! Contributions are welcome in the RAP Incubator project.

Thank you for following me on this tour through the new RAP. RAP 2.0 is now available for download. I hope you enjoy working with it.

You may also like...

Share this Post

Twitter10
Google+4
LinkedIn
Facebook

Tags

4 Responses to “RAP 2.0 Countdown (5/5)”

  1. hangum says:

    very nice. thanks a lot.

  2. D2002 says:

    I’ve just migrate from RAP 1.5 to 2.1 and there is a real improvement in term of performance (my server is a Raspberry with tomcat 6)

    The new Custome Widget API looks very exiting.
    Is there a tutorial available or, at least, an url to download you chart example.
    Thanks in advance

  3. Ralf Sternberg says:

    Happy to hear that. There’s still room for improvement and future RAP versions will bring more performance gain.

    The chart example is not yet public, as soon as I find the time to polish the code I will publish it on github. However, the CkEditor [1] may serve as an example for a custom widget. If you need help, please contact us on the RAP forum [2].

    [1] https://github.com/eclipsesource/rap-ckeditor
    [2] http://www.eclipse.org/forums/eclipse.technology.rap

  4. D2002 says:

    Thanks for the advices. I have not realised that ckeditor example has been updated to RAP 2.0.

4 responses so far

Written by . Published in Categories: EclipseSource News, Planet Eclipse