<html xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office" xmlns:w="urn:schemas-microsoft-com:office:word" xmlns:m="http://schemas.microsoft.com/office/2004/12/omml" xmlns="http://www.w3.org/TR/REC-html40">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="Generator" content="Microsoft Word 14 (filtered medium)">
<style><!--
/* Font Definitions */
@font-face
{font-family:Wingdings;
panose-1:5 0 0 0 0 0 0 0 0 0;}
@font-face
{font-family:Wingdings;
panose-1:5 0 0 0 0 0 0 0 0 0;}
@font-face
{font-family:Calibri;
panose-1:2 15 5 2 2 2 4 3 2 4;}
@font-face
{font-family:Tahoma;
panose-1:2 11 6 4 3 5 4 4 2 4;}
/* Style Definitions */
p.MsoNormal, li.MsoNormal, div.MsoNormal
{margin:0in;
margin-bottom:.0001pt;
font-size:12.0pt;
font-family:"Times New Roman","serif";}
a:link, span.MsoHyperlink
{mso-style-priority:99;
color:blue;
text-decoration:underline;}
a:visited, span.MsoHyperlinkFollowed
{mso-style-priority:99;
color:purple;
text-decoration:underline;}
p
{mso-style-priority:99;
margin:0in;
margin-bottom:.0001pt;
font-size:12.0pt;
font-family:"Times New Roman","serif";}
span.EmailStyle20
{mso-style-type:personal-reply;
font-family:"Calibri","sans-serif";
color:#1F497D;}
.MsoChpDefault
{mso-style-type:export-only;
font-size:10.0pt;}
@page WordSection1
{size:8.5in 11.0in;
margin:1.0in 1.0in 1.0in 1.0in;}
div.WordSection1
{page:WordSection1;}
/* List Definitions */
@list l0
{mso-list-id:59905621;
mso-list-template-ids:-906752590;}
@list l0:level1
{mso-level-number-format:bullet;
mso-level-text:;
mso-level-tab-stop:.5in;
mso-level-number-position:left;
text-indent:-.25in;
mso-ansi-font-size:10.0pt;
font-family:Symbol;}
@list l0:level2
{mso-level-number-format:bullet;
mso-level-text:o;
mso-level-tab-stop:1.0in;
mso-level-number-position:left;
text-indent:-.25in;
mso-ansi-font-size:10.0pt;
font-family:"Courier New";
mso-bidi-font-family:"Times New Roman";}
@list l0:level3
{mso-level-number-format:bullet;
mso-level-text:;
mso-level-tab-stop:1.5in;
mso-level-number-position:left;
text-indent:-.25in;
mso-ansi-font-size:10.0pt;
font-family:Wingdings;}
@list l0:level4
{mso-level-number-format:bullet;
mso-level-text:;
mso-level-tab-stop:2.0in;
mso-level-number-position:left;
text-indent:-.25in;
mso-ansi-font-size:10.0pt;
font-family:Wingdings;}
@list l0:level5
{mso-level-number-format:bullet;
mso-level-text:;
mso-level-tab-stop:2.5in;
mso-level-number-position:left;
text-indent:-.25in;
mso-ansi-font-size:10.0pt;
font-family:Wingdings;}
@list l0:level6
{mso-level-number-format:bullet;
mso-level-text:;
mso-level-tab-stop:3.0in;
mso-level-number-position:left;
text-indent:-.25in;
mso-ansi-font-size:10.0pt;
font-family:Wingdings;}
@list l0:level7
{mso-level-number-format:bullet;
mso-level-text:;
mso-level-tab-stop:3.5in;
mso-level-number-position:left;
text-indent:-.25in;
mso-ansi-font-size:10.0pt;
font-family:Wingdings;}
@list l0:level8
{mso-level-number-format:bullet;
mso-level-text:;
mso-level-tab-stop:4.0in;
mso-level-number-position:left;
text-indent:-.25in;
mso-ansi-font-size:10.0pt;
font-family:Wingdings;}
@list l0:level9
{mso-level-number-format:bullet;
mso-level-text:;
mso-level-tab-stop:4.5in;
mso-level-number-position:left;
text-indent:-.25in;
mso-ansi-font-size:10.0pt;
font-family:Wingdings;}
ol
{margin-bottom:0in;}
ul
{margin-bottom:0in;}
--></style><!--[if gte mso 9]><xml>
<o:shapedefaults v:ext="edit" spidmax="1026" />
</xml><![endif]--><!--[if gte mso 9]><xml>
<o:shapelayout v:ext="edit">
<o:idmap v:ext="edit" data="1" />
</o:shapelayout></xml><![endif]-->
</head>
<body lang="EN-US" link="blue" vlink="purple">
<div class="WordSection1">
<p class="MsoNormal"><span style="font-size:11.0pt;font-family:"Calibri","sans-serif";color:#1F497D">Hi Vojtech,<o:p></o:p></span></p>
<p class="MsoNormal"><span style="font-size:11.0pt;font-family:"Calibri","sans-serif";color:#1F497D"><o:p> </o:p></span></p>
<p class="MsoNormal"><span style="font-size:11.0pt;font-family:"Calibri","sans-serif";color:#1F497D">I just had a chance to try the patch today and it works great. When I click the “New Server” button on the “Virtual Machines” tab I see the alert. What do
I do to add a new button beside of the “New Server” button or at the end after the “Guide Me” button? I would like to add my own button there and then invoke my own UI built with GWT.<o:p></o:p></span></p>
<p class="MsoNormal"><span style="font-size:11.0pt;font-family:"Calibri","sans-serif";color:#1F497D"><o:p> </o:p></span></p>
<p class="MsoNormal"><span style="font-size:11.0pt;font-family:"Calibri","sans-serif";color:#1F497D">Thanks,<o:p></o:p></span></p>
<p class="MsoNormal"><span style="font-size:11.0pt;font-family:"Calibri","sans-serif";color:#1F497D">George<o:p></o:p></span></p>
<p class="MsoNormal"><a name="_MailEndCompose"><span style="font-size:11.0pt;font-family:"Calibri","sans-serif";color:#1F497D"><o:p> </o:p></span></a></p>
<div>
<div style="border:none;border-top:solid #B5C4DF 1.0pt;padding:3.0pt 0in 0in 0in">
<p class="MsoNormal"><b><span style="font-size:10.0pt;font-family:"Tahoma","sans-serif"">From:</span></b><span style="font-size:10.0pt;font-family:"Tahoma","sans-serif""> engine-devel-bounces@ovirt.org [mailto:engine-devel-bounces@ovirt.org]
<b>On Behalf Of </b>Vojtech Szocs<br>
<b>Sent:</b> Friday, July 20, 2012 4:38 PM<br>
<b>To:</b> engine-devel<br>
<b>Subject:</b> [Engine-devel] oVirt UI Plugins: Update on current progress<o:p></o:p></span></p>
</div>
</div>
<p class="MsoNormal"><o:p> </o:p></p>
<div>
<p class="MsoNormal"><span style="color:black">Hi guys,<br>
<br>
I've spent some time working on UI Plugins proof-of-concept (PoC) implementation, and thought I'd share my results with you. I've attached a patch that reflects the current progress.
<br>
<br>
The actual PoC implementation takes some inspiration from oVirt UI Plugins wiki page, and simplifies/streamlines/improves its main concepts. The goal is to have simple-to-use, yet flexible and robust plugin infrastructure. Major changes to the original design
are outlined below.<br>
<br>
<strong>Each UI plugin runs within the context of an iframe, and therefore requires a
</strong><b><i>plugin source page</i> that executes the actual plugin code.</b><o:p></o:p></span></p>
<ul type="disc">
<li class="MsoNormal" style="color:black;mso-margin-top-alt:auto;mso-margin-bottom-alt:auto;mso-list:l0 level1 lfo1">
iframe is essentially the sandbox for each plugin. We can disable plugins by detaching their iframe elements from the main document during WebAdmin runtime. This also allows us to implement features such as
<em>plugin safe mode</em> (no plugins loaded on WebAdmin startup).<o:p></o:p></li><li class="MsoNormal" style="color:black;mso-margin-top-alt:auto;mso-margin-bottom-alt:auto;mso-list:l0 level1 lfo1">
Plugin source pages and WebAdmin host page share the same origin (protocol, domain, port), with plugin source pages being served through EngineManager application server (JBoss AS). This is to avoid cross-domain window/iframe communication issues, when the
actual plugin code running in an iframe tries to register itself into WebAdmin main document's
<i>pluginApi</i> object.<o:p></o:p></li><li class="MsoNormal" style="color:black;mso-margin-top-alt:auto;mso-margin-bottom-alt:auto;mso-list:l0 level1 lfo1">
There's a servlet designed to render plugin source page for all plugins (<i>PluginSourcePageServlet</i>). For the given plugin, it detects its dependencies (3rd party JavaScript libraries) and configuration object (JSON data), reads the actual plugin code,
and assembles everything into the resulting HTML page (to be evaluated by the plugin iframe).<o:p></o:p></li><li class="MsoNormal" style="color:black;mso-margin-top-alt:auto;mso-margin-bottom-alt:auto;mso-list:l0 level1 lfo1">
iframe isolates plugin dependencies (3rd party JavaScript libraries) from other plugins and the main WebAdmin document. In practice, this means that plugin A can use jQuery 1.7 and plugin B can use jQuery 1.6 without the fear of any clashes.<o:p></o:p></li><li class="MsoNormal" style="color:black;mso-margin-top-alt:auto;mso-margin-bottom-alt:auto;mso-list:l0 level1 lfo1">
Last but not least, writing plugins in Google Web Toolkit (GWT) should be as easy as providing your own plugin source page. Just deploy your GWT plugin application on JBoss AS (next to
<i>engine.ear</i>), and point to GWT plugin application host page.<o:p></o:p></li></ul>
<p><span style="color:black">The current PoC declares a simple plugin that gets loaded using hard-coded values in
<i>PluginSourcePageServlet</i>. Actual plugin code registers the plugin into global
<i>pluginApi.plugins</i> object, with one sample event handler function (<i>ActionButtonClick</i>). Just after that, the plugin reports in as ready by calling
<i>pluginApi.ready</i> function. This essentially puts the plugin into use within WebAdmin.<o:p></o:p></span></p>
<p><span style="color:black"><o:p> </o:p></span></p>
<p class="MsoNormal"><span style="color:black">To simulate extension point (application event to be consumed by plugins), when the user clicks "New server" button on "Virtual Machines" main tab,
<i>ActionButtonClickEvent</i> gets fired through WebAdmin event bus. <i>PluginEventHandler</i> receives this event and invokes
<i>ActionButtonClick</i> event handler function on all plugins.<o:p></o:p></span></p>
<p><span style="color:black"><o:p> </o:p></span></p>
<p><span style="color:black">(Note: for passing context objects from WebAdmin to plugin event handler functions, I'm planning to experiment with gwt-exporter project [1]. This would greatly simplify the way how WebAdmin exposes context-specific plugin API to
event handler functions.)<o:p></o:p></span></p>
<p><span style="color:black"><o:p> </o:p></span></p>
<p><span style="color:black">As for the next step, I suggest to have some meeting (conference) to discuss the PoC in detail, and outline tasks for the near future. Also, please let me know what you think of the PoC so far.<o:p></o:p></span></p>
<p class="MsoNormal"><span style="color:black"><br>
Cheers,<br>
Vojtech<br>
<br>
[1] <a href="http://code.google.com/p/gwt-exporter/">http://code.google.com/p/gwt-exporter/</a><o:p></o:p></span></p>
<p><span style="color:black"><o:p> </o:p></span></p>
</div>
</div>
</body>
</html>