Source of filetree.html:
  1. <!-- vim: ts=2:sw=2:nu:fdc=2:spell
  2.  
  3. FileTree Application Example Page
  4.  
  5. @author Ing.Jozef Sakáloš
  6. @copyright (c) 2008, by Ing. Jozef Sakáloš
  7. @date 30. March 2008
  8. @version $Id: filetree.html 113 2009-02-02 02:27:23Z jozo $
  9.  
  10. @license filetree.html is licensed under the terms of the Open Source
  11. LGPL 3.0 license. Commercial use is permitted to the extent that the
  12. code/component(s) do NOT become part of another Open Source or Commercially
  13. licensed development library or toolkit without explicit permission.
  14.  
  15. License details: http://www.gnu.org/licenses/lgpl.html
  16. -->
  17.  
  18. <html>
  19. <head>
  20. <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  21. <link rel="stylesheet" type="text/css" href="./ext/resources/css/ext-all.css">
  22. <link rel="stylesheet" type="text/css" href="./css/icons.css">
  23. <link rel="stylesheet" type="text/css" href="./css/webpage.css">
  24. <link rel="stylesheet" type="text/css" href="./css/filetree.css">
  25. <link rel="stylesheet" type="text/css" href="./css/filetype.css">
  26. <link rel="stylesheet" type="text/css" href="./css/famflag.css">
  27. <link rel="stylesheet" type="text/css" href="./css/Ext.ux.IconCombo.css">
  28. <link rel="stylesheet" type="text/css" href="./css/empty.css" id="theme">
  29. <link rel="shortcut icon" href="../img/extjs.ico">
  30. <script type="text/javascript" src="./ext/adapter/ext/ext-base.js"></script>
  31. <script type="text/javascript" src="./ext/ext-all-debug.js"></script>
  32. <script type="text/javascript" src="./js/WebPage.js"></script>
  33. <script type="text/javascript" src="./js/Ext.ux.form.BrowseButton.js"></script>
  34. <script type="text/javascript" src="./js/Ext.ux.FileUploader.js"></script>
  35. <script type="text/javascript" src="./js/Ext.ux.UploadPanel.js"></script>
  36. <script type="text/javascript" src="./js/Ext.ux.FileTreeMenu.js"></script>
  37. <script type="text/javascript" src="./js/Ext.ux.FileTreePanel.js"></script>
  38. <script type="text/javascript" src="./js/Ext.ux.form.ThemeCombo.js"></script>
  39. <script type="text/javascript" src="./js/Ext.ux.form.IconCombo.js"></script>
  40. <script type="text/javascript" src="./js/Ext.ux.form.LangSelectCombo.js"></script>
  41. <script type="text/javascript" src="./filetree.js"></script>
  42. <script type="text/javascript" src="./locale/<?=@$_REQUEST['locale']?$_REQUEST['locale']:(@$_COOKIE['locale']?$_COOKIE['locale']:'en_US');?>.js"></script>
  43. <title id="page-title">Ext.ux.FileTreePanel Extension by Saki</title>
  44. </head>
  45.  
  46. <body>
  47. <div id="west-content" class="x-hidden">
  48. <div id="treepanel"></div>
  49. <br>
  50. <p>
  51. <a href="http://extjs.com/forum/showthread.php?t=29090" target="_blank">FileTreePanel Forum Thread</a><br><br>
  52. <a href="http://aariadne.com/filetree" target="_blank">Previous implementation (Ext 1.x)</a><br><br>
  53. <b>View Sources:</b><br>
  54. <a href="source.php?file=js/Ext.ux.FileTreePanel.js" target="_blank">Ext.ux.FileTreePanel.js</a><br>
  55. <a href="source.php?file=js/Ext.ux.FileTreeMenu.js" target="_blank">Ext.ux.FileTreeMenu.js</a><br>
  56. <a href="source.php?file=js/Ext.ux.UploadPanel.js" target="_blank">Ext.ux.UploadPanel.js</a><br>
  57. <a href="source.php?file=js/Ext.ux.form.BrowseButton.js" target="_blank">Ext.ux.form.BrowseButton.js</a><br>
  58. <a href="source.php?file=js/Ext.ux.FileUploader.js" target="_blank">Ext.ux.FileUploader.js</a><br>
  59. <a href="source.php?file=filetree.html" target="_blank">filetree.html</a><br>
  60. <a href="source.php?file=filetree.js" target="_blank">filetree.js</a><br>
  61. <a href="source.php?file=css/filetree.css" target="_blank">filetree.css</a><br>
  62. <br><a href="http://famfamfam.com/lab/icons/silk" target="_blank">Silk Icons</a><br>
  63. </p>
  64. <p>
  65. </p>
  66.  
  67. <div id="paypal">
  68. <!-- PayPal Donate Button -->
  69. <form action="https://www.paypal.com/cgi-bin/webscr" method="post">
  70. <input type="hidden" name="cmd" value="_s-xclick">
  71. <input type="image" src="https://www.paypal.com/en_US/i/btn/x-click-butcc-donate.gif" border="0" name="submit" alt="PayPal - The safer, easier way to pay online!">
  72. <img alt="" border="0" src="https://www.paypal.com/en_US/i/scr/pixel.gif" width="1" height="1">
  73. <input type="hidden" name="encrypted" value="-----BEGIN PKCS7-----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-----END PKCS7-----
  74. ">
  75. </form>
  76. <!-- PayPal Donate Button End-->
  77. </div>
  78.  
  79. <p><b>Downloads:</b></p>
  80. <a href="http://extjs.eu/phpmv2/phpmyvisites.php?url=http%3A//filetree.extjs.eu/filetree.tar.bz2&id=1&pagename=FILE: download/filetree/filetree.tar.bz2">filetree.tar.bz2</a><br>
  81. <a href="http://extjs.eu/phpmv2/phpmyvisites.php?url=http%3A//filetree.extjs.eu/filetree.tar.gz&id=1&pagename=FILE: download/filetree/filetree.tar.gz">filetree.tar.gz</a><br>
  82. <a href="http://extjs.eu/phpmv2/phpmyvisites.php?url=http%3A//filetree.extjs.eu/filetree.zip&id=1&pagename=FILE: download/filetree/filetree.zip">filetree.zip</a></br>
  83. <br>
  84. <p>
  85. Info: <a href="http://extjs.com/forum/showthread.php?p=147056" target="_blank">I want Saki's FileTree backend</a>
  86. </p>
  87. <p>
  88. <b><a href="http://extjs.eu" target="_blank">Other Extensions and Plugins</a></b>
  89. </p>
  90.  
  91. <!-- digg -->
  92. <div id="digg">
  93. <script>
  94. digg_url = 'http://filetree.extjs.eu';
  95. </script>
  96. <script src="http://digg.com/api/diggthis.js"></script>
  97. </div>
  98. <!-- digg -->
  99.  
  100. <a href="http://www.stumbleupon.com/submit?url=<?=urlencode('http://'.$_SERVER['SERVER_NAME'].$_SERVER['REQUEST_URI']);?>"><img border=0 src="../img/stumble7.gif" alt="StumbleUpon Toolbar"></a>
  101.  
  102. </div>
  103.  
  104. <div id="center-content" class="x-hidden">
  105. <h1>FileTreePanel Client-Server Interface Specification</h1>
  106. <p>
  107. FileTreePanel is client-server application where client (browser) provides
  108. the user interface (UI) which displays the tree and context menu, handles
  109. drag &amp; drop operations, etc. The filesystem that is displayed and managed by
  110. the UI is stored on a server.
  111. </p>
  112.  
  113. <p>
  114. Therefore, we need some communication layer between client and server. Client sends
  115. a command to server, server processes this command and responds with a result. Client
  116. in turn processes the response and display results.
  117. </p>
  118.  
  119. <p>
  120. All this communication is running in the background by <a href="http://developer.mozilla.org/en/docs/XMLHttpRequest">Ajax (XMLHttpRequest)</a>
  121. calls. The XMLHttpRequest is not used directly but the <a href="http://extjs.com">Ext JS - JavaScript Library</a>
  122. ajax layer is used for this purpose.
  123. <p>
  124.  
  125. <p>
  126. Client requests data from server with standard POST method and server is expected to respond
  127. with <a href="http://json.org">JSON</a> (JavaScript Object Notation) string and appropriate
  128. HTTP headers.
  129. </p>
  130. <h3>Example of rename command:</h3>
  131.  
  132. <h4>POST Request:</h4>
  133. <pre> cmd rename
  134. newname root/abc.txt
  135. oldname root/a.txt</pre>
  136.  
  137. <h4>Response headers:</h4>
  138. <pre>Content-Type: application/json, charset=utf-8</pre>
  139.  
  140. <h4>Response content of success:</h4>
  141. <pre>{"success":true}</pre>
  142.  
  143. <h4>Response content of failure:</h4>
  144. <pre>{"success":false,"error":"Cannot rename file root/a.txt to root/abc.txt"}</pre>
  145.  
  146. <p>
  147. The response headers are same as above for all responses, unless mentioned otherwise,
  148. and they are therefore omitted from the following specification.
  149. </p>
  150.  
  151. <div class="adsense x-hidden">
  152. <script type="text/javascript"><!--
  153. google_ad_client = "pub-2768521146228687";
  154. /* 468x60, in-text */
  155. google_ad_slot = "4459222165";
  156. google_ad_width = 468;
  157. google_ad_height = 60;
  158. //-->
  159. </script>
  160. <script type="text/javascript"
  161. src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
  162. </script>
  163. </div>
  164.  
  165. <h2>Paths</h2>
  166. <p>
  167. The server side filesystem that is managed by FileTreePanel starts at a directory
  168. that is defined by the server for security purposes. Client cannot change its root
  169. by any command.
  170. </p>
  171. <h3>Example of filesystem:</h3>
  172. <h4>Server viewpoint:</h4>
  173. <pre>/data/userfiles/root_for_client/dir1/file1
  174. /data/userfiles/root_for_client/dir1/file2
  175. /data/userfiles/root_for_client/dir2/file1
  176. /data/userfiles/root_for_client/dir2/file2</pre>
  177.  
  178. <h4>Client viewpoint:</h4>
  179. <pre>root_for_client/dir1/file1
  180. root_for_client/dir1/file2
  181. root_for_client/dir2/file1
  182. root_for_client/dir2/file2</pre>
  183.  
  184. <p>Now, when client asks server "gimme nodes in <code>root_for_client</code>" the
  185. server prepends absolute or relative root path, reads relevant part of the filesystem
  186. and returns nodes. In our example, the server would prepend <code>/data/userfiles/</code>
  187. to each client's request.
  188. </p>
  189. <p>It is server job to handle invalid requests or requests that can be potentially insecure
  190. like ones starting with <b>/</b> or <b>..</b> The same must be true for all commands sent
  191. from the client.
  192. </p>
  193. <p>&nbsp;</p>
  194.  
  195. <h1>Commands</h1>
  196. <h2><i>get</i> command</h2>
  197. <h4>Request:</h4>
  198. <pre> cmd get
  199. path root/a</pre>
  200.  
  201. <h4>Response:</h4>
  202. <pre>[
  203. {"text":"b","iconcls":"folder","disabled":false,"leaf":false},
  204. {"text":"a.txt","iconCls":"file-txt","disabled":false,"leaf":true,"qtip":"Size: 1047552"}
  205. ]</pre>
  206.  
  207. <p><b><i>Note:</i></b> The response above is shown in four lines only for the purposes
  208. of this specification to be more readable by humans. The line breaks must not be sent
  209. from the server as a part of JSON string.
  210. </p>
  211.  
  212. <p>In the above example, we request server to deliver nodes of path <code>root/a</code>
  213. and it responds with one directory named <code>b</code> and one file named <code>a.txt</code>.
  214. <code>"text":"b"</code> in the response is the name of the directory and <code>"text":"a.txt"</code>
  215. is the name of the file. Note that server sends just names, not
  216. full paths of nodes.
  217. </p>
  218. <p>
  219. <code>"iconCls":"file-txt"</code> in the response is to display correct file type icon by client and
  220. <code>"qtip":"Size: 1047552"</code> is optional text for file tooltip. <code>leaf</code> property
  221. distinguishes files from folders and <code>disabled</code> is true for read-only files or folders.
  222. </p>
  223. <p>
  224. For the other possible properties that the tree can process if they are sent from the server consult
  225. <a href="http://extjs.com/deploy/dev/docs/">Ext JS Documentation</a>.
  226. </p>
  227.  
  228. <div class="adsense x-hidden">
  229. <script type="text/javascript"><!--
  230. google_ad_client = "pub-2768521146228687";
  231. /* 468x60, in-text */
  232. google_ad_slot = "4459222165";
  233. google_ad_width = 468;
  234. google_ad_height = 60;
  235. //-->
  236. </script>
  237. <script type="text/javascript"
  238. src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
  239. </script>
  240. </div>
  241.  
  242. <h2><i>rename</i> command</h2>
  243. <h4>Request:</h4>
  244. <pre> cmd rename
  245. newname root/abc.txt
  246. oldname root/a.txt</pre>
  247.  
  248. <h4>Response of success:</h4>
  249. <pre>{"success":true}</pre>
  250.  
  251. <h4>Response of failure:</h4>
  252. <pre>{"success":false,"error":"Cannot rename file root/a.txt to root/abc.txt"}</pre>
  253.  
  254. <p>
  255. Error message text in the above example is not obligatory - server can send any kind of an
  256. error message, e.g. localized text.
  257. </p>
  258. <p>&nbsp;</p>
  259.  
  260. <h2><i>newdir</i> command</h2>
  261. <h4>Request:</h4>
  262. <pre>cmd newdir
  263. dir root/a/b</pre>
  264.  
  265. <h4>Response of success:</h4>
  266. <pre>{"success":true}</pre>
  267.  
  268. <h4>Response of failure:</h4>
  269. <pre>{"success":false,"error":"Cannot create directory: root/a/b"}</pre>
  270. <p>&nbsp;</p>
  271.  
  272. <h2><i>delete</i> command</h2>
  273. <h4>Request:</h4>
  274. <pre> cmd delete
  275. file root/a/b</pre>
  276.  
  277. <h4>Response of success:</h4>
  278. <pre>{"success":true}</pre>
  279.  
  280. <h4>Response of failure:</h4>
  281. <pre>{"success":false,"error":"Cannot delete: root/a/b"}</pre>
  282. <p>&nbsp;</p>
  283.  
  284. <h2><i>upload</i> command</h2>
  285. <h4>Request:</h4>
  286. <pre> cmd upload
  287. path root/a
  288. </pre>
  289.  
  290. <h4>Response headers:</h4>
  291. <pre>Content-Type: text/html, charset=utf-8</pre>
  292.  
  293. <h4>Response of success:</h4>
  294. <pre>{"success":true}</pre>
  295.  
  296. <h4>Response of failure:</h4>
  297. <pre>{"success":false,"errors":{"ext-gen524":"File upload error."}}</pre>
  298. <p>
  299. File uploads are handled differently. First of all, server has to respond with <code>text/html</code>
  300. content type and, in the case of failure, it has to respond with <code>errors</code> object
  301. with an error message for each uploaded file. Properties of <code>errors</code>
  302. object are &lt;input type="file"&gt; field names. These names are auto-generated and they
  303. are available at server while processing the file uploads.
  304. </p>
  305. <p>
  306. Server has to ignore <code>NO_FILE</code> error and it has to report <code>"success":true</code> only if
  307. all files have been uploaded successfully.
  308. </p>
  309. </div>
  310.  
  311. <div id="adrow-content" class="adsense x-hidden">
  312. <div id="adsense-top">
  313. <script type="text/javascript"><!--
  314. google_ad_client = "pub-2768521146228687";
  315. /* recordform top row wide */
  316. google_ad_slot = "3909046423";
  317. google_ad_width = 728;
  318. google_ad_height = 15;
  319. //-->
  320. </script>
  321. <script type="text/javascript"
  322. src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
  323. </script>
  324. </div>
  325. </div>
  326.  
  327. <?if("filetree.extjs.eu"===$_SERVER["SERVER_NAME"])include("stats.php");?>
  328. </body>
  329. </html>
  330. <!-- eof -->