Promote DOM Element to GWT Pabel

[GoogleCodeExporter]

What steps will reproduce the problem?
1. Panel jsPane = $(".jspPane").as(Widgets.Widgets).panel();
2. jsPane.add($(myWidget));

What is the expected output? What do you see instead?
com.google.gwt.event.shared.UmbrellaException: Exception caught: A widget that 
has an existing parent widget may not be added to the detach list
    at com.google.gwt.event.shared.HandlerManager.fireEvent(HandlerManager.java:129)
    at com.google.gwt.user.client.ui.Widget.fireEvent(Widget.java:129)
    at com.google.gwt.event.dom.client.DomEvent.fireNativeEvent(DomEvent.java:116)
    at com.google.gwt.user.client.ui.Widget.onBrowserEvent(Widget.java:177)
    at com.google.gwt.user.client.DOM.dispatchEventImpl(DOM.java:1351)
    at com.google.gwt.user.client.DOM.dispatchEvent(DOM.java:1307)
    at sun.reflect.NativeMethodAccessorImpl.invoke0(Native Method)
    at sun.reflect.NativeMethodAccessorImpl.invoke(Unknown Source)
    at sun.reflect.DelegatingMethodAccessorImpl.invoke(Unknown Source)
    at java.lang.reflect.Method.invoke(Unknown Source)
    at com.google.gwt.dev.shell.MethodAdaptor.invoke(MethodAdaptor.java:103)
    at com.google.gwt.dev.shell.MethodDispatch.invoke(MethodDispatch.java:71)
    at com.google.gwt.dev.shell.OophmSessionHandler.invoke(OophmSessionHandler.java:172)
    at com.google.gwt.dev.shell.BrowserChannelServer.reactToMessagesWhileWaitingForReturn(BrowserChannelServer.java:338)
    at com.google.gwt.dev.shell.BrowserChannelServer.invokeJavascript(BrowserChannelServer.java:219)
    at com.google.gwt.dev.shell.ModuleSpaceOOPHM.doInvoke(ModuleSpaceOOPHM.java:136)
    at com.google.gwt.dev.shell.ModuleSpace.invokeNative(ModuleSpace.java:571)
    at com.google.gwt.dev.shell.ModuleSpace.invokeNativeObject(ModuleSpace.java:279)
    at com.google.gwt.dev.shell.JavaScriptHost.invokeNativeObject(JavaScriptHost.java:91)
    at com.google.gwt.core.client.impl.Impl.apply(Impl.java)
    at com.google.gwt.core.client.impl.Impl.entry0(Impl.java:242)
    at sun.reflect.GeneratedMethodAccessor50.invoke(Unknown Source)
    at sun.reflect.DelegatingMethodAccessorImpl.invoke(Unknown Source)
    at java.lang.reflect.Method.invoke(Unknown Source)
    at com.google.gwt.dev.shell.MethodAdaptor.invoke(MethodAdaptor.java:103)
    at com.google.gwt.dev.shell.MethodDispatch.invoke(MethodDispatch.java:71)
    at com.google.gwt.dev.shell.OophmSessionHandler.invoke(OophmSessionHandler.java:172)
    at com.google.gwt.dev.shell.BrowserChannelServer.reactToMessages(BrowserChannelServer.java:293)
    at com.google.gwt.dev.shell.BrowserChannelServer.processConnection(BrowserChannelServer.java:547)
    at com.google.gwt.dev.shell.BrowserChannelServer.run(BrowserChannelServer.java:364)
    at java.lang.Thread.run(Unknown Source)

What version of the product are you using? On what operating system?
1.2.1-SNAPSHOT

Please provide any additional information below.
With the above code a Type mismatch occurs: cannot convert from Widgets to 
Panel. Changing the type of jsPane to Widgets is producing the UmbrellaException

Original issue reported on code.google.com by thomas.b...@gmail.com on 14 Dec 2012 at 4:27

[GoogleCodeExporter]

it seems the second line is wrong, you have to pass a widget instead of 
$(widget) which returns a GQuery.

2. jsPane.add(myWidget);

I think it's a mistake when you copied the code because the code should not 
compile otherwise.

Original comment by manuel.carrasco.m on 14 Dec 2012 at 8:07

• Changed state: Accepted

[GoogleCodeExporter]

[deleted comment]

[GoogleCodeExporter]

but I cant add a Widget (e.g. Label) to jsPane because .add only takes types of 
GQuery

Original comment by thomas.b...@gmail.com on 14 Dec 2012 at 8:19

[GoogleCodeExporter]

[deleted comment]

[GoogleCodeExporter]

You are right, the problem is that you have to call widget after panel()

1. com.google.gwt.user.client.ui.Panel jsPane = 
$(".jspPane").as(Widgets.Widgets).panel().widget();
2. jsPane.add(myWidget);

Original comment by manuel.carrasco.m on 14 Dec 2012 at 8:27

[GoogleCodeExporter]

[deleted comment]

[GoogleCodeExporter]

This code works for me (with the last snapshot) 

import com.google.gwt.user.client.ui.*;
import static com.google.gwt.query.client.GQuery.*;

public class Test implements EntryPoint {
  public void onModuleLoad() {
    $("<div class='aa'>Hola</div>").appendTo(document);
    Panel p =GQuery.$(".aa").as(Widgets).panel().widget();
    p.add(new Label("Hello"));
  }
}

Original comment by manuel.carrasco.m on 14 Dec 2012 at 8:33

[GoogleCodeExporter]

Thanks for your help!

The code works, unfortunately not with the .jspPane (it's under plenty of divs)
I get the Exception caught: A widget that has an existing parent widget may not 
be added to the detach list

Don't know if there is any way around it.

But thanks for your effort!

Original comment by thomas.b...@gmail.com on 14 Dec 2012 at 9:22

[GoogleCodeExporter]

Attach a project with enough stuff to reproduce the issue and I will take a 
look.

Original comment by manuel.carrasco.m on 15 Dec 2012 at 12:23

[GoogleCodeExporter]

okay, here is the project.

Original comment by thomas.b...@gmail.com on 15 Dec 2012 at 10:48

Attachments:

• Test.zip

[GoogleCodeExporter]

I see the problem, your html looks like

  <div id="main">
   <div class = "test">
   </div>
  </div>

And your code is:
  RootPanel p1 = RootPanel.get("main"); [1]
  p1.add(new Label("Hello123"));  

  Panel p = GQuery.$(".test").as(Widgets).panel().widget(); [2]
  p.add(new Label("Hello")); 

When you call [2], the 'main' div is promoted to a gwt panel and all its 
content is added to the gwt dettach list in [1]. So you cannot add again the 
div 'test' because it is part of a gwt widget.

You can fix your problem in two ways:
1.- Take the 'test' div out of 'main' one
  <div id="main">
  </div>
  <div class = "test">
  </div>
2.- Detach the 'test' div from the dom using gquery, and promote it to a new 
panel, then add the new panel to the main.

  RootPanel p1 = RootPanel.get("main");
  p1.add(new Label("Hello123"));

  GQuery test = $(".test", p1).remove();
  Panel p = test.as(Widgets).panel().widget();
  p.add(new Label("Hello"));

  p1.add(p);

Original comment by manuel.carrasco.m on 17 Dec 2012 at 9:10

[GoogleCodeExporter]

This issue was closed by revision 6245b30fd12f.

Original comment by manuel.carrasco.m on 17 Dec 2012 at 11:44

• Changed state: Fixed

[GoogleCodeExporter]

Thomas, after thinking a bit more about the issue, I think your use case should 
be handled by gquery and I've released a fix which allows to promote any 
dom-element to a gwt-panel, even when it is inside an already attached one. 

Check out the last snapshot and test your code.

Thanks for reporting
- Manolo

Original comment by manuel.carrasco.m on 17 Dec 2012 at 11:52

[GoogleCodeExporter]

Original comment by manuel.carrasco.m on 22 Dec 2012 at 11:57

• Added labels: Milestone-Release1.3