Wrapping elements, preventing leaks, attach, detach

76 views
Skip to first unread message

Brian

unread,
Oct 5, 2010, 8:30:59 AM10/5/10
to Google Web Toolkit
Hi,

I'm trying to figure out onAttach() onDetatch() onDetachChildren() to
ensure I'm not leaking, but I don't quite get it. Is there a
reference somewhere? Am I best digging through the code to figure out
the flow? I've read the javadocs, but am having a hard time putting
it together.

Got a gwt app, server sends me down a block of html (a table which is
a calendar), gwt client takes the html, and calls setInnerHtml() on a
widget. Perfect.

The server's html has a <div id="foo"></div> that I want to take over,
and shove widgets into.

It'd be nice if I could do:
RootPanel().get("foo").add(...); // but this asserts

What I've done instead is create a wrapper which subclasses Widget,
implements HasClickHandlers, and makes onAttach() public.

Then I create my wrapped Anchor, get the div in the server's html and
append:

Anchor link = new Anchor("click me");
MyWrapper wrapper = new MyWrapper(link.getElement());
wrapper.addOnClickHandler(...);
wrapper.onAttach(); // without this, I can't handle the clicks

HorizontalPanel hp = new HorizontalPanel();
hp.add(link);
// add more to hp

DivElement serverElement =
Document.get().getElementById("foo").cast();
serverElement.appendChild(hp.getElement());

--- This all works great. I've got my panel in the div, and the link
works.

I'm just wondering if I need to do more, as I don't really 'get' the
attach, detach, detachChildren flow.

Thanks.

Thomas Broyer

unread,
Oct 5, 2010, 9:20:27 AM10/5/10
to Google Web Toolkit


On Oct 5, 2:30 pm, Brian <hibr...@gmail.com> wrote:
> Hi,
>
> I'm trying to figure out onAttach() onDetatch() onDetachChildren() to
> ensure I'm not leaking, but I don't quite get it.  Is there a
> reference somewhere?  Am I best digging through the code to figure out
> the flow?  I've read the javadocs, but am having a hard time putting
> it together.
>
> Got a gwt app, server sends me down a block of html (a table which is
> a calendar), gwt client takes the html, and calls setInnerHtml() on a
> widget.  Perfect.
>
> The server's html has a <div id="foo"></div> that I want to take over,
> and shove widgets into.

Have a look at HTMLPanel then.

> It'd be nice if I could do:
> RootPanel().get("foo").add(...);  // but this asserts
>
> What I've done instead is create a wrapper which subclasses Widget,
> implements HasClickHandlers, and makes onAttach() public.
>
> Then I create my wrapped Anchor, get the div in the server's html and
> append:
>
> Anchor link = new Anchor("click me");
> MyWrapper wrapper = new MyWrapper(link.getElement());
> wrapper.addOnClickHandler(...);
> wrapper.onAttach();  // without this, I can't handle the clicks
>
> HorizontalPanel hp = new HorizontalPanel();
> hp.add(link);
> // add more to hp
>
> DivElement serverElement =
> Document.get().getElementById("foo").cast();
> serverElement.appendChild(hp.getElement());
>
> --- This all works great.  I've got my panel in the div, and the link
> works.
>
> I'm just wondering if I need to do more, as I don't really 'get' the
> attach, detach, detachChildren flow.

Not detaching your widgets when you remove them from the document (and/
or on window.unload) will lead to memory leaks in some browsers
(mainly, or maybe even *only*, IE6/7/8).
You'll note that RootPanel, and every widget that has a wrap() static
method, will register itself to be "detached on window close", which
will detach all its children.

But really, what you're trying to do is already there, in HTMLPanel.

Brian

unread,
Oct 5, 2010, 9:40:01 AM10/5/10
to Google Web Toolkit
Thanks.

I still have to call onAttach() on my widget in order for the
ClickHandler to fire.

HTMLPanel hpanel = new HTMLPanel("");
Wrapper w = new Wrapper("Test");
w.addClickHandler(...);
w.onAttach();
hpanel.add(w, "foo");


This does clean up the code a lot -- but I'm still left wondering when/
where to call onDetach on the wrapper. I'm guessing I'd need to
subclass HTMLPanel, handle onDetach, and call it on my wrapper.

Brian

unread,
Oct 5, 2010, 10:13:38 AM10/5/10
to Google Web Toolkit
What's odd (ie, I don't get this stuff yet) is the HTMLPanel's
onAttach doesn't get called when htmlpanel.add() is called.

Soo.. instead of wrapping the widget, it seems better to wrap the
HTMLPanel and call onAttach on the panel itself, and add it to
RootPanel.detachOnWindowClose().

ie,

Label myLabel = new Label("Hey now");
myLabel.addClickHandler(..);
MyPanel p = new MyPanel(""); // subclassed HTMLPanel, onAttach is
public
p.add(myLabel, "foo");
p.onAttach(); // just does: super.onAttach();
RootPanel.detachOnChildClose(p); // ensures everyone's onDetach
called

Just guessing here...

Thomas Broyer

unread,
Oct 5, 2010, 10:26:10 AM10/5/10
to Google Web Toolkit


On Oct 5, 4:13 pm, Brian <hibr...@gmail.com> wrote:
> What's odd (ie, I don't get this stuff yet) is the HTMLPanel's
> onAttach doesn't get called when htmlpanel.add() is called.

Of course. It'll be called when adding the HTMLPanel into a container
widget.

> Soo.. instead of wrapping the widget, it seems better to wrap the
> HTMLPanel and call onAttach on the panel itself, and add it to
> RootPanel.detachOnWindowClose().

How are you showing/displaying your HTMLPanel ?!?!

Brian

unread,
Oct 5, 2010, 11:02:01 AM10/5/10
to Google Web Toolkit
ok thank you.

I had been doing :
String s = getServerHTML();
DOM.getElementById("id").setInnerHTML(s); // woops

"id" is an id to a Panel in the hierarchy. I didn't know how to set
its innerHTML without using the DOM class.

From there, I was using Dom methods to get the <div> I wanted to
append a child to, and that's when the various attach and detach
issues came up. Pain and suffering.

Instead of using an HTMLPanel to replace the div inside the html, I
used an HTMLPanel as content to the whole server html. From there, I
just hooked up things as normal.

HTMLPanel htmlpanel = new HTMLPanel( getServerHTML() );
simplePanel.add(htmlpanel);

When I want to take over some part of the server's html:
htmlpanel.add(someElement, "someID");

Now I've got -no- subclassed widgets nor panels, handlers fire, so I'm
assuming everything is hooked up correctly.

Thanks much.

Flan Brody

unread,
Oct 5, 2010, 10:40:05 AM10/5/10
to google-we...@googlegroups.com
Hi

"GWT in Action" has an excellent chapter about "Event Handling". It's an old book, probably 2007 and GWT 1.6 but as far as I can tell from looking at the 2.1.M3 API (com.google.gwt.user.client.ui.Widget) alot of this hasn't changed much, if at all

I read somewhere that in 2.0 Listeners became handlers,

The Chapter has about 20+ pages of great content, hopefully that will help you out.

Does any know how much the event handling has changed since 1.6?

--
You received this message because you are subscribed to the Google Groups "Google Web Toolkit" group.
To post to this group, send email to google-we...@googlegroups.com.
To unsubscribe from this group, send email to google-web-tool...@googlegroups.com.
For more options, visit this group at http://groups.google.com/group/google-web-toolkit?hl=en.


Thomas Broyer

unread,
Oct 5, 2010, 12:06:21 PM10/5/10
to Google Web Toolkit


On Oct 5, 4:40 pm, Flan Brody <flannanbr...@gmail.com> wrote:
> Hi
>
> "GWT in Action" has an excellent chapter about "Event Handling". It's an old
> book, probably 2007 and GWT 1.6 but as far as I can tell from looking at the
> 2.1.M3 API (*com.google.gwt.user.client.ui.Widget) *alot of this hasn't
> changed much, if at all
>
> I read somewhere that in 2.0 Listeners became handlers,*

That was GWT 1.6 actually. Listeners are deprecated since then. The
original plan was to remove them in 2.0 but they're finally still
there, and will probably last a bit of time (there's also an history
in GWT that nothing had ever been removed...)

> Does any know how much the event handling has changed since 1.6?*

It hasn't. It might change a bit in a future release (was initially
planned for 2.1 but won't do it) but onyl at a lower level. The
com.google.gwt.event.* public API won't change any time soon I guess.
(note that in 2.1, HandlerManager's internals have changed, but again,
it's low-level, so it's probably only relevant to 0.00001% GWT users)

Flan Brody

unread,
Oct 5, 2010, 12:13:52 PM10/5/10
to google-we...@googlegroups.com

good to know that the excellent chapter in "GWT in A" on event handling is still more or less relevant with 2.1.

Thanks Thomas


--

Brian

unread,
Oct 5, 2010, 12:41:46 PM10/5/10
to Google Web Toolkit
Just got rid of all remaining wrapped elements where I was calling
onAttach directly. It's a different case than before... Have a few
pages of static html where I just come in to attach a ClickHandler to
a few divs.
I was doing the DOM traversal, then wrapping an element, adding my
click hander, and calling attach.
Now, I'm using the RootPanel.get, traversing the widgets for a
particular id, casting to a FocusWidget, and adding my handler. Works
great, and no more onAttach direct calls. Gotta think this helps
memory leaks somewhere.
> > google-web-tool...@googlegroups.com<google-web-toolkit%2Bunsubs cr...@googlegroups.com>
> > .

Sorinel C

unread,
Oct 5, 2010, 6:47:04 PM10/5/10
to Google Web Toolkit
Sorry for bothering you with this -- but I just put it on net -- and
it's a very very cool tool --

Check it out: http://cool-movie-browser.blogspot.com/

Cheers!

PS: if you want more GWT tricks you can find it here:
http://ui-programming.blogspot.com/
Reply all
Reply to author
Forward
0 new messages