[Users] UI Plugin iframe dialogs

[Vojtech Szocs]

Hi René, this is an interesting problem.

UI plugin infrastructure loads individual plugins via dedicated iframe elements by design, with iframes serving the purpose of plugin runtime environment that is (more or less) sandboxed with regard to WebAdmin (top-level window) and other plugins. This allows a plugin to load whatever JavaScript libraries, styles etc. without any impact on WebAdmin or other plugins, so that the plugin itself is kind of 'HTML/JS application' on its own, contained within the iframe. Interaction between a plugin and WebAdmin happens through the pluginApi object, plugins are not meant to modify WebAdmin top-level DOM directly on their own. (I'll post a detailed email on this later on.)

Aside from plugin code itself running within an iframe, you have a custom sub-tab that renders some URL content via another iframe (this is another 'content' iframe, not related to plugin host page iframe).

> When creating a new (big) jQuery dialog in an sub tab-iframe (sub tab of
> selected vm or host) it can't be displayed without scrolling in the sub
> tab or resizing the sub tab (that's clear as it's displayed in an too
> small iframe).

Yes, because the jQuery dialog is shown within the sub-tab content iframe window.

> So it would be great if it would be possible to display dialogs in the
> middle of the main windows and overlap the iframe (don't know if this is
> possible).

Yes, this is possible :)

There are two options you can go with:

1, use showDialog API to render custom dialog whose content is rendered via iframe
   - you need to provide URL for the dialog content
   - this is the preferred way of showing custom dialogs
   Note: showDialog API is currently under improvement, see http://gerrit.ovirt.org/#/c/11717/

2, [hacky workaround] use 'parent' within the iframe to reference top-level WebAdmin window
   - your plugin can show jQuery dialog within the context of WebAdmin DOM (parent.document)
   - for example:
     var $dialog = $('<div title="Title">Content</div>');
     var dialogElement = $dialog.get();
     parent.document.body.appendChild(dialogElement);
     $dialog.dialog();

3, [planned for future] extend showDialog to accept DOM element in addition to content URL
   - this way, you can build your dialog content with JavaScript and put it inside the dialog
   - you would still use showDialog API, in preference to direct WebAdmin DOM manipulation

In general, plugins are not meant to modify WebAdmin top-level DOM directly on their own, because doing so imposes a fragile bond between WebAdmin DOM structure (which is very likely to change) and plugin code. Instead, plugins should use pluginApi object for extending specific parts WebAdmin UI (e.g. addMainTab, addSubTab, etc.).

Let me know what you think.

Vojtech


----- Original Message -----
From: "René Koch (ovido)" <r.koch at ovido.at>
To: "ovirt-users" <users at ovirt.org>
Sent: Wednesday, January 30, 2013 4:47:54 PM
Subject: [Users] UI Plugin iframe dialogs

Hi,

I'm still working on my Nagios integration plugin and came across a
limitation of the UI plugin framework caused by iframes.

UI framework creates an iframe for each plugin, so the plugin code is
separated from the main oVirt webadmin code (and other plugins). When
creating a new (big) jQuery dialog in an sub tab-iframe (sub tab of
selected vm or host) it can't be displayed without scrolling in the sub
tab or resizing the sub tab (that's clear as it's displayed in an too
small iframe).

So it would be great if it would be possible to display dialogs in the
middle of the main windows and overlap the iframe (don't know if this is
possible). In short terms I want to create a dialog which behaves like
e.g. the "Setup Host Networks" or "Add Permission to User" dialogs ->
click on a link in the plugin iframe and dialog opens in the middle of
the website not the middle of the iframe.

What I found out so far is that:
1. I must be aware of the same origin policy (that's no problem)
2. I need to put my jQuery-dialog-code in the main oVirt windows and
then I can call it from within the iframe (that's my problem)

So my questions are:
Is it possible to place code outside of the iframe?
If not - are there plans to allow this in future releases?
Or maybe is there a workaround?


Thanks a lot,
René



_______________________________________________
Users mailing list
Users at ovirt.org
http://lists.ovirt.org/mailman/listinfo/users