New subject: [Engine-devel] Update on UI Plugins: context-sensitive button API preview

Friday, 12 October 2012

------=_Part_7675795_1562088388.1350047011300
Content-Type: text/plain; charset=utf-8
Content-Transfer-Encoding: 7bit

Hi guys, 

I've been working on implementing "custom context-sensitive button / menu
item" plugin API feature recently, and wanted to share some code with you. 

Here's a sample code that adds "Do something with selected host(s)" button
to Hosts main tab data grid: 

api.register({ 
UiInit: function() { 

api. addMainTabActionButton ('Host', 'Do something with selected host(s)',
{ 

onClick : function() { 
// 'arguments' contain host entities currently selected 
window.alert(arguments.length + ' host(s) selected'); 
window.alert('first selected host ID = ' + arguments[0].entityId); 

// Open new popup window 
// In future, we might use "dialog UI" plugin API here 
window.open('http://example.com', '_blank'); 
}, 

isEnabled : function() { 
// 'true' means the button is enabled and clickable (default) 
// 'false' means the button is disabled and non-clickable 

// Enable button only when the number of selected items > 0 
return arguments.length > 0; 
}, 

isAccessible : function() { 
// 'true' means the button is visible (default) 
// 'false' means the button is hidden 
return true; 
} 

}); 

} 
}); 

The signature of addMainTabActionButton plugin API function is following: 

addMainTabActionButton(entityTypeName, label, actionButtonInterface) 

entityTypeName 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?] 

label is the title displayed on the button. 

actionButtonInterface represents an object that "implements the button
interface" by declaring its functions: onClick , isEnabled , isAccessible . 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. 

All functions of actionButtonInterface receive currently selected item(s) as function
arguments. Within a JavaScript function, "arguments" represents an implicit
array of its arguments. 

For now, WebAdmin will pass simple JSON-like objects to these functions, for example: 

{ entityId: "<whatever>" } 

In future, we can extend or modify this concept to match the contract of various oVirt
REST API entities. 

This feature will be part of UI Plugins PoC rev.6, which should come out next week. 

Regards, 
Vojtech 

------=_Part_7675795_1562088388.1350047011300
Content-Type: text/html; charset=utf-8
Content-Transfer-Encoding: quoted-printable

<html><head><style type=3D'text/css'>p { margin: 0;
}</style></head><body><=
div style=3D'font-family: times new roman,new york,times,serif; font-size: =
12pt; color: #000000'>Hi guys,<br><br>I've been working on
implementing "cu=
stom 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 style=3D"font-family: courier
new,courier,monaco,monospace,sans-= serif;"></span><span
style=3D"font-family: courier new,courier,monaco,monos=
pace,sans-serif;">api.register({</span><br style=3D"font-family:
courier ne=
w,courier,monaco,monospace,sans-serif;"><span style=3D"font-family:
courier=
 new,courier,monaco,monospace,sans-serif;">&nbsp; UiInit: function()
{</spa=
n><br><br style=3D"font-family: courier
new,courier,monaco,monospace,sans-s=
erif;"><span style=3D"font-family: courier
new,courier,monaco,monospace,san=
s-serif;">&nbsp;&nbsp;&nbsp; api.<span style=3D"font-weight:
bold; color: r=
gb(51, 51, 255);">addMainTabActionButton</span>('Host', 'Do
something with =
selected host(s)', {</span><br><br style=3D"font-family: courier
new,courie=
r,monaco,monospace,sans-serif;"><span style=3D"font-family: courier
new,cou=
rier,monaco,monospace,sans-serif;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<span sty=
le=3D"color: rgb(204, 51, 204); font-weight: bold;">onClick</span>:
functio=
n() {</span><span style=3D"white-space:pre"><br
style=3D"font-family: couri=
er new,courier,monaco,monospace,sans-serif;"></span><span
style=3D"font-fam=
ily: courier new,courier,monaco,monospace,sans-serif;"><span
style=3D"color=
: rgb(0, 102,
0);">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; //
'arguments=
' contain host entities currently selected</span><br style=3D"color:
rgb(0,=
 102, 0);">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
window.alert(argument=
s.length + ' host(s)
selected');<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nb=
sp; window.alert('first selected host ID =3D ' + arguments[0].entityId);<br=
...
<br><span style=3D"color: rgb(0, 102,
0);">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&=
nbsp;&nbsp; // Open new popup window</span><br style=3D"color:
rgb(0, 102, =
0);"><span style=3D"color: rgb(0, 102,
0);">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&=
nbsp;&nbsp; // In future, we might use "dialog UI" plugin API
here</span><b=
r style=3D"color: rgb(0, 102,
0);">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbs=
p; window.open('http://example.com',
'_blank');<br></span><span style=3D"fo=
nt-family: courier new,courier,monaco,monospace,sans-serif;"></span><span
s=
tyle=3D"font-family: courier
new,courier,monaco,monospace,sans-serif;">&nbs=
p;&nbsp;&nbsp;&nbsp;&nbsp; },</span><br><br
style=3D"font-family: courier n=
ew,courier,monaco,monospace,sans-serif;"><span style=3D"font-family:
courie=
r
new,courier,monaco,monospace,sans-serif;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
=
<span style=3D"font-weight: bold; color: rgb(204, 51,
204);">isEnabled</spa=
n>: function() {</span><br style=3D"font-family: courier
new,courier,monaco=
,monospace,sans-serif;"><span style=3D"font-family: courier
new,courier,mon=
aco,monospace,sans-serif; color: rgb(0, 102,
0);">&nbsp;&nbsp;&nbsp;&nbsp;&=
nbsp;&nbsp;&nbsp; // 'true' means the button is enabled and clickable
(defa=
ult)<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; //
'false' means the but=
ton is disabled and
non-clickable<br><br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbs=
p;&nbsp; // Enable button only when the number of selected items &gt;
0<br>=
</span><span style=3D"font-family: courier
new,courier,monaco,monospace,san=
s-serif;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
return arguments.lengt=
h &gt; 0;</span><br style=3D"font-family: courier
new,courier,monaco,monosp=
ace,sans-serif;"><span style=3D"font-family: courier
new,courier,monaco,mon=
ospace,sans-serif;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
},</span><br><br style=
=3D"font-family: courier new,courier,monaco,monospace,sans-serif;"><span
st=
yle=3D"font-family: courier
new,courier,monaco,monospace,sans-serif;">&nbsp=
;&nbsp;&nbsp;&nbsp;&nbsp; <span style=3D"font-weight: bold; color:
rgb(204,=
 51, 204);">isAccessible</span>: function() {</span><br
style=3D"font-famil=
y: courier new,courier,monaco,monospace,sans-serif;"><span
style=3D"font-fa=
mily: courier new,courier,monaco,monospace,sans-serif; color: rgb(0, 102, 0=
);">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; //
'true' means the button i=
s visible
(default)<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
// 'false=
' means the button is hidden<br style=3D"font-family: courier new,courier,m=
onaco,monospace,sans-serif;"></span><span style=3D"font-family:
courier new=
,courier,monaco,monospace,sans-serif;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;=
&nbsp; return true;</span><br style=3D"font-family: courier
new,courier,mon=
aco,monospace,sans-serif;"><span style=3D"font-family: courier
new,courier,=
monaco,monospace,sans-serif;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
}</span><br><b=
r style=3D"font-family: courier
new,courier,monaco,monospace,sans-serif;"><=
span style=3D"font-family: courier new,courier,monaco,monospace,sans-serif;=
">&nbsp;&nbsp;&nbsp; });</span><br><br
style=3D"font-family: courier new,co=
urier,monaco,monospace,sans-serif;"><span style=3D"font-family: courier
new=
,courier,monaco,monospace,sans-serif;">&nbsp; }</span><br
style=3D"font-fam=
ily: courier new,courier,monaco,monospace,sans-serif;"><span
style=3D"font-=
family: courier new,courier,monaco,monospace,sans-serif;">});</span><br
sty=
le=3D"font-family: courier
new,courier,monaco,monospace,sans-serif;"><br>Th=
e signature of <strong>addMainTabActionButton</strong> plugin API function =
is following:<br><br><span style=3D"font-family: courier
new,courier,monaco=
,monospace,sans-serif;">addMainTabActionButton(entityTypeName, label, actio=
nButtonInterface)</span><br><br><em>entityTypeName</em>
indicates which mai=
n 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><span style=3D"font-style: italic;">label</span>
is the title displ=
ayed on the button.<br><br><span style=3D"font-style:
italic;">actionButton=
Interface</span> represents an object that "implements the button interface=
" by declaring its functions: <span style=3D"font-style:
italic;">onClick</=
span>, <span style=3D"font-style: italic;">isEnabled</span>,
<span style=3D=
"font-style: italic;">isAccessible</span>. Since JavaScript language
uses d=
ifferent techniques and syntax to achieve OOP programming model, I've decid=
ed 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 ea=
siest way. I'm also interested to hear your opinion on this.<br><br>All
fun=
ctions of <span style=3D"font-style:
italic;">actionButtonInterface</span> =
receive currently selected item(s) as function arguments. Within a JavaScri=
pt 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 style=3D"font-family: courier
new,courier,monac=
o,monospace,sans-serif;">{ entityId: "&lt;whatever&gt;"
}</span><br><br>In =
future, we can extend or modify this concept to match the contract of vario=
us 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<br><=
br></div></body></html>
------=_Part_7675795_1562088388.1350047011300--

2025

2024

2023

2022

2021

2020

2019

2018

2017

2016

2015

2014

2013

2012

2011

[Engine-devel] Update on UI Plugins: context-sensitive button API preview