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

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

We try hard to enable a “sexy” look and feel for Rich Ajax Platform (RAP) applications. However, without rounded borders and gradients you can hardly create a website that look modern. Take this dialog as an example:

It looks so much better with rounded borders on Shell, Control and with these Button gradients:

The latter screenshot has been taken from the current RAP development stream. These features were challenging to implement but we eventually came up with a solution. The interesting part is that it’s not image based. Instead of creating a bunch of images (one for every corner and side), all you have to do is define your border radius in the CSS style sheet.

How does it work?

We are using vector graphics (SVG/VML) in the browser. This works with all browsers supported by RAP (FF2+, IE6+, Safari 3.1+, etc.) without any add-ons. Check it out on our examples demo.

And how does the CSS look like? For gradients we followed the CSS syntax implemented by Webkit-based browsers as Safari and Chrome. Besides a start color and an end color, you can also define any number of intermediate steps. We only support vertical linear gradients in the first version, but this will change. By the way, we proposed to use the same syntax for styling in e4.

  background-image: gradient(
    linear, left top, left bottom,
    from( #ffffff ),
    color-stop( 48%, #f0f0f0 ),
    color-stop( 52%, #e0e0e0 ),
    to( #cccccc )
  );

For rounded borders we followed the CSS 3 syntax. You can set rounded borders using the new border-radius property (even a different radius for every corner is possible).

  border: 2px solid #005092;
  border-radius: 6px;

Both features are available in the RAP CVS and will be included in the 1.3 M1 release shipped in August.

Enjoy!

Tags: e4, rap, styling, swt, theming