From:Vojtech Szocs <vszocs(a)redhat.com&gt; Sent: Wednesday 6th February 2013 18:54 To: René Koch <r.koch(a)ovido.at&gt; Cc: ovirt-users <users(a)ovirt.org&gt; 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(a)ovido.at&gt; To: "ovirt-users" <users(a)ovirt.org&gt; 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(a)ovirt.org http://lists.ovirt.org/mailman/listinfo/users

Hi René, sorry for replying late! > 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. There's a patch for improving showDialog API/implementation to integrate with standard WebAdmin dialog look & feel :) http://gerrit.ovirt.org/#/c/11717/ Still a work-in-progress, but we're planning to finalize/merge it soon!

For now, you can use the current showDialog API, e.g. api.showDialog('Dialog Title', 'http://www.example-content.com/', 640, 480); I have one question for you: would you prefer if new showDialog API supported accepting DOM elements instead of contentUrl string? For example (using jQuery): var $content = $('<div>Custom dialog content</div>'); var contentElement = $content.get(); api.showDialog('Dialog Title', contentElement, 640, 480); [In other words, UI plugin could build custom UI directly on client, instead of having to ask server to provide it.]

Regards, Vojtech ----- Original Message ----- From: "René Koch" <r.koch(a)ovido.at&gt; To: "Vojtech Szocs" <vszocs(a)redhat.com&gt; Cc: "ovirt-users" <users(a)ovirt.org&gt; Sent: Sunday, February 24, 2013 7:31:47 PM Subject: RE: [Users] UI Plugin iframe dialogs 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(a)redhat.com&gt; > Sent: Wednesday 6th February 2013 18:54 > To: René Koch <r.koch(a)ovido.at&gt; > Cc: ovirt-users <users(a)ovirt.org&gt; > 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(a)ovido.at&gt; > To: "ovirt-users" <users(a)ovirt.org&gt; > 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(a)ovirt.org > http://lists.ovirt.org/mailman/listinfo/users >