Question

My problem is make an animation on Composite which is started when data is loading.
I made animation on normal divs for tests using html:

<div class="LoadDataWidget">
    <div id="arrow" class="greenArrow"></div>
</div>


.LoadDataWidget {
    width: 995px;
    height: 591px;
    background-image: url('images/ladowanie-danych.png');
    background-repeat: no-repeat;
    position: relative;
    margin: 0px auto;
    visibility: hidden;
}

.LoadDataWidget .greenArrow {
    width: 102px;
    height: 141px;
    background-image: url('images/ladowanie-danych-strzalka.png');
    background-position: bottom;
    background-repeat: no-repeat;
    position: absolute;
    left: 500px;
    top: 205px;
}

JavaScript+mootools animation script:

    window.addEvent('domready', function(){

        var effect = new Fx.Tween('arrow', {duration: 800}),periodical;

        // Create the function wich will run the effect
        var fx = function() {
            effect.start('height', '141').chain(function(){
                effect.start('height', '161');
            });
            // return this function, so you could do fx() which returns fx,
            //or fx()()() which still returns fx and runs the function 3 times
            return fx;
        };

        fx().periodical(1700);

        // assing 'singleImage' variable to the image tag with the 'image' ID
        var singleImage = $$('.LoadDataWidget');

        // set a bunch of CSS styles to the aforementioned image
        singleImage.set('styles', {
            'opacity': 0,
            'visibility': 'visible'
        });

        // fade in the image
        singleImage.fade('in');


});

It works.
It is an animation of arrow from top to bottom.

But when i try to use this script in gwt application with elements which have class “LoadDataWidget” and id “arrow” it doesn’t work.

And there is Java code of GWT Composit which I try to animate:

import com.google.gwt.user.client.ui.SimplePanel;

public class LoadDataWidget extends SimplePanel {

    public LoadDataWidget() {
        setStyleName("LoadDataWidget");
        SimplePanel arrow = new SimplePanel();
        arrow.setStyleName("greenArrow");
        arrow.getElement().setId("arrow");
        setWidget(arrow);
    }
}

Is there problem with domready event? Have you got any clue for solve this problem?

Answer 1

Your domready event triggers after html is loaded and DOM is ready, but before GWT is loaded and executed.

Try calling your function via JSNI after GWT is loaded.