Using Effects and Animation with Google Web Toolkit

This post builds on the previous post ‘GWT: Order in Chaos’ and shows an example of the GWT-FX library. GWT-FX is a third party library for the Google Web Toolkit and allows us to apply effects such as fades, movement, transitions, animation and easing to GWT objects (Both widgets and elements).

The following example assumes a basic knowledge of GWT, setting up a new GWT project and debugging/running an application. The GWT Home page details everything needed to get up and running with GWT.

Before we can use the GWT-FX library we must first download the jar archive from the project home page and include it in the class path of out project.

For simplicity all of the code used in this example is executed from the Main Entry Point’s onModuleLoad() method. The full code is shown below and then explained in full detail.

	Fade fadeEffect;
    public void onModuleLoad()
    {
        Image gwtLogoImage = new Image("logo-gwt.png");
        Button triggerEffectBtn = new Button();
        triggerEffectBtn.setText("Fade Image");
        VerticalPanel container = new VerticalPanel();

        fadeEffect = new Fade( gwtLogoImage.getElement() );
        fadeEffect.setDuration(2);

        container.add(gwtLogoImage);
        container.add(triggerEffectBtn);

        RootPanel.get().add(container);

        triggerEffectBtn.addClickHandler( new ClickHandler()
        {
            public void onClick(ClickEvent event)
            {
                fadeEffect.play();
            }

        } );
    }

The fadeEffect variable represemts a Fade object. A Fade effect is used to tween the opacity of a user interface element from one value to another over time. In this example we will fade out an image over two seconds. The Fade variable is defined outside the onModuleLoad method because we need to refer to it later on from an anonymous class.

	Fade fadeEffect;
    public void onModuleLoad()
    {
        ...

Next we set up our user interface widgets. gwtLogoImage creates a new image element with the source url ‘logo-gwt.png’. The source url used here is relative, which means it needs to be available in the root directory of the web application. Full url’s may also be used as the source. triggerEffectBtn creates a button element which will be used to trigger our effect. Finally a VerticalPanel is created to group our image and button into a vertical layout.

		...
        Image gwtLogoImage = new Image("logo-gwt.png");
        Button triggerEffectBtn = new Button();
        triggerEffectBtn.setText("Fade Image");
        VerticalPanel container = new VerticalPanel();
		...

Next we instantiate our Fade object. We set ‘gwtLogoImage.getElement()’ as the argument for our constructor. getElement() returns a native HTML object containing a widget. In this case, the HTML image element used to load our GWT logo image. By supplying a HTML element in the Fade constructor we bind the element to the effect. Put differently; our Fade effect will be applied to our image element because we refererred to it when instantiating the Fade object. fadeEffect.setDuration(2) instructs our fade effect to last for two seconds.

		...
        fadeEffect = new Fade( gwtLogoImage.getElement() );
        fadeEffect.setDuration(2);
        ...

Next we add our user interace widgets to our container. ‘RootPanel.get().add(container)’ Adds our container to the body element of our host HTML page.

		...
        container.add(gwtLogoImage);
        container.add(triggerEffectBtn);

        RootPanel.get().add(container);
		...

Finally we add a click handler to our button. The onClick method will be called when a user clicks on the button. When this happens we call the play() method on our Fade effect object; which will cause our image to fade out over two seconds. GWT-FX also includes an effect called NShow–the opposite to Fade–as well as many other effects.

	...
		triggerEffectBtn.addClickHandler( new ClickHandler()
        {
            public void onClick(ClickEvent event)
            {
                fadeEffect.play();
            }

        } );
    }
    ...