Question

我正在尝试将RaphaelJS文件嵌入到qooxdoo小部件中。 RaphaelJS是一个用于JavaScript的SVG绘图库，它需要在绘制之前绑定到HTML <div>。为此，我调用new qx.ui.embed.Html("<div id='raphael'></div>"）并将其添加到我的小部件中。之后，我应该通过将div ID传递给它来初始化Raphael。

问题是<div id='raphael'>在qx.ui.embed.Html()构造函数调用之后没有提交到DOM模型（即，没有创建真正的DOM元素）。确实推迟了DOM元素的创建，直到将小部件绘制到屏幕上。我设法捕获了小部件的appear事件，之后，元素的存在得到保证，我可以初始化Raphael库并做一些绘图。

这种方法假设我必须从appear事件处理程序中运行我的所有应用程序逻辑，这可能不是我想要的。有没有其他方法可以在主应用程序流中使窗口小部件处于准备好绘图状态？

Answer 1

您可以做的是创建自己的小部件RaphaelWidget.js：

qx.Class.define("myApp.RaphaelWidget",
{
  extend : qx.ui.core.Widget,

  construct : function()
  {
    this.base(arguments);

    this.addListener("appear", this._onAppear, this);
  },

  members :
  {
    /**
     * Overwritten from qx.ui.core.Widget.
     */
    _createContentElement : function()
    {
      return new qx.html.Element("div", {
        overflowX: "hidden",
        overflowY: "hidden",
        border: "1px solid #aaa"  // just for debugging
      }, {"id": "canvas-raphael"});
    },

    _onAppear : function()
    {
      var paper = new Raphael(document.getElementById('canvas-raphael'), 250, 250);
      var circle = paper.circle(100, 100, 80);
    }
  }
});

然后在您的Application.js：

中进行操作

var raphael = new myApp.RaphaelWidget();
raphael.setWidth(250);
raphael.setHeight(250);
this.getRoot().add(raphael);

现在，您可以在这个新的小部件类中开发Raphael特定代码。

Answer 2

强制渲染/ DOM操作操作在qooxdoo中称为“刷新”。例如。 Richard的解决方案中的qx.html.Element有一个.flush()方法。您可能想尝试这一点，或在API documentation搜索“flush”这个词。

据说冲洗是最后的手段，不应过度使用，因为这会严重降低性能。在进行JavaScript时，不应回避异步编程。甚至你的“main”方法也是一个回调，在某个时间点从qooxdoo运行时调用。

有几个qooxdoo贡献集成了像Rafael这样的第三方库。对于这样做的更惯用的解决方案，请参见例如QxDyGraphs（部分。__addCanvas方法），一个集成Dygraphs JS库的贡献。

如何使用qx.ui.embed.Html强制创建DOM元素？

2 个答案: