Consider this:

I measured the time needed to create 200 Buttons in RAP 1.4 and RAP 1.5M3, and it shows a considerable performance boost (at least for the browsers i tested). One reason for this is that we changed from quirksmode to standard rendering in IE9, which among other things, finally allowes us to use its new HTML5-features (in this case SVG and CSS3). I expect another little boost with IE10, which has even more CSS3 support.

However, what i did not expect was a significant improvement in any other browser, in this case Google Chrome. This is likely due to the implementation of the JSON-based RAP-protocol. It remains to be seen how this develops, as work on the protocol is still going on. Currently eval() is used to parse the JSON. In the final release we will probably use other methods, such as the native JSON-parser present in many modern browser. Older browser may gain only little or no performance.

What is really awesome though is the improvment of the GC/SWT-Canvas performance in IE9 (and only IE9). Drawing in browser (without any plug-ins) used to be a real pain. While other browser adopted the HTML5-Canvas and SVG standard very early on, Microsoft stubbornly stuck to its horribly old VML implementation, making my work needlessly hard. One of the main problems with VML is that it gets exponentially slower the more elements you draw, from about 200 elements on it’s almost painful to watch. But this is 2011, HTML5 is all the buzz, and even MS could no longer ignore it. IE9 now has a decent HTML5-Canvas implementation that we use in RAP 1.5, and it shows:

The fine print:
These results were achieved on my Windows 7/64bit Intel i5 2,4 GHZ laptop. No other systems or browser were tested. Measurement was done using JavaScript. The 32bit version of IE9 was used. I did only 3 iterations each, but the deviance was relatively small. The results in the final RAP 1.5 release my be very different due to ongoing development. You can check out the code i used here.

Tags: canvas, CSS3, html5, IE9, Internet Explorer, rap

RAP already offers advanced styling features including customizable cross-browser gradients, rounded borders and animations. We now complete this feature set by introducing advanced, configurable shadows, giving your RAP application a modern, subtle 3D-look.

Unlike other frameworks, RAP does not rely on pre-rendered images to create those effects. Instead it does all the rendering itself based on CSS declarations, using multiple browser-native technologies for drawing. Up until now this always involved several complex vector-graphic operations. However, this is 2011, and support for mordern web standards is becoming widely available. By using the CSS3 capabilities of modern browsers, we no longer need to use any vector graphics in Safari, Google Chrome and Firefox 4+. Internet Explorer 9 will follow soon.

Of course, RAP will continue to support all its theming features (including shadows) in browsers without CSS3 capabilities. Shadows and CSS3-support will be part of RAP 1.4 M7, coming on May 7.

Tags: css, CSS3, html5, rap, shadows, theming

Your early Christmas present from EclipseSource: a custom-widget that displays, controls and reacts to a Google-Map. While there have been similar widgets before, this one is the first (as far as I know) that runs in RAP and RCP without any changes.

[ Download ] (You also need RAP 1.4M4.)

Creating custom-widgets for RAP is no easy task. You need to be familiar not only with Java and JavaScript, but with a lot of RAP’s complex internals as well. It’s a lot of work, even if you simply want to integrate an existing javascript-application or library.

That’s now a lot easier, using the much improved browser-widget. We recently added some missing features, tested different scenarios and fixed known bugs. This makes it an ideal platform to insert javascript-based applications with almost no overhead for the programmer. You simply call JavaScript from Java and vice versa! And the bonus: these custom-widgets can (under certain conditions) also run in RCP, as demonstrated here.

The widget is currently hosted at github, so feel free to check it out, use it in your application or fork it to add your improvements. Also check out Holger Staudachers carousel widget for RAP to see another example.

“Traditional” custom widgets for RAP are by no means obsolete with this, as they still have certain advantages (slightly better performance, themeability, can use rap client components). But for the cases mentioned above, the browser widget can make your life much easier!

Happy Holidays!

Tags: eclipse, Google Maps, indigo, rap, rcp

If you ever wondered if RAP runs on the iPad, the answer is now YES. We fixed a number of iPad-related bugs for 1.4M2, and now it runs (almost) trouble-free. You can even start your RAP-application in fullscreen, making it look more like a native app. See for yourself with this video:

Tags: indigo, IPad, rap

Animations are an integral part of most modern UIs, including many “web 2.0″-applications and websites. (Just watch carefully when opening google.com.) They have become so common that we even subconsciously miss them if they aren’t there. The transition between two states of an UI should never be sudden, but gradually (albeit quickly), as we are used from real life. If done right, this increases usability without attracting too much attention or slow down the user. Ideally one isn’t even aware of the effect, it only feels more organic and natural.

Therefore we now integrated the core functionality needed for such animations into RAP. Since the existing client-implementation of RAP was not written with such a feature in mind, it was considerable effort to do this without changing much of the existing code. And for the same reason, there are currently some limitations on what we can do with this feature. However the groundwork is done, and we hope to expand on that in the future.

Just like with gradients and rounded borders before, you can expect the number of supported widgets and effects to grow. You should keep in mind though, that this feature is meant only for subtle animations that seamlessly integrate into the UI. We can and will not turn RAP into some kind of multimedia powerhouse where everything is moving all the time.

For now, “Button”, “Menu”, “ToolTip” and “Shell-DisplayOverlay” each have one effect that can be enabled. This is done using RAPs CSS-theming, not Java, as this kind of animations are mainly eye-candy and don’t add any functionality. The syntax for this is based on a small and easy-to-use subset of the CSS3 working draft for animations. For example:

Button[PUSH] {
  animation: hoverIn 350ms ease, hoverOut 600ms ease-in;
}

This generates a faded hover-effect for buttons.

Animations work on all browser supported by RAP, but might not run smoothly on very old machines. They will be part of the upcoming 1.3M7 build. To see what we can do for now, check out the new “Theming”-Page in our examples-demo.

Tags: new and noteworthy, rap, theming