How can I implement the pop out functionality of chat windows in GMail?

Question

I'm not looking for a full implementation, I'm more interested in how they do it. I know they use GWT, but I'd like a more low level answer. Naively, I would start by thinking when you click the popout link they simply open a new window and copy content into it. There are lots of reasons why that won't work out well, so I'm wondering if anyone knows or has ideas on how they do this or how it could be done.

Answer 1

I recently needed to solve exactly this problem in an app. I ended up using this great little jQuery plugin to do the trick: WindowMsg (see link at bottom) While I'm sure there are other ways to accomplish the same task, that plugin does works thusly:

• first you create a new child window from your original window using window.open
• you save a reference to the window object returned by window.open
• you call a library method in the child window that adds a hidden form for the library to store data in
• you call a library method in the parent window that uses window.document.forms to populate form fields on the child window (the library abstracts all of this stuff so you wouldn't even know there was a form involved unless you looked at the source) window.document.forms works the same on all major browsers so this abstraction in x-browser compatible
• finally, the child window refers back to its parent window using window.opener and can communicate back via a parallel hidden form on the parent
• the library implements a convenient helper that takes a callback function to run on each side to make the callback chain easy to deal with

In my experience working with the library, it would have also been quite nice if they had included the JSON 2 lib from JSON.org. Out of the box, WindowMsg only allows you to send string messages between windows, but with some pretty simple use of the JSON 2 lib, I was able to hack it to allow the sending of full JSON objects between windows. I bet more mature libraries (such as whatever google uses) include that kind of serialization and de-serialization baked in.

I am putting this link here because for some reason, the Stack Overflow formatter turns it into an anchor link with no closing tag and I don't want my whole post to be one giant hyperlink!

WindowMsg: http://www.sfpeter.com/2008/03/13/communication-between-browser-windows-with-jquery-my-new-plugin/

Answer 2

I would say the easiest way would be to have the data stored on the server (which you probably do already), then just have the new window retrieve that data.

Of course that wouldn't persist things like contents of a text-box the user has input, so depending on what the window is for, it may be impractical.. but it's always best to start trying the simplest option!

Answer 3

let me try and accept your answers .

Thanks & Regards' -Kiran.Kuppula