如何使 qooxdoo 效果发挥作用？

发布于 2024-11-15 06:59:03 字数 1002 浏览 5 评论 0原文

我正在尝试弄清楚如何使这样的事情发挥作用：

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 忽略了影响一样

原文

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

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

世界等同你 2024-11-22 06:59:03

问题出在 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 应该在任何时候异步编写可能，以上可能是正确的做法。

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.

回复收藏 0 原文