[Users] UI Plugin iframe dialogs

[René Koch]

Thanks a lot for your answer and sorry for my late response - I skipped dialogs for my first UI plugin release, but have to deal with it in the next release again.

I will go for the showDialog API method, as I think I will not into troubles in future oVirt version and avoid hacks.
It would be really great if showDialog would be able to create these nice oVirt dialogs in addition to opening new windows.


Regards,
René 

 
 
-----Original message-----
> From:Vojtech Szocs <vszocs at redhat.com>
> Sent: Wednesday 6th February 2013 18:54
> To: René Koch <r.koch at ovido.at>
> Cc: ovirt-users <users at ovirt.org>
> Subject: Re: [Users] UI Plugin iframe dialogs
> 
> 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
>