How to write a plugin for Web Client?

You can find, download or submit Web Client Plugins here.

How to write a plugin for Web Client?

Postby FTP » Sun Mar 06, 2011 1:44 pm

How to write a plugin for Web Client?

From Wing FTP Server 3.8.0, Web Client Plugins will be supported!
And you can write your own plugin easily without modifying the "webclient/main.html" or other original html, just take a few steps as following:

1. Create a plugin folder under "webclient/plugins/", such as "webclient/plugins/myapp".

2. Then, under the created plugin folder, place at least one file: "setting.html", it is a Lua script file with core settings of your plugin. And its content will look like this:

Code: Select all
<%
-- Plugin Name: My First App
-- Description: This plugin can simply show or hide a square.
-- Author: wftpserver (http://www.wftpserver.com)
-- Version: 1.0

local tab = {}
tab.plugin_enabled = true

tab.extbutton_name = "My First App"
tab.extbutton_func = "show_mydiv()"
tab.extbutton_icon = "plugins/myapp/icon.gif"
tab.need_selectfile = false
tab.exthtml = [[
<div id="extra_div" style="position:absolute; z-index:100; top:200px; left:200px; width:200px; height:200px; padding:20px; text-align:center; background:#FF0000; display:none;" onclick="hide_mydiv()">Click here to hide me.</div>
]]
tab.extjs = [[
function show_mydiv(){
   $("extra_div").style.display = "";
}
function hide_mydiv(){
   $("extra_div").style.display = "none";
}
]]

register_plugin(tab)
%>


Done! If you visit the main interface of web client, now you will see a new button "My First App" when you click on "More actions" or right-click on the top. After clicking the button "My First App", a square with red color will be shown, that's it!

Image
Image

It is so simple, right? OK, let me explain "setting.html" in more detail. First, the top of "setting.html" must contain a plugin information header ("Plugin Name", "Description", "Author" and "Version"). Then, you must create a Lua table variable (local variable), and the table format will look like this (all the fields are optional):

{
["plugin_enabled"] = Boolean, -- whether to enable the plugin.
["extbutton_name"] = String, -- the button name.
["extbutton_func"] = String, -- the button function, you can define the javascript function in the "extjs" field.
["extbutton_icon"] = String, -- the icon image of the button, if you don't define this field, then it will use a default icon.
["need_selectfile"] = Boolean, -- if the value is true, then the button will be shown when right-clicking on a file.
["exthtml"] = String, -- the extra html code, it will be placed in "webclient/main.html"
["extjs"] = String, -- the extra javascript code, it will be placed on the bottom of "webclient/main.html"
}


The last thing is registering your plugin, just call the register function: register_plugin(tab)


Other Tips:
* The icon image must be 16px*16px GIF image.
* All the resource files (e.g. HTML, CSS) must be placed in the plugin folder, such as "webclient/plugins/myapp".
* You can re-write the existed javascript function, just define the same name function in the field "extjs".
* If you want to submit your plugin to wftpserver.com, you also need to create a readme.txt file, you can check out this example.
FTP
Site Admin
 
posts 1220
 
joined Tue Sep 29, 2009 6:09 am

Return to Web Client Plugins

Who is online

Users browsing this forum: No registered users and 0 guests