как заставить работать эффекты qooxdoo? - PullRequest
Новая
       9

как заставить работать эффекты qooxdoo?

2 голосов
/ 14 июня 2011

Я пытаюсь понять, как сделать что-то вроде этого: 

qx.Class.define("effects.Application",
{
extend : qx.application.Standalone,
members :
{
main : function()
{
    // Call super class
    this.base(arguments);

    // Enable logging in debug variant
    if (qx.core.Environment.get("qx.debug"))
    {
        // support native logging capabilities, e.g. Firebug for Firefox
        qx.log.appender.Native;
        // support additional cross-browser console. Press F7 to toggle visibility
        qx.log.appender.Console;
    }

    var button = new qx.ui.form.Button("First Button");
    var fadeToggle = new qx.fx.effect.core.Fade(button.getContainerElement().getDomElement());
    fadeToggle.set({
       from : 1.0,
       to : 0.0
    });

    var doc = this.getRoot();
    doc.add(button);

    button.addListener("execute", function() {
        fadeToggle.start();
    },this);
}
}
});

Это весь Application.js. Просто пытаюсь создать эффект на что-то без везения. Это как qooxdoo игнорируетэффекты

Ответы [ 2 ]

4 голосов
/ 14 июня 2011

Проблема в элементе DOM. Как вы выполняете 

button.getContainerElement().getDomElement()

он еще не появился в дереве DOM. Таким образом, возвращаемое значение функции null. Qooxdoo имеет очередь рендеринга, поэтому проявление того, что вы делаете в программе, в основном немного задерживается. Чтобы обойти это, используйте событие «появляются»: 

var button = new qx.ui.form.Button("First Button").set({
    enabled: false
});
var doc = this.getRoot();
button.addListener('appear',function(){
    var fadeToggle = new qx.fx.effect.core.Fade(
        button.getContainerElement().getDomElement()
    ).set({
        from : 1.0,
        to : 0.0
    });
    button.addListener('execute',function(){
        fadeToggle.start();
    });
    button.setEnabled(true);  
});

Бит с отключением и включением кнопки просто для того, чтобы хвастаться ... это будет так быстро, что никто не заметит.

В фреймворке также есть несколько методов * .flush (), где вы можете заставить рендеринг происходить немедленно, поэтому их вызов (правильные :-)) также может быть вариантом ... но поскольку JS должен написано асинхронно всякий раз, когда это возможно, вышеупомянутое, вероятно, является правильным решением.

1 голос
/ 14 июня 2011

Вы также можете посмотреть

  • соответствующую справочную страницу
  • код демонстрационных анимаций, например this (хотя я допускаю, что они в основном переключают анимацию на действия пользователя)
...