代码之家 › 专栏 › 技术社区 › Jaroslav Záruba

如何用我的GWT小部件替换元素?

widget gwt

11

Jaroslav Záruba · 技术社区 · 15 年前

有可能吗代替我的小部件组件中已知的html元素?(强调“替换”一词,我不想把小部件 在里面 这一要素:

<body>
  <img />
  <div />
  <a id="tmpEl" />
  ...
  <img />
</body>

会变成

<body>
  <img />
  <div />
  <div class="gwt-panel">...</div>
  ...
  <img />
</body>

我试过这样的。。。

tmpEl.getParentElement().replaceChild(myPanel.getElement(), tmpEl);

...但是结果的DOM元素是“聋子”,即它们没有收到点击事件。(为了使这项工作顺利进行,我可能不得不打电话 根面板。get()。采用(小部件) ,但该方法不可访问。)

有一秒钟我想 HTMLPanel.addAndReplaceElement 可能是答案,但只有当“占位符”元素是HTMLPanel小部件的(直接)子元素时,这才有效。这显然不是我的情况(

请注意,我只知道该元素的id,而不是创建它。简单地说:我需要 问题到底是怎么说的 .

至于“更高级别上的DOM操作”:如果DOM允许我放置小部件而不是占位符元素,我会很高兴地在尽可能高的级别上操作DOM。

5 回复 | 直到 15 年前

1

5

Jaroslav Záruba 15 年前

看来 小装置。Onatach() 在将小部件插入DOM之后,就完成了这个任务。

class MyWidget extends Composite
{
  ...

  public void attach()
  {
    /* Widget.onAttach() is protected
     */
    onAttach();

    /* mandatory for all widgets without parent widget
     */
    RootPanel.detachOnWindowClose(this);
  }
}

tmpEl.getParentElement().replaceChild(myWidget.getElement(), tmpEl);
myWidget.attach();

这要归功于安德烈 Google Web Toolkit group .

我仍然想知道为什么没有 根面板。addAndReplaceElement(小部件,元素) 类似 HTMLPanel.addAndReplaceElement(Widget, Element) .

2

3

Chris Lercher 15 年前

解决方案可能与伊戈尔的建议没有太大不同。我会这样写:

RootPanel rootPanel = RootPanel.get();
Element anchorElement = DOM.getElementById("tmpEl");
Anchor anchor = Anchor.wrap(anchorElement);

rootPanel.remove(anchor);
rootPanel.insert(new HTML("<div class='gwt-panel'>...</div>", 0);

3

0

Community CDub 8 年前

我同意 markovuksanovic -你应该把DOM操作放在一个更高的层次上。例如,您需要的功能是通过 InsertPanel 接口,哪个 FlowPanel 实施:

FlowPanel mainPanel = new FlowPanel();
Hyperlink link = new Hyperlink("Something cool");
mainPanel.add(link);
mainPanel.add(new Label("Bla bla"));

// Now we want to replace the first element of the FlowPanel with a TextBox
// We can do that by its index...
mainPanel.remove(0);

// ...or Widget instance
mainPanel.remove(link);

// Now we add a TextBox at the beginning
mainPanel.add(new TextBox(), 0);

正如您所看到的,这段代码更具可读性(至少对我来说),您不需要直接操作DOM(通过ID等引用)。当然,有些地方直接DOM操作是有益的(最显著的是优化),但在大多数情况下,我会避免处理元素、ID等:)(至少在GWT中是这样)

4

0

caffeinate_me 14 年前

我也在做类似的事情。我在读一本书的内容 <div> ; 使用在 <部门> 创建动画菜单,然后替换原始内容。动画菜单是一个小部件。

这似乎有效。。。

// DisclosurePanel is a widget
DisclosurePanel accordion_panel = processAccordion(accordionElement);
// accordionElement is found in the DOM (it's a com.google.gwt.user.client.Element)
// clear what was there
accordionElement.setInnerText("");
// add the widget in
RootPanel.get(accordionElement.getId()).add(accordion_panel);

5

-1

markovuksanovic 15 年前

我建议你试试这样的。。。

<body>
  <a id="tmpEl" />
</body>

然后在某处创建一个小部件(例如文本框小部件)

TextBox tb = new TextBox();

创建小部件后,可以使用tb获取其DOM对象。getElement()

之后你可以使用

Element parent = Document.getElementById('tmpEl').getParent();
parent.removeChild(Document.getElementById('tmpEl'));
parent.appendChild(tb.getElement());

add()所做的另一件事是调用Widget。正在添加到面板的小部件上的onAttach()。要注册一些事件,Tachonat不起作用。

你可以试着打电话给tb。onAttach();可能还需要调用根面板。detachOnWindowClose(tb);(如前一篇帖子所述)