Использование скриптов mootools с приложением gwt

Question

Моя проблема - создать анимацию на Composite, которая запускается при загрузке данных. Я сделал анимацию на обычных div для тестов, используя 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:

    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');


});

Это работает. Это анимация стрелки сверху вниз.

Но когда я пытаюсь использовать этот скрипт в приложении gwt с элементами, имеющими класс "LoadDataWidget" и id "стрелка", он не работает.

И есть Java-код GWT Composit, который я пытаюсь анимировать:

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);
    }
}

Есть ли проблема с событием domready? У вас есть какие-либо подсказки для решения этой проблемы?

Answer 1

Ваше событие domready срабатывает после загрузки html и готовности DOM, но до загрузки и выполнения GWT.

Попробуйте вызвать вашу функцию через JSNI после загрузки GWT.