Introduction

This page will describe GWT-FX v0.5.0.0 (which will be the version released around GWT 2.0 release date - or you can download now from the trunk)

For the current version, v4.0.0, click here)

What does GWT-FX do

GWT-FX provides a native effects library to GWT applications - which allows GWT to optimise code size aggressively reducing delay to application start.

Effects are based upon changes in CSS properties over time and harnesses GWT 1.5's new Animation class to ensure a 2 second effect only takes 2 seconds.

A number of built in effects are provided to abstract away from CSS morphing, for example Fade, Resize, but equally accessible is the base NMorphStyle class which can read two definitions from a CSS style sheet and morph between them.

Progression of effects takes place linearly unless an alternative transition physics is given, for example, elastic, easein, easeout etc. A number of these are provided, but extension is readily made.

Provides a simple GWT style event handling system for handling, pre, post, during and cancelled events for an effect.

This enables you to do things such as the following:

What's new in this version?

GWT-FX becomes a whole lot less obtrusive in your code; you can reuse effects, or use the same effect to manage multiple elements.

Previously, all effects were based on adding widgets and effects to an NEffectPanel; whilst you can still do that, you can now also/instead do the following:

// Create effect object
Fade theFade = new Fade(someWidget.getElement());
// Fade the component
theFade.play();

...you can also re-use effects

// Create effect object
Fade theFade = new Fade(someWidget.getElement());
// Fade the component
theFade.play();
// Update the effect to work on a new component
theFade.setEffectElement(someOtherWidget.getElement());
// Fade the new component
theFade.play()

...or use the same effect on multiple components at the same time

// Create effect object
Fade theFade = new Fade(someWidget.getElement());
// Add another component to manage
theFade.setEffectElement(someOtherWidget.getElement());
// And another component to manage
theFade.setEffectElement(yetAnotherWidget.getElement());
// Fade the 3 components
theFade.play()

How do I upgrade to this version

You don't need to do anything, if you don't want to. Your existing code will still work as NEffectPanel is supported at this point.

Alternatively, you can move your effects away from the NEffectPanel and it becomes more streamlined and efficient.

In future versions, the NEffectPanel and associated aspects might be deprecated and later still removed. Supporting both models does increase the size of code, not by much though.

What's the motivation?

In a number of applications I have built, I've needed to create some fancy effects for the screen. I started off using a JSNI wrapper to existing effect libraries, for example the scriptaculous library. The problem is code size - you get the size of the library plus the JSNI wrapper.

GWT offers aggressive optimisation of code - stripping out overall unused code and also removing browser specific code that was not necessary to send to a particular browser. Wrapping a JavaScript library in GWT doesn't provide access to this benefit.

Note: we're not at all complaining about or "dishing" scriptaculous here in any way; just that there's a lot of stuff in it that you may not need for your application and you can't remove it (automatically at least).

Moo.fx is a smaller library to start with - some 65K is shrunk. They offer an opportunity to rebuild the core taking out the aspects you don't use to reduce code size, but that is a manual process.

Using a native GWT approach can bring some real space saving - as we've said, GWT will get rid of code you don't use as well as ensuring the payload sent to each browser contains only code for that browse. For example, no need to send two different ways of fading an element (one for IE and one for everyone else), just send the necessary one. Only using one effect? Then just send the code for that effect.

When using gwt-fx, adding a simple reflection to a image that fades into view adds around 12K to your GWT application.

Of course, to make a fairer comparison, we should throw all effects and transitions in. That's what the gwt-fx example application does. It's size is 130-140K for all the effect code, the GWT code and the application's code.

What are the alternatives?

First and foremost, GWT from version 1.5 includes some new Animation classes to allow animations to occur on certain widgets. There is no clear development path for this functionality announced yet.

Here and here are some wrappers to the scriptaculous library.
Gwt-ext has some animations too.
Gwittir also contains an animation approach.