5:49 p.m.
------=_Part_9716068_484635069.1350571769689
Content-Type: multipart/alternative;
boundary="----=_Part_9716069_2003615259.1350571769689"
------=_Part_9716069_2003615259.1350571769689
Content-Type: text/plain; charset=utf-8
Content-Transfer-Encoding: 7bit
Hi guys,
the latest revision of UI Plugins proof-of-concept patch is now available for you to
experiment with. You can download the patch from oVirt Gerrit at
http://gerrit.ovirt.org/#/c/8120/2 (patch set 2).
Please read on to learn what's new in this revision. If you have any comments,
questions or ideas, please let me know!
0. UI plugin path information resolved using local Engine configuration
Server-side UI plugin infrastructure now uses local (machine-specific) Engine
configuration instead of global ( vdc_options database table) Engine configuration:
* Previously, path information was resolved through
org.ovirt.engine.core.common.config.Config class - Engine configuration values were
retrieved from vdc_options database table.
* Currently, path information is resolved through
org.ovirt.engine.core.utils.LocalConfig class - Engine configuration values are retrieved
from local file system.
In case you're not working with oVirt Engine through RPM package system, e.g. you have
a local development environment set up and you build and deploy oVirt Engine through
Maven, please follow these steps:
a. Copy default Engine configuration into /usr/share/ ovirt-engine /conf
# mkdir -p /usr/share/ovirt-engine/conf
# cp <OVIRT_HOME>/backend/manager/conf/engine.conf.defaults
/usr/share/ovirt-engine/conf/engine.conf.defaults
b. If necessary, copy UI plugin data files from /usr/share/engine/ui-plugins to
/usr/share/ ovirt-engine /ui-plugins
c. If necessary, copy UI plugin config files from /etc/engine/ui-plugins to /etc/
ovirt-engine /ui-plugins
d, In case you want to override the default Engine configuration, put your custom property
file into /etc/sysconfig/ovirt-engine
The reason behind this change is that path information for UI plugin data and
configuration is typically machine-specific, and should be customizable per machine
through Engine local configuration.
1. New plugin API function: addMainTabActionButton
The "addMainTabActionButton" API adds custom context-sensitive button to the
given main tab's data grid, along with corresponding data grid context menu item.
addMainTabActionButton(entityTypeName, label, actionButtonInterface)
entityTypeName indicates which main tab's data grid the button should be added to,
according to the entity type associated with the main tab. entityTypeName values are
strings reflecting org.ovirt.engine.ui.webadmin.plugin.entityEntityType enum members.
Following entityTypeName values are currently supported (values are case-sensitive):
"DataCenter", "Cluster", "Host", "Storage",
"Disk", "VirtualMachine", "Template".
Note: "Pool" value is currently not supported, because of
org.ovirt.engine.core.common.businessentities.vm_pools entity not implementing the
BusinessEntity interface, not sure why though. Maybe we should switch from BusinessEntity
to IVdcQueryable interface and always cast getQueryableId method result value to Guid?
label is the title displayed on the button .
actionButtonInterface represents an object that "implements the button
interface" by declaring its functions: onClick , isEnabled , isAccessible . All
functions of actionButtonInterface receive currently selected item(s) as function
arguments.
Let's take a closer look at the concept behind actionButtonInterface . In traditional
class-based object-oriented languages, such as Java, interface is an abstract type that
contains method declarations without an implementation. A class that implements the given
interface must implement all methods declared by that interface (unless it's an
abstract class, but this isn't relevant in our case).
In contrast with traditional class-based object-oriented languages, JavaScript supports
OOP through prototype-based programming model
(https://developer.mozilla.org/en-US/docs/JavaScript/Introduction_to_Objec...).
At the same time, JavaScript language is dynamically-typed and therefore doesn't
support traditional concept of interface in OOP, it uses "duck typing" technique
instead (http://en.wikipedia.org/wiki/Duck_typing).
The simplest way to provide an object that "implements the given interface" in
JavaScript is to use "duck typing" technique: providing an object that contains
well-known functions. In UI plugin infrastructure, I call this concept "interface
object", represented by org.ovirt.engine.ui.webadmin.plugin.jsni.JsInterfaceObject
class. Unlike the traditional concept of interface abstract type in object-oriented
languages, an "interface object" does not necessarily have to declare all
functions of the given interface in order to "implement" such interface. In
fact, an empty object can be used as a valid "interface object". Missing
functions will be simply treated as empty (no-op) functions. Furthermore, an
"interface object" can "implement" multiple interfaces by declaring
functions of those interfaces (interface composition).
Getting back to "addMainTabActionButton" API, here's a sample code that adds
new button to "Host" main tab data grid, as part of UiInit event handler
function:
UiInit: function () {
api. addMainTabActionButton ('Host', 'Single-Host Action',
// Action button interface object
// All functions receive currently selected item(s) as function arguments
{
// Called when the user clicks the button
onClick : function () {
// Calling 'arguments[0]' is safe, because onClick() can be called
// only when exactly one item is currently selected in the data grid
window.alert('Selected host entity ID = ' + arguments[0].entityId);
},
// Returning 'true' means the button is enabled (clickable)
// Returning 'false' means the button is disabled (non-clickable)
// Default value = 'true'
isEnabled : function () {
// Enable button only when exactly one item is selected
return arguments.length == 1;
},
// Returning 'true' means the button is visible
// Returning 'false' means the button is hidden
// Default value = 'true'
isAccessible : function () {
// Always show the button in the corresponding data grid
return true ;
}
}
);
}
As mentioned above, all functions of an interface object are optional. For functions
expecting return value, default value is defined by UI plugin infrastructure. For example:
* onClick - no default value (no return value expected)
* isEnabled / isAccessible - default value "true" (boolean return value
expected)
Note: UI plugin infrastructure checks the actual return value type, and uses default value
in case the function returned something of wrong (unexpected) type.
In the example above, "currently selected item(s)" maps to JSON-like
representations of business entities currently selected in the corresponding data grid.
For now, the entity representation is quite simple and same for all entity types:
{ entityId: "[BusinessEntityGuidAsString]" }
In future, we will create specific JSON-like representations for specific business
entities, in compliance with Engine REST API entity structure.
For a more extensive example of using "addMainTabActionButton" API, please see
the attached "addMainTabActionButton.html.example" file.
2. Improved plugin API function: addMainTab
The "addMainTab" API was improved to address following issues:
* "addMainTab" can now be called at any moment during UI plugin runtime,
given that the plugin is allowed invoke plugin API functions (plugin is either
INITIALIZING or IN_USE). Previously, "addMainTab" worked reliably only when
called from within UiInit event handler function. Currently, it's possible to call
"addMainTab" at any moment, e.g. from within some other event handler function
(after UiInit has completed).
*
"addMainTab" now retains "active" tab (highlighted tab GUI).
"addMainTab" works by adding new tab component (GWTP presenter proxy) and
refreshing main tab panel GUI by removing all related tabs and re-adding them again. This
logic is handled by org.ovirt.engine.ui.common.presenter.DynamicTabContainerPresenter
class, which makes sure that "active" tab is retained even after main tab panel
was refreshed.
Furthermore, custom main tab implementation now displays the content of the given URL
through HTML iframe element.
3. Improved native JavaScript function handling (GWT JSNI)
This patch introduces org.ovirt.engine.ui.webadmin.plugin.jsni.JsFunction and
org.ovirt.engine.ui.webadmin.plugin.jsni.JsFunctionResultHelper classes providing Java
abstraction for invoking native JavaScript functions. These classes follow the general
contract of "interface object" as mentioned above.
JsFunctionResultHelper is particularly useful when dealing with functions which are
expected to return value of a certain type. Too bad standard GWT JSNI classes don't
provide such abstraction for working with native functions out-of-the-box...
4 . ActionPanel and ActionTable type hierarchy refactoring (related to
"addMainTabActionButton" API)
Previously, AbstractActionPanel and AbstractActionTable classes didn't implement any
reasonable interface that would allow other components (client-side UI plugin
infrastructure) to depend on their functionality in a loosely-coupled manner. This would
make code that implements "addMainTabActionButton" API "ugly": main
tab view interface would have to reference AbstractActionTable class directly. In MVP
design pattern, view interface should avoid referencing specific GWT Widget classes
directly.
This patch introduces new interfaces for ActionPanel and ActionTable components while
eliminating code redundancy (duplicate or unnecessary code).
5. ActionPanel type hierarchy refactoring (related to "addMainTab" API)
Since org.ovirt.engine.ui.common.presenter.DynamicTabContainerPresenter defines new
DynamicTabPanel interface that extends standard GWTP TabPanel interface, some refactoring
had to be done in related ActionPanel classes.
This patch makes sure that both org.ovirt.engine.ui.common.widget.tab.AbstractTabPanel
(widget) and org.ovirt.engine.ui.common.view.AbstractTabPanelView (view) support
DynamicTabPanel interface.
Note that for now, only main tab panel
(org.ovirt.engine.ui.webadmin.section.main.presenter.MainTabPanelPresenter) supports
dynamic tabs within its view.
Where is addSubTab API function?
Implementing "addSubTab" API requires some more changes, and I didn't want
to delay this PoC patch just because of it...
Here's a sample code that illustrates proposed "addSubTab" API usage:
UiInit: function () {
api. addSubTab ('Host', // entityTypeName
'Custom Host Sub Tab', // label
'custom-host-sub-tab', // historyToken
'http://www.ovirt.org/', // contentUrl
// Sub tab interface object
// All functions receive currently selected item(s)
// within the main tab data grid as function arguments
{
// Returning 'true' means the sub tab is visible
// Returning 'false' means the sub tab is hidden
// Default value = 'true'
isAccessible : function () {
return arguments.length == 1 && arguments[0].entityId ==
'<MyHostEntityId>' ;
}
}
);
}
As part of "addSubTab" API implementation, I'll refactor custom main tab
components, in order to use one "tab type" for both main and sub tabs.
Currently, we have one (and only one) "tab type" - a tab that shows content of
the given URL through HTML iframe element.
We could also create new "tab types", e.g. form-based tab that shows key/value
pairs (IMHO this could be quite useful for custom sub tabs).
Let me know what you think!
Cheers,
Vojtech
------=_Part_9716069_2003615259.1350571769689
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>the latest revision of UI Plugins
pro=
of-of-concept patch is now available for you to experiment with. You can do=
wnload the patch from oVirt Gerrit at http://gerrit.ovirt.org/#/c/8120/2 (p=
atch set 2).<br><br>Please read on to learn what's new in this revision.
If=
you have any comments, questions or ideas, please let me know!<br><br><hr
=
style=3D"width: 100%; height: 2px;"><br><strong>0. UI plugin path
informati=
on resolved using local Engine configuration</strong><br
style=3D"font-weig=
ht: bold;"><br>Server-side UI plugin infrastructure now uses local
(machine=
-specific) Engine configuration instead of global (<em>vdc_options</em> dat=
abase table) Engine configuration:<br><ul><li>Previously, path
information =
was resolved through org.ovirt.engine.core.common.config.Config=20
class - Engine configuration values were retrieved from <span style=3D"font=
-style: italic;">vdc_options</span> database
table.</li><li>Currently, path=
information is resolved through org.ovirt.engine.core.utils.LocalConfig=20
class - Engine configuration values are retrieved from local
file system.</li></ul>In case you're not working with oVirt Engine
through=
RPM package system, e.g. you have a local development environment set up a=
nd you build and deploy oVirt Engine through Maven, please follow these ste=
ps:<br><br>a. Copy default Engine configuration into /usr/share/<span
style=
=3D"font-weight:
bold;">ovirt-engine</span>/conf<br><br><div
style=3D"margi=
n-left: 40px; font-family: courier new,courier,monaco,monospace,sans-serif;=
"># mkdir -p /usr/share/ovirt-engine/conf<br># cp
<OVIRT_HOME>/backen=
d/manager/conf/engine.conf.defaults /usr/share/ovirt-engine/conf/engine.con=
f.defaults</div><br>b. If necessary, copy UI plugin data files from /usr/sh=
are/engine/ui-plugins to /usr/share/<span style=3D"font-weight:
bold;">ovir=
t-engine</span>/ui-plugins<br><br>c. If necessary, copy UI plugin config
fi=
les from /etc/engine/ui-plugins to /etc/<span style=3D"font-weight:
bold;">=
ovirt-engine</span>/ui-plugins<br><br>d, In case you want to override
the d=
efault Engine configuration, put your custom property file into /etc/syscon=
fig/ovirt-engine<br><br>The reason behind this change is that path informat=
ion for UI plugin data and configuration is typically machine-specific, and=
should be customizable per machine through Engine local configuration.<br>=
<br><hr style=3D"width: 100%; height: 2px;"><br><span
style=3D"font-weight:=
bold;">1. New plugin API function: addMainTabActionButton</span><br
style=
=3D"font-weight: bold;"><br>The "addMainTabActionButton" API
adds custom co=
ntext-sensitive button to the given main tab's data grid, along with corres=
ponding data grid context menu item.<br><br><span
style=3D"font-family: cou=
rier new,courier,monaco,monospace,sans-serif;">addMainTabActionButton(entit=
yTypeName, label, actionButtonInterface)</span><br style=3D"font-family:
co=
urier new,courier,monaco,monospace,sans-serif;"><em style=3D"font-family:
c=
ourier new,courier,monaco,monospace,sans-serif;"></em><br><span
style=3D"fo=
nt-style: italic;">entityTypeName</span> indicates which main tab's data
gr=
id the button should be added to, according to the entity type associated w=
ith the main tab.<span style=3D"font-style: italic;">
entityTypeName</span>=
values are strings reflecting org.ovirt.engine.ui.webadmin.plugin.entityEn=
tityType enum members. Following <span style=3D"font-style:
italic;">entity=
TypeName</span> values are currently supported (values are case-sensitive):=
"DataCenter", "Cluster", "Host", "Storage",
"Disk", "VirtualMachine", "Tem=
plate".<br><br>Note: "Pool" value is currently not supported,
because of or=
g.ovirt.engine.core.common.businessentities.vm_pools entity not implementin=
g the BusinessEntity interface, not sure why though. Maybe we should switch=
from BusinessEntity to IVdcQueryable interface and always cast getQueryabl=
eId method result value to Guid?<br><br><span style=3D"font-style:
italic;"=
<span style=3D"font-family:
courier new,courier,monaco,monospace,sans-serif=
;"></span><span style=3D"font-family: courier
new,courier,monaco,monospace,=
sans-serif;"> </span><span
style=3D"font-family: courier =
new,courier,monaco,monospace,sans-serif;">
=
</span><span style=3D"font-family: courier
new,courier,monaco,monospace,san=
s-serif;"><span style=3D"color: rgb(0, 0,
153);">isEnabled</span>: <span st=
yle=3D"font-weight: bold; color: rgb(153, 0, 0);">function</span>()
{<br></=
span><span style=3D"font-family: courier new,courier,monaco,monospace,sans-=
serif; color: rgb(0, 102,
0);"> &n=
bsp; // Enable button only when
exactly one=
item is selected</span><br style=3D"font-family: courier
new,courier,monac=
o,monospace,sans-serif; color: rgb(0, 102, 0);"><span
style=3D"font-family:=
courier new,courier,monaco,monospace,sans-serif;">
</spa=
n><span style=3D"font-family: courier new,courier,monaco,monospace,sans-ser=
if;"> </span><span
style=3D"font-family: courier new,cour=
ier,monaco,monospace,sans-serif;">  =
; </span><span style=3D"font-family: courier
new,courier,monaco,monospace,s=
ans-serif;"><span style=3D"font-weight: bold; color: rgb(153, 0,
0);">retur=
n</span> arguments.length =3D=3D 1;</span><br style=3D"font-family:
courier=
new,courier,monaco,monospace,sans-serif;"><span style=3D"font-family:
cour=
ier new,courier,monaco,monospace,sans-serif;">
<=
/span><span style=3D"font-family: courier new,courier,monaco,monospace,sans=
-serif;"> </span><span
style=3D"font-family: courier new,=
courier,monaco,monospace,sans-serif;">},</span><br><br><span
style=3D"font-=
family: courier new,courier,monaco,monospace,sans-serif; color: rgb(0, 102,=
0);">
// Returning 'tru=
e' means the button is
visible<br>  =
; // Returning 'false' means the button is
hidden</=
span><br style=3D"font-family: courier new,courier,monaco,monospace,sans-se=
rif; color: rgb(0, 102, 0);"><span style=3D"font-family: courier
new,courie=
r,monaco,monospace,sans-serif; color: rgb(0, 102, 0);">
=
// Default value =3D
'true'</span><br style=
=3D"font-family: courier new,courier,monaco,monospace,sans-serif; color: rg=
b(0, 102, 0);"
<span style=3D"font-family: courier new,courier,monaco,monospace,sans-serif=
;"></span><span style=3D"font-family: courier
new,courier,monaco,monospace,=
sans-serif;"></span><span style=3D"font-family: courier
new,courier,monaco,=
monospace,sans-serif;"> </span><span
style=3D"font-family=
: courier new,courier,monaco,monospace,sans-serif;">
&n=
bsp; </span><span style=3D"font-family: courier
new,courier,monaco,monospac=
e,sans-serif;"><span style=3D"color: rgb(0, 0,
153);">isAccessible</span>: =
<span style=3D"font-weight: bold; color: rgb(153, 0,
0);">function</span>()=
{</span><br><span style=3D"font-family: courier
new,courier,monaco,monospa=
ce,sans-serif; color: rgb(0, 102,
0);"> =
// Always show the button
in the co=
rresponding data grid</span><br style=3D"font-family: courier
new,courier,m=
onaco,monospace,sans-serif; color: rgb(0, 102, 0);"><span
style=3D"font-fam=
ily: courier
new,courier,monaco,monospace,sans-serif;"> <=
/span><span style=3D"font-family: courier new,courier,monaco,monospace,sans=
-serif;"> </span><span
style=3D"font-family: courier new,=
courier,monaco,monospace,sans-serif;"> &=
nbsp; </span><span style=3D"font-family: courier
new,courier,monaco,monospa=
ce,sans-serif;"><span style=3D"font-weight: bold; color: rgb(153, 0,
0);">r=
eturn</span> <span style=3D"font-weight: bold; color: rgb(153, 0,
0);">true=
</span>;</span><br style=3D"font-family: courier
new,courier,monaco,monospa=
ce,sans-serif;"><span style=3D"font-family: courier
new,courier,monaco,mono=
space,sans-serif;"> </span><span
style=3D"font-family: co=
urier
new,courier,monaco,monospace,sans-serif;"> &nb=
sp; </span><span style=3D"font-family: courier
new,courier,mona=
co,monospace,sans-serif;">}</span><br><br
style=3D"font-family: courier new=
,courier,monaco,monospace,sans-serif;"><span style=3D"font-family: courier
=
new,courier,monaco,monospace,sans-serif;"> &nb=
sp; </span><span style=3D"font-family: courier
new,courier,monaco,mon=
ospace,sans-serif;">}<br><br>
);</span><br style=3D"font-=
family: courier new,courier,monaco,monospace,sans-serif;"><span
style=3D"fo=
nt-family: courier
new,courier,monaco,monospace,sans-serif;">}</span><br><b=
r>As mentioned above, all functions of an interface object are optional. Fo=
r functions expecting return value, default value is defined by UI plugin i=
nfrastructure. For example:<br><ul><li>onClick - no default value (no
retur=
n value expected)</li><li>isEnabled / isAccessible - default value
"true" (=
boolean return value expected)</li></ul><p></p><p>Note: UI
plugin infrastru=
cture checks the actual return value type, and uses default value in case t=
he function returned something of wrong (unexpected) type.<br></p><br>In
th=
e example above, "currently selected item(s)" maps to JSON-like representat=
ions of business entities currently selected in the corresponding data grid=
. For now, the entity representation is quite simple and same for all entit=
y types:<br><br><span style=3D"font-family: courier
new,courier,monaco,mono=
space,sans-serif;">{ entityId: "[BusinessEntityGuidAsString]"
}</span><br s=
tyle=3D"font-family: courier
new,courier,monaco,monospace,sans-serif;"><br>=
In future, we will create specific JSON-like representations for specific b=
usiness entities, in compliance with Engine REST API entity structure.<br><=
br>For a more extensive example of using "addMainTabActionButton" API, plea=
se see the attached "addMainTabActionButton.html.example"
file.<br><br><hr =
style=3D"width: 100%; height: 2px;"><br><span
style=3D"font-weight: bold;">=
2. Improved plugin API function: addMainTab</span><br
style=3D"font-weight:=
bold;"><br>The "addMainTab" API was improved to address following
issues:<=
br><ul><li>"addMainTab" can now be called at any moment during UI
plugin ru=
ntime, given that the plugin is allowed invoke plugin API functions (plugin=
is either INITIALIZING or IN_USE).<br>Previously, "addMainTab" worked
reli=
ably only when called from within UiInit event handler function.<br>Current=
ly, it's possible to call "addMainTab" at any moment, e.g. from within
some=
other event handler function (after UiInit has
completed).</li></ul><ul><l=
i>"addMainTab" now retains "active" tab (highlighted tab
GUI).<br>"addMainT=
ab" works by adding new tab component (GWTP presenter proxy) and refreshing=
main tab panel GUI by removing all related tabs and re-adding them again.<=
br>This logic is handled by org.ovirt.engine.ui.common.presenter.DynamicTab=
ContainerPresenter class, which makes sure that "active" tab is retained ev=
en after main tab panel was
refreshed.<br></li></ul><p></p>Furthermore, cus=
tom main tab implementation now displays the content of the given URL throu=
gh HTML iframe element.<br><br><hr style=3D"width: 100%; height:
2px;"><br>=
<span style=3D"font-weight: bold;">3. Improved native JavaScript function
h=
andling</span> (GWT JSNI)<br><br>This patch introduces
org.ovirt.engine.ui.=
webadmin.plugin.jsni.JsFunction and org.ovirt.engine.ui.webadmin.plugin.jsn=
i.JsFunctionResultHelper classes providing Java abstraction for invoking na=
tive JavaScript functions. These classes follow the general contract of "in=
terface object" as mentioned above.<br><br>JsFunctionResultHelper is
partic=
ularly useful when dealing with functions which are expected to return valu=
e of a certain type. Too bad standard GWT JSNI classes don't provide such a=
bstraction for working with native functions out-of-the-box...<br><br><hr
s=
tyle=3D"width: 100%; height: 2px;"><br><span
style=3D"font-weight: bold;">4=
. ActionPanel and ActionTable type hierarchy refactoring</span> (related to=
"addMainTabActionButton" API)<br style=3D"font-weight:
bold;"><br>Previous=
ly, AbstractActionPanel and AbstractActionTable classes didn't implement an=
y reasonable interface that would allow other components (client-side UI pl=
ugin infrastructure) to depend on their functionality in a loosely-coupled =
manner. This would make code that implements "addMainTabActionButton" API
"=
ugly": main tab view interface would have to reference AbstractActionTable =
class directly. In MVP design pattern, view interface should avoid referenc=
ing specific GWT Widget classes directly.<br><br>This patch introduces new =
interfaces for ActionPanel and ActionTable components while eliminating cod=
e redundancy (duplicate or unnecessary code).<br><br><hr
style=3D"width: 10=
0%; height: 2px;"><br><span style=3D"font-weight: bold;">5.
ActionPanel typ=
e hierarchy refactoring</span> (related to "addMainTab"
API)<br><br>Since o=
rg.ovirt.engine.ui.common.presenter.DynamicTabContainerPresenter defines ne=
w DynamicTabPanel interface that extends standard GWTP TabPanel interface, =
some refactoring had to be done in related ActionPanel classes.<br><br>This=
patch makes sure that both org.ovirt.engine.ui.common.widget.tab.AbstractT=
abPanel (widget) and org.ovirt.engine.ui.common.view.AbstractTabPanelView (=
view) support DynamicTabPanel interface.<br><br>Note that for now, only mai=
n tab panel (org.ovirt.engine.ui.webadmin.section.main.presenter.MainTabPan=
elPresenter) supports dynamic tabs within its view.<br><br><hr
style=3D"wid=
th: 100%; height: 2px;"><br><span style=3D"font-weight:
bold;">Where is add=
SubTab API function?</span><br><br>Implementing "addSubTab"
API requires so=
me more changes, and I didn't want to delay this PoC patch just because of =
it...<br><br>Here's a sample code that illustrates proposed
"addSubTab" API=
usage:<br><br><span style=3D"font-family: courier
new,courier,monaco,monos=
pace,sans-serif;">UiInit: <span style=3D"font-weight: bold; color:
rgb(153,=
0, 0);">function</span>() {</span><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=
;"></span><span style=3D"font-family: courier
new,courier,monaco,monospace,=
sans-serif;"> api.<span style=3D"color:
rgb(204, 51, 204)=
;">addSubTab</span>('Host',
<span styl=
e=3D"color: rgb(0, 102, 0);">//
entityTypeName</span><br> =
'Custom Host Sub
Tab', <span style=3D"=
color: rgb(0, 102, 0);">//
label</span><br> &n=
bsp; 'custom-host-sub-tab', <span style=3D"color:
rgb(0, 102, =
0);">//
historyToken</span><br>
'=
http://www.ovirt.org/';, <span style=3D"color: rgb(0, 102, 0);">//
contentUr=
l<br><br></span>
<span style=3D"b=
ackground-color: rgb(255, 255, 255); color: rgb(0, 102, 0);">// Sub tab int=
erface
object<br> //
</span></spa=
n><span style=3D"font-family: courier new,courier,monaco,monospace,sans-ser=
if;"><span style=3D"color: rgb(0, 102, 0);">All functions receive
currently=
selected
item(s)<br> //
within t=
he main tab data grid as function arguments</span></span><br
style=3D"color=
: rgb(0, 102, 0);"><span style=3D"font-family: courier
new,courier,monaco,m=
onospace,sans-serif;"><span style=3D"background-color: rgb(255, 255, 255);
=
color: rgb(0, 102, 0);"></span
{</span><br <br <span
style=3D"font-family: courier new,courier,monaco,monospace,sans-serif=
; color: rgb(0, 102, 0);"></span><span style=3D"font-family: courier
new,co=
urier,monaco,monospace,sans-serif; color: rgb(0, 102,
0);"> &nbs=
p; // Returning 'true' means
the sub tab i=
s visible<br
// Retur=
ning 'false' means the sub tab is hidden</span><br
style=3D"font-family: co=
urier new,courier,monaco,monospace,sans-serif; color: rgb(0, 102, 0);" <span style=3D"font-family: courier
new,courier,monaco,monospace,sans-serif=
; color: rgb(0, 102, 0);">
&nbs=
p; // Default value =3D 'true'</span><br style=3D"font-family:
courier new,=
courier,monaco,monospace,sans-serif; color: rgb(0, 102, 0);"
<span style=3D"font-family: courier new,courier,monaco,monospace,sans-serif=
;"></span><span style=3D"font-family: courier
new,courier,monaco,monospace,=
sans-serif;"></span><span style=3D"font-family: courier
new,courier,monaco,=
monospace,sans-serif;"> </span><span
style=3D"font-family=
: courier new,courier,monaco,monospace,sans-serif;">
&n=
bsp; </span><span style=3D"font-family: courier
new,courier,monaco,monospac=
e,sans-serif;"><span style=3D"color: rgb(0, 0,
153);">isAccessible</span>: =
<span style=3D"font-weight: bold; color: rgb(153, 0,
0);">function</span>()=
{<br></span><span style=3D"font-family: courier
new,courier,monaco,monospa=
ce,sans-serif;"> </span><span
style=3D"font-family: couri=
er new,courier,monaco,monospace,sans-serif;">
</span><spa=
n style=3D"font-family: courier
new,courier,monaco,monospace,sans-serif;">&=
nbsp; </span><span
style=3D"font-family=
: courier new,courier,monaco,monospace,sans-serif;"><span
style=3D"font-wei=
ght: bold; color: rgb(153, 0, 0);">return</span> </span><span
style=3D"font=
-family: courier new,courier,monaco,monospace,sans-serif;">arguments.length=
=3D=3D 1</span><span style=3D"font-family: courier
new,courier,monaco,mono=
space,sans-serif;"> && </span><span
style=3D"font-family: courier n=
ew,courier,monaco,monospace,sans-serif;">arguments[0].entityId =3D=3D
'<=
MyHostEntityId>'</span><span style=3D"font-family: courier
new,courier,m=
onaco,monospace,sans-serif;">;</span><br style=3D"font-family:
courier new,=
courier,monaco,monospace,sans-serif;" <span
style=3D"font-family: courier new,courier,monaco,monospace,sans-serif=
;"> </span><span style=3D"font-family:
courier new,courie=
r,monaco,monospace,sans-serif;">
=
</span><span style=3D"font-family: courier
new,courier,monaco,monospace,san=
s-serif;">}</span><br <br
style=3D"font-family: courier new,courier,monaco,monospace,sans-serif;"=
<span style=3D"font-family: courier
new,courier,monaco,monospace,sans-serif=
;">
</span><span style=3D"font-fa=
mily: courier new,courier,monaco,monospace,sans-serif;">}<br <br
);</span><br style=3D"font-family:
courier new,courier,m=
onaco,monospace,sans-serif;" <span style=3D"font-family:
courier new,courier,monaco,monospace,sans-serif=
;">}</span><br><br>As part of "addSubTab" API
implementation, I'll refactor=
custom main tab components, in order to use one "tab type" for both main a=
nd sub tabs.<br><br>Currently, we have one (and only one) "tab type"
- a ta=
b that shows content of the given URL through HTML iframe element.<br><br>W=
e could also create new "tab types", e.g. form-based tab that shows key/val=
ue pairs (IMHO this could be quite useful for custom sub tabs).<br><br><hr
=
style=3D"width: 100%; height: 2px;"><br>Let me know what you
think!<br><br>=
Cheers,<br>Vojtech<br><br></div></body></html ------=_Part_9716069_2003615259.1350571769689--
------=_Part_9716068_484635069.1350571769689
Content-Type: application/x-compressed-tar; name=poc-6-examples.tar.gz
Content-Disposition: attachment; filename=poc-6-examples.tar.gz
Content-Transfer-Encoding: base64
H4sIAGMRgFAAA+2WXU/bMBSGuU1/xZl2kVSUJKWlSFCQOmAaF2iTYBcT4yJNTOIttSPboesQ/33H
SQv9IApsFQPJz0X9bR+f8x6nQRSdBZRdBEM3UaPUJb+CUZaSjXXiI71utyh3e4ulpoP19rbf9f22
v9PB/vaOv729Af5aragglyoQABs38jcPZfW8uvE3Sv/d8eeji29fTkCH/7DRnxUkiLCQoaCZOmxY
N+ikIKNwAFkgCFNuluYxZYOMOvY153Zzv2HhuCtITKUiwrltWNZXesqo2oPrnIWKcuY0QXcXE4N7
4Tn2R84BK3YL9F5bqqwmSmV7njcej11+Q4VyuYi94iDrrmHdPZwYRBMHW31vZm3fm5o/5NFEN2dl
ebn/7fPXxEMYBkWIPuRKcbbet6Am/7vtdu8+/zs9H/N/t7Pjm/x/CdaR/8NAPC//PQ/OqZYWDAu5
rb4J82J07KM013vqR2HAJlvTJpSTsPe2ATVwdpTS8OeSKXWrZowpi/jYDVIilGNfJEQQQC+ADZtY
xvkIHSLdlLBYJdhlQ1ha6MgmSJKSUJFIe6junLtW7RQqT1gwTEn0l1cRROWCgRI5WZM9gzAkUlK0
6UVMqpyhPwhTcZW6AVJ6CsYJYSApi1FwVJERGn0fljrpfeJSad2dF8u3dHNed7jaelxbesRaFM75
9ExI9C6oGaomcHqMObUgpEv/yi0HT6Pia4ffu1ZRVAW/OGvqxhU9HhxAe2mXypDNb1TGo1inf2vc
O+KYDyoJGKbaI16uCtpTXH+Wp4queL5OKP+W8fq5G8kYQ3P5lHzXAZ1P9j37ql7KM665AEcfqF9X
vwW4L1aWz9nH4b4ew8rm5nPuMgPv42a5TBz7Oyu8+V7fhxYXqBYjXRDjU8+qTtNlFlJEm/iDUwy+
3XxV7+VK1A91Uq3Fvtf0fpp/1gaDwWAwGAwGg8FgMBgMBoPBYDAYDG+dP/59M0oAKAAA
------=_Part_9716068_484635069.1350571769689--
label</span> is the title displayed on the button<span
style=3D"font-style=
:
italic;">.<br></span><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>. All functions of <span
style=3D"=
font-style: italic;">actionButtonInterface</span> receive currently
selecte=
d item(s) as function arguments.<br><br>Let's take a closer look at the
con=
cept behind <span style=3D"font-style:
italic;">actionButtonInterface</span=
. In traditional class-based object-oriented languages, such as Java,
inte=
rface is an abstract type that contains method declarations without an impl=
ementation. A class that implements the given interface must implement all =
methods declared by that interface (unless it's an abstract class, but this=
isn't relevant in our case).<br><br>In contrast with traditional
class-bas=
ed object-oriented languages, JavaScript supports OOP through prototype-bas=
ed programming model (https://developer.mozilla.org/en-US/docs/JavaScript/I=
ntroduction_to_Object-Oriented_JavaScript). At the same time, JavaScript la=
nguage is dynamically-typed and therefore doesn't support traditional conce=
pt of interface in OOP, it uses "duck typing" technique instead (http://en.=
wikipedia.org/wiki/Duck_typing).<br><br>The simplest way to provide an obje=
ct that "implements the given interface" in JavaScript is to use "duck
typi=
ng" technique: providing an object that contains well-known functions. In U=
I plugin infrastructure, I call this concept "interface object", represente=
d by org.ovirt.engine.ui.webadmin.plugin.jsni.JsInterfaceObject class. Unli=
ke the traditional concept of interface abstract type in object-oriented la=
nguages, an "interface object" <u>does not necessarily have to declare all
=
functions of the given interface</u> in order to "implement" such
interface=
. In fact, an empty object can be used as a valid "interface object". Missi=
ng functions will be simply treated as empty (no-op) functions. Furthermore=
, an "interface object" can "implement" multiple interfaces by
declaring fu=
nctions of those interfaces (interface composition).<br><br>Getting back to=
"addMainTabActionButton" API, here's a sample code that adds new button
to=
"Host" main tab data grid, as part of UiInit event handler
function:<br><b=
r><span style=3D"font-family: courier new,courier,monaco,monospace,sans-ser=
if;">UiInit: <span style=3D"font-weight: bold; color: rgb(153, 0,
0);">func=
tion</span>() {</span><br style=3D"font-family: courier
new,courier,monaco,=
monospace,sans-serif;"><span style=3D"font-family: courier
new,courier,mona=
co,monospace,sans-serif;"></span><span style=3D"font-family: courier
new,co=
urier,monaco,monospace,sans-serif;"> api.<span
style=3D"c=
olor: rgb(204, 51, 204);">addMainTabActionButton</span>('Host',
'Single-Hos=
t Action',<br><br><span style=3D"color: rgb(0, 102,
0);"> =
// Action button interface
object</span><br style=
=3D"color: rgb(0, 102, 0);"><span style=3D"color: rgb(0, 102,
0);"> &n=
bsp; // All functions receive currently
selec=
ted item(s) as function arguments</span><br style=3D"color: rgb(0, 102,
0);=
">
{</span><br><br><span style=3D=
"font-family: courier new,courier,monaco,monospace,sans-serif; color: rgb(0=
, 102, 0);">
// Cal=
led when the user clicks the button</span><br style=3D"color: rgb(0, 102,
0=
);"><span style=3D"font-family: courier
new,courier,monaco,monospace,sans-s=
erif; color: rgb(0, 102, 0);"></span><span style=3D"font-family:
courier ne=
w,courier,monaco,monospace,sans-serif;">
&nb=
sp; <span style=3D"color: rgb(0, 0,
153);">onClick</span>: <sp=
an style=3D"font-weight: bold; color: rgb(153, 0,
0);">function</span>() {<=
br></span><span style=3D"font-family: courier
new,courier,monaco,monospace,=
sans-serif; color: rgb(0, 102,
0);"> &nb=
sp; // Calling 'arguments[0]'
is safe, bec=
ause onClick() can be
called<br> &=
nbsp; // only when exactly one item is
curr=
ently selected in the data grid</span><br style=3D"font-family: courier
new=
,courier,monaco,monospace,sans-serif; color: rgb(0, 102, 0);"><span style=
=3D"font-family: courier
new,courier,monaco,monospace,sans-serif;"> &n=
bsp; </span><span style=3D"font-family: courier
new,courier,monaco,mo=
nospace,sans-serif;"> </span><span
style=3D"font-family: =
courier
new,courier,monaco,monospace,sans-serif;"> &=
nbsp; </span><span style=3D"font-family: courier
new,courier,mo=
naco,monospace,sans-serif;">window.alert('Selected host entity ID =3D ' +
a=
rguments[0].entityId);</span><br style=3D"font-family: courier
new,courier,=
monaco,monospace,sans-serif;"><span style=3D"font-family: courier
new,couri=
er,monaco,monospace,sans-serif;">
</span><s=
pan style=3D"font-family: courier new,courier,monaco,monospace,sans-serif;"=
</span><span
style=3D"font-family: courier new,courier,=
monaco,monospace,sans-serif;">},</span><br><br><span
style=3D"font-family: =
courier new,courier,monaco,monospace,sans-serif; color: rgb(0, 102, 0);">&n=
bsp; // Returning
'true' means=
the button is enabled (clickable)</span><br style=3D"color: rgb(0, 102,
0)=
;"><span style=3D"font-family: courier
new,courier,monaco,monospace,sans-se=
rif; color: rgb(0, 102, 0);">
&=
nbsp; // Returning 'false' means the button is disabled (non-clickable)</sp=
an><br style=3D"font-family: courier new,courier,monaco,monospace,sans-seri=
f; color: rgb(0, 102, 0);"><span style=3D"font-family: courier
new,courier,=
monaco,monospace,sans-serif; color: rgb(0, 102,
0);"> &nbs=
p; // Default value
=3D 'true'</s=
pan><br style=3D"font-family: courier new,courier,monaco,monospace,sans-ser=
if; color: rgb(0, 102, 0);"