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

Question

我正在尝试嵌入 RaphaelJS将纸张放入 qooxdoo 小部件。 RaphaelJS 是 JavaScript 的 SVG 绘图库，它需要绑定(bind)到 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 特定代码。