<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: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;}
--></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">Sorry for the late reply. This API looks perfect for our needs. I look forward to getting access to it and trying it out.<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>
<div>
<p class="MsoNormal"><span style="font-size:11.0pt;font-family:"Calibri","sans-serif";color:#1F497D">-Chris<o:p></o:p></span></p>
</div>
<p class="MsoNormal"><span style="font-size:11.0pt;font-family:"Calibri","sans-serif";color:#1F497D"><o:p> </o:p></span></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, October 12, 2012 9:04 AM<br>
<b>To:</b> engine-devel<br>
<b>Subject:</b> [Engine-devel] Update on UI Plugins: context-sensitive button API preview<o:p></o:p></span></p>
</div>
</div>
<p class="MsoNormal"><o:p> </o:p></p>
<div>
<p class="MsoNormal" style="margin-bottom:12.0pt"><span style="color:black">Hi guys,<br>
<br>
I've been working on implementing "custom context-sensitive button / menu item" plugin API feature recently, and wanted to share some code with you.<br>
<br>
Here's a sample code that adds "Do something with selected host(s)" button to Hosts main tab data grid:<br>
<br>
</span><span style="font-family:"Courier New";color:black">api.register({<br>
UiInit: function() {</span><span style="color:black"><br>
</span><span style="font-family:"Courier New";color:black"><br>
api.</span><b><span style="font-family:"Courier New";color:#3333FF">addMainTabActionButton</span></b><span style="font-family:"Courier New";color:black">('Host', 'Do something with selected host(s)', {</span><span style="color:black"><br>
</span><span style="font-family:"Courier New";color:black"><br>
</span><b><span style="font-family:"Courier New";color:#CC33CC">onClick</span></b><span style="font-family:"Courier New";color:black">: function() {<br>
</span><span style="font-family:"Courier New";color:#006600"> // 'arguments' contain host entities currently selected<br>
</span><span style="font-family:"Courier New";color:black"> window.alert(arguments.length + ' host(s) selected');<br>
window.alert('first selected host ID = ' + arguments[0].entityId);<br>
<br>
</span><span style="font-family:"Courier New";color:#006600"> // Open new popup window<br>
// In future, we might use "dialog UI" plugin API here<br>
</span><span style="font-family:"Courier New";color:black"> window.open('http://example.com', '_blank');<br>
},</span><span style="color:black"><br>
</span><span style="font-family:"Courier New";color:black"><br>
</span><b><span style="font-family:"Courier New";color:#CC33CC">isEnabled</span></b><span style="font-family:"Courier New";color:black">: function() {<br>
</span><span style="font-family:"Courier New";color:#006600"> // 'true' means the button is enabled and clickable (default)<br>
// 'false' means the button is disabled and non-clickable<br>
<br>
// Enable button only when the number of selected items > 0<br>
</span><span style="font-family:"Courier New";color:black"> return arguments.length > 0;<br>
},</span><span style="color:black"><br>
</span><span style="font-family:"Courier New";color:black"><br>
</span><b><span style="font-family:"Courier New";color:#CC33CC">isAccessible</span></b><span style="font-family:"Courier New";color:black">: function() {<br>
</span><span style="font-family:"Courier New";color:#006600"> // 'true' means the button is visible (default)<br>
// 'false' means the button is hidden<br>
</span><span style="font-family:"Courier New";color:black"> return true;<br>
}</span><span style="color:black"><br>
</span><span style="font-family:"Courier New";color:black"><br>
});</span><span style="color:black"><br>
</span><span style="font-family:"Courier New";color:black"><br>
}<br>
});<br>
</span><span style="color:black"><br>
The signature of <strong>addMainTabActionButton</strong> plugin API function is following:<br>
<br>
</span><span style="font-family:"Courier New";color:black">addMainTabActionButton(entityTypeName, label, actionButtonInterface)</span><span style="color:black"><br>
<br>
<em>entityTypeName</em> indicates which main tab the button should be added to, e.g. "Host" for Host main tab. [Quick question for NetApp guys: do we want to support all main tab entity types?]<br>
<br>
<i>label</i> is the title displayed on the button.<br>
<br>
<i>actionButtonInterface</i> represents an object that "implements the button interface" by declaring its functions:
<i>onClick</i>, <i>isEnabled</i>, <i>isAccessible</i>. Since JavaScript language uses different techniques and syntax to achieve OOP programming model, I've decided to keep things simple and stay with plain objects containing functions. While some JavaScript
guru could advocate different approach, from WebAdmin vs. plugin integration perspective, the above mentioned approach is the easiest way. I'm also interested to hear your opinion on this.<br>
<br>
All functions of <i>actionButtonInterface</i> receive currently selected item(s) as function arguments. Within a JavaScript function, "arguments" represents an implicit array of its arguments.<br>
<br>
For now, WebAdmin will pass simple JSON-like objects to these functions, for example:<br>
<br>
</span><span style="font-family:"Courier New";color:black">{ entityId: "<whatever>" }</span><span style="color:black"><br>
<br>
In future, we can extend or modify this concept to match the contract of various oVirt REST API entities.<br>
<br>
This feature will be part of UI Plugins PoC rev.6, which should come out next week.<br>
<br>
Regards,<br>
Vojtech<o:p></o:p></span></p>
</div>
</div>
</body>
</html>