How to replace element with my GWT widget?

后端未结

关注

 5  455

Is it possible to replace known html element with my widget component? (Emphasis on the word \'replace\', I don\'t want to put the widget in th

相关标签:

5条回答

伪装坚强ぢ

2021-02-02 02:02
I agree with markovuksanovic - you should consider DOM manipulation on a "higher level". For example, the functionality you need is provided via the InsertPanel interface, which FlowPanel implements:
```
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);
```
As you can see, this code is much more readable (at least to me), you don't manipulate the DOM directly (referencing via ids and such). Of course, there are places where direct DOM manipulation is beneficial (optimizing, most notably), but for the most part, I'd avoid juggling Elements, ids and such :) (at least in GWT)
0 讨论(0)
发布评论:

提交评论
- 加载中...
滥情空心

2021-02-02 02:03
It seems that calling widget.onAttach() after inserting widget into DOM does the trick.
```
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();
```
Credit goes to André at Google Web Toolkit group.

I still wonder though why there is no RootPanel.addAndReplaceElement(Widget, Element), similar to HTMLPanel.addAndReplaceElement(Widget, Element).
0 讨论(0)
发布评论:

提交评论
- 加载中...

清酒与你

2021-02-02 02:10

The solution is probably not so much different from what Igor suggested. I'd write something like this:

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

0 讨论(0)

时光说笑

2021-02-02 02:13
I would suggest you try something like this...
```
<body>
  <a id="tmpEl" />
</body>
```
then in somewhere create a widget (e.g. textBox widget)
```
TextBox tb = new TextBox();
```
After you have created the widget you can get it's DOM object by using tb.getElement() (I'm not sure that's the correct method name, but it's definitely something like getElement)

After that you could use
```
Element parent = Document.getElementById('tmpEl').getParent();
parent.removeChild(Document.getElementById('tmpEl'));
parent.appendChild(tb.getElement());
```
One more thing that add() does is call Widget.onAttach() on the widget that is being added to the panel. onAttach does some work to register the widget to receive events.

You could try calling tb.onAttach(); It might also be necessary to call RootPanel.detachOnWindowClose(tb); (as mentioned in a previous post)
0 讨论(0)
发布评论:

提交评论
- 加载中...

无人共我

2021-02-02 02:29

I'm doing something pretty similar. I'm reading the contents of a <div>; using the elements found in the <div> to build an animated menu which then replaces the original content. The animated menu is a widget.

It seems to work...

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

0 讨论(0)