RAP 2.0 Countdown (5/5)

February 11, 2013 | 4 min Read

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.

[ Using RAP in an industrial setting? Our technology subscription secures your investment for years to come. | More on RAP from our blog: RAP technology overview ]

Custom Widgets with RAP 2.0

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.

[ This is the last post in the RAP 2.0 Countdown series. Go back to part 4. ]

Ralf Sternberg

Ralf Sternberg

Ralf is a software engineer with a history as Eclipse committer and project lead.

In recent years, he devoted himself to JavaScript technologies and helped pulling off …