Блог

Я пытаюсь понять, как заставить что-то подобное работать:

 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 игнорирует эффекты

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

 button.getContainerElement().getDomElement()
  

это еще не появилось в дереве DOM. Итак, возвращаемое значение функции равно null . В Qooxdoo есть очередь рендеринга, поэтому проявление того, что вы делаете в программе, в основном немного задерживается. Используйте событие ‘appear’, чтобы обойти это:

 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 следует писать асинхронно, когда это возможно, то вышесказанное, вероятно, является правильным решением.

Вы также можете захотеть взглянуть на

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