[Engine-devel] UI Plugins: HTML5 Window.postMessage communication scheme proposal

[Vojtech Szocs]

Hi guys,

showDialog API improvement patch [http://gerrit.ovirt.org/#/c/11717/] is planned to include new feature that allows custom content contributed by UI plugins to invoke arbitrary plugin API function.

For example, imagine you have a custom modal dialog created via showDialog API:
showDialog('Dialog Title', 'dialog-token', 'http://www.example.com/', '800px', '600px')

Alternatively, you could also have a custom main tab created via addMainTab API:
addMainTab('Tab Label', 'tab-token', 'http://www.example.com/')

WebAdmin uses HTML iframe element to render custom content at http://www.example.com/ from within the dialog/tab UI.

Now imagine the custom content shows a button that should invoke some plugin API function. For example, imagine a custom "Close" button rendered within the modal dialog content.

For this purpose, we're planning to use following HTML5 Window.postMessage communication scheme:
* custom content iframe (attached to top-level DOM) does postMessage <pluginName>:<apiExpression>, e.g. foo-plugin:closeDialog('my-dialog')
* WebAdmin receives the message, obtains pluginApi for <pluginName> and invokes <apiExpression> on it, e.g. fooPluginApi.closeDialog('my-dialog')

The above scheme allows *any* custom content iframe (showDialog, addMainTab, etc.) to invoke arbitrary plugin API function (expression). This means that custom content contributed by UI plugins can interact directly with plugin API on its own. In other words, this gives plugin authors the possibility to call plugin API without having to notify the plugin (JavaScript) in one way or another.

Let me know what you think.

Vojtech