[Engine-devel] Update on UI Plugins: Improved plugin API

28 Aug 2012

      ...
<br style=3D"font-family: courier new,courier,monaco,monospace,sans-serif;=
"><br style=3D"font-family: courier new,courier,monaco,monospace,sans-serif=
;"><span style=3D"font-family: courier new,courier,monaco,monospace,sans-se=
rif;">// Tell WebAdmin that we are ready, we need the plugin name to identi=
fy this plugin</span><br style=3D"font-family: courier new,courier,monaco,m=
onospace,sans-serif;"><span style=3D"font-family: courier new,courier,monac=
o,monospace,sans-serif;">pluginApi.ready('myPlugin');</span><br style=3D"fo=
nt-family: courier new,courier,monaco,monospace,sans-serif;"><br><hr style=
=3D"width: 100%; height: 2px;"><br>And here's an equivalent plugin code tha=
t uses new plugin API:<br><br><span style=3D"font-family: courier new,couri=
er,monaco,monospace,sans-serif;">// Plugin API instance for our plugin</spa=
n><br style=3D"font-family: courier new,courier,monaco,monospace,sans-serif=
;"><span style=3D"font-family: courier new,courier,monaco,monospace,sans-se=
rif;">var myPlugin =3D pluginApi('myPlugin');</span><br style=3D"font-famil=
y: courier new,courier,monaco,monospace,sans-serif;"><br style=3D"font-fami=
ly: courier new,courier,monaco,monospace,sans-serif;"><span style=3D"font-f=
amily: courier new,courier,monaco,monospace,sans-serif;">// Register our pl=
ugin object (containing event handler functions) into myPlugin</span><br st=
yle=3D"font-family: courier new,courier,monaco,monospace,sans-serif;"><span=
------=_Part_14447953_781921536.1346149049848
Content-Type: text/plain; charset=utf-8
Content-Transfer-Encoding: 7bit

Hi guys, 

I was thinking about improving JavaScript plugin API so that each time a plugin calls WebAdmin, the plugin name will be part of the call. This way, PluginManager (WebAdmin) can validate the call before doing any further actions, e.g. "plugin invocation must be allowed && plugin must be initialized". In other words, this is just to ensure consistent behavior for "plugin -> WebAdmin" calls. 

Here's a draft of new JavaScript API in action: http://jsfiddle.net/tHk5n/ (see the code below the comment saying "ACTUAL TEST CODE") 
(I took my inspiration from jQuery source code, even though I don't fully understand JavaScript prototype OOP concept, seems a bit weird to me.) 

For comparison, here's some plugin code that uses current plugin API: 

// Register our plugin object (containing event handler functions) into pluginApi.plugins 
pluginApi.plugins['myPlugin'] = { 
UiInit: function() { 
pluginApi.ui.addMainTab('Custom Tab', 'custom-tab', 'http://www.example.com/'); 
} 
}; 

// Tell WebAdmin that we are ready, we need the plugin name to identify this plugin 
pluginApi.ready('myPlugin'); 

And here's an equivalent plugin code that uses new plugin API: 

// Plugin API instance for our plugin 
var myPlugin = pluginApi('myPlugin'); 

// Register our plugin object (containing event handler functions) into myPlugin 
myPlugin.register({ 
UiInit: function() { 
myPlugin.ui.addMainTab('Custom Tab', 'custom-tab', 'http://www.example.com/'); 
} 
}); 

// Tell WebAdmin that we are ready , plugin name is already part of myPlugin 
myPlugin.ready(); 
// Note: the above line is equivalent to: pluginApi('myPlugin').ready() ; 

Let me know what you think. 

Cheers, 
Vojtech 

------=_Part_14447953_781921536.1346149049848
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 was thinking about improving JavaSc=
ript plugin API so that each time a plugin calls WebAdmin, the plugin name =
will be part of the call. This way, <em>PluginManager</em> (WebAdmin) can v=
alidate the call before doing any further actions, e.g. "plugin invocation =
must be allowed && plugin must be initialized". In other words, thi=
s is just to ensure consistent behavior for "plugin -> WebAdmin" calls.<=
br><br>Here's a draft of new JavaScript API in action: http://jsfiddle.net/=
tHk5n/ (see the code below the comment saying "ACTUAL TEST CODE")<br>(I too=
k my inspiration from jQuery source code, even though I don't fully underst=
and JavaScript prototype OOP concept, seems a bit weird to me.)<br><br><hr =
style=3D"width: 100%; height: 2px;"><br>For comparison, here's some plugin =
code that uses current plugin API:<br><br><span style=3D"font-family: couri=
er new,courier,monaco,monospace,sans-serif;">// Register our plugin object =
(containing event handler functions) into pluginApi.plugins</span><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;">plugi=
nApi.plugins['myPlugin'] =3D {</span><br style=3D"font-family: courier new,=
courier,monaco,monospace,sans-serif;"><span style=3D"font-family: courier n=
ew,courier,monaco,monospace,sans-serif;">  UiInit: function() {</=
span><br style=3D"font-family: courier new,courier,monaco,monospace,sans-se=
rif;"><span style=3D"font-family: courier new,courier,monaco,monospace,sans=
-serif;">    pluginApi.ui.addMainTab('Custom Tab', 'custom-t=
ab', 'http://www.example.com/');</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;">  }</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=
 style=3D"font-family: courier new,courier,monaco,monospace,sans-serif;">my=
Plugin.register({</span><br style=3D"font-family: courier new,courier,monac=
o,monospace,sans-serif;"><span style=3D"font-family: courier new,courier,mo=
naco,monospace,sans-serif;">  UiInit: function() {</span><br styl=
e=3D"font-family: courier new,courier,monaco,monospace,sans-serif;"><span s=
tyle=3D"font-family: courier new,courier,monaco,monospace,sans-serif;">&nbs=
p;   myPlugin.ui.addMainTab('Custom Tab', 'custom-tab', 'http://w=
ww.example.com/');</span><br style=3D"font-family: courier new,courier,mona=
co,monospace,sans-serif;"><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-famil=
y: courier new,courier,monaco,monospace,sans-serif;">});</span><br style=3D=
"font-family: courier new,courier,monaco,monospace,sans-serif;"><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;">// Te=
ll WebAdmin that we are ready, plugin name is already part of myPlugin</spa=
n><br style=3D"font-family: courier new,courier,monaco,monospace,sans-serif=
;"><span style=3D"font-family: courier new,courier,monaco,monospace,sans-se=
rif;">myPlugin.ready();</span><br style=3D"font-family: courier new,courier=
,monaco,monospace,sans-serif;"><span style=3D"font-family: courier new,cour=
ier,monaco,monospace,sans-serif;">// Note: the above line is equivalent to:=
 pluginApi('myPlugin').ready();</span><br style=3D"font-family: courier new=
,courier,monaco,monospace,sans-serif;"><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_14447953_781921536.1346149049848--

Vojtech Szocs

tags

participants (1)