how to make qooxdoo effects work?

Question

I'm trying figure out how to make something like this work:

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

This is the entire Application.js Just trying to do an effect on something without luck.. It's like qooxdoo is ignoring the effects

Tobi Oetiker · Accepted Answer · 2011-06-14T06:49:22.397

The problem is the DOM element. As you execute

button.getContainerElement().getDomElement()

it has not yet appeared in the DOM tree. So the return value of the function is null. Qooxdoo has a rendering queue, so the manifestation of what you do in the program is mostly delayed a bit. Use the 'appear' event to work around this:

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

The bit with disabling and enabling the button is just to show off ... it will be so fast that no one will notice.

There are also several *.flush() methods in the framework where you can force the rendering to happen immediately, so calling them (the right ones :-)) might also be an option ... but since JS should be written asynchronously whenever possible, the above is probably the right thing todo.

score 1 · Answer 2 · answered Jun 14 '11 at 08:30

1

You also might want to look at

the corresponding manual page
the code of the animation demos, e.g. this (although I concede they mostly hoook the animation to user actions)

answered Jun 14 '11 at 08:30

ThomasH

22,276
13
61
62

how to make qooxdoo effects work?

2 Answers2