[Engine-devel] Question about closing UI plugin dialog

[Vojtech Szocs]

Hi Chris,

current showDialog() implementation uses native browser popup window via window.open() function. UI rendered within such popup window can close the window by itself simply via window.close() function [1].

However, as we're planning to move away from using native browser popup windows and making showDialog() implementation integrate with Web Admin dialog UI infrastructure, there are two possible ways to go:

a) OK/Cancel buttons rendered as part of custom dialog content (as described by Chris)
   - buttons are contained within the iframe content HTML
   - Web Admin will transmit custom dialog ID to iframe, e.g. iframeWindow.postMessage('customDialog123', iframeWindowDomain)
   - within the iframe window, clicking a button would invoke parentWindow.postMessage('close-customDialog123', parentWindowDomain)
   - Web Admin will receive 'close-customDialog123' message and will close the custom dialog

Pros: buttons and content in the same window context
Cons: cross-window communication overhead that relies on window.postMessage()

b) OK/Cancel buttons rendered as part of Web Admin dialog UI (NOT part of custom dialog content)
   - this was my initial idea of implementing custom dialog buttons
   - buttons will be defined via separate argument to showDialog() function, e.g. showDialog(title, contentUrl, width, height, buttons)
     where 'buttons' follow similar concept as 'actionButtonInterface' in addMainTabActionButton() API, e.g. { onClick: function() {...} }
   - closing custom dialog can be done right within the onClick handler function

Pros: no need for window.postMessage() stuff, button definitions are part of UI plugin (JavaScript) code
Cons: buttons and content in different window contexts

Chris, let me know what you think.

Note: window.postMessage() should work in IE8 and above, I've tested [2] in IE8/WinXP/SP3 without any problems. However, [3] mentions that "In IE8, it is possible to use win.postMessage for iframes only", I assume this is what you meant by saying that "it doesn't work across windows in IE"? Not sure if this is still an issue for us when using iframe instead of native browser popup window, but we'll have to investigate..

Regards,
Vojtech

[1] http://stackoverflow.com/a/2076307
[2] http://stevesouders.com/misc/test-postmessage.php
[3] http://javascript.info/tutorial/cross-window-messaging-with-postmessage


----- Original Message -----
From: "Christopher Morrissey" <Christopher.Morrissey at netapp.com>
To: "Vojtech Szocs" <vszocs at redhat.com>, engine-devel at ovirt.org
Cc: "Itamar Heim" <iheim at redhat.com>, "George Costea" <George.Costea at netapp.com>
Sent: Tuesday, January 8, 2013 3:13:44 PM
Subject: Question about closing UI plugin dialog

Hi All,

I've been working on a plugin for the UI that launches a dialog using the showDialog() API. Our UI is actually contained in a frame inside the dialog and is loaded from a separate server. The only information needed for our UI comes in either through the URL as parameters or from the oVirt REST API. The issue is that once the clicks the OK or Cancel buttons in our UI we need to message to the oVirt UI to close the dialog.

It looks like using the window.postMessage() API would be great for this, but it doesn't work across windows in IE. Would it be possible to change the code that launches the window to open a window that contains a bit of javascript that sets up a listener for closing the dialog and then launches the URL in an iFrame in the window? Of course, if it were in a native GWT dialog this wouldn't be a problem. ;)

-Chris

Chris Morrissey
Software Engineer
NetApp Inc.
919.476.4428