JSHTMLWidget is an extension that allows the instantiation of a html widget and inclusion of dependent js/css files. Due to security reasons there are special directories where the html files are placed. Also the js and css files that are referenced from the resulting page need to reside in a special location (in order to prevent cross site scripting attacks). For the moment, JSHTMLWidget is used for two separate tasks:
- TaskMonitor - this widget enable Fodora Commons Repository online management;
- QueryEditor - This widget can be use in relation with Semantic MediaWiki and assist user in semantic inline queries creation.
Use of JSHTMLWidget
<JSHTMLWidget htmlbody="body.html" jsincludes="file1.js|file2.js|..|filen.js" cssincludes="file1.css|file2.css|...|filen.css"> </JSHTMLWidget>
The above markup will be expanded in with the content of the “widget.html” file. Also the jsincludes files and cssinclude files will be referenced in the <head> section of the rendered page.
In order to be able to include the specified js and css files the $wgAllowUserJs and $wgAllowUserCss variables need to be set to the value “true” in the LocalSettings.php (or whatever configuration file is used).
The TaskMonitor widget uses the JSHTMLWidget extension. The widget uses the following files:
- TaskMonitor/body.html – the html body of the widget.
- TaskMonitor/refresh.js – the js file that contains the js code that send AJAX requests to the server in order to update the status of the tasks;
- TaskMonitor/taskmonitor.css – contains css markup used by the html elements in the widget’s body;
TaskList widget periodically sends an AJAX request to the server to update the status of the tasks displayed in the page.
Use of TaskMonitor widget
<JSHTMLWidget htmlbody="TaskMonitor/body.html" jsincludes="lib/jquery/jquery-1.3.1.js|lib/jTemplates/jquery-jtemplates_uncompressed.js|TaskMonitor/refresh.js" cssincludes="TaskMonitor/taskmonitor.css"></JSHTMLWidget>
Notice: Special thanks to my friend Cristian Botau who helped me with this extension development. --Lia Veja 12:05, 6 January 2010 (CET)
Installation of online view of tasks management
The following steps are necessary for this application's installation:
- create the path /usr/share/mediawiki/phase3/js2/Widgets/TaskMonitor on Debian for /lib folder, refresh.js and taskmonitor.css file, so that http://biowikifarm.net/metawiki/js2/Widgets/TaskMonitor/refresh.js could be accessed from browser;
- create the symbolic link:
ln -s /var/www/tools/FedoraIngestEngine/time.xml time.xml
- java based application will read fedoralogs database and will generate time.xml file in the fixed location: /var/www/tools/FedoraIngestEngine/time.xml.
- we have not a real explanation, but LocalSettings.php on file should be "touched" and saved again after these steps!
The QueryEditor widget allows semantic queries creation and inline evaluation of the results. Any time when user adds a new condition, the condition is re-evaluated and sent to server and the result is displayed on a special panel on the left side of the screen. For this widget usage, Semantic MediaWiki extension should be by enabled. The QueryEditor widget uses the JSHTMLWidget extension. The widget uses the following files:
- QueryEditor/QueryEditorTemplate.htm – the html body of the widget.
- QueryEditor/QueryEditor.js – the js file that contains the js code that send AJAX requests to the server in order to evaluate the current semantic query edited by user;
- QueryEditor/base.css and QueryEditor/form.css – contain css markup used by the html elements in the widget’s body;
QueryEditor widget periodically sends an AJAX request to the server to re-evaluate the current semantic query inserted by user and display image samplings in the page.
Notice: Internally, it requires the global variable wgwMedia setup at the value of the path on the current MediaWiki Commons Repository.
Use of QueryEditor widget
The QueryEditor widget can be used in two modes:
Directly in wiki pages
The user should edit wiki page where she/he needs assistance for semantic queries creation, by inserting the following string into the page:
<JSHTMLWidget htmlbody="QueryEditor/QueryEditorTemplate.htm" * jsincludes="QueryEditor/lib/jquery/jquery.ae.image.resize.js|QueryEditor/lib/jquery/jquery.md5.js|QueryEditor/QueryEditor.js" * cssincludes="QueryEditor/base.css|QueryEditor/form.css"></JSHTMLWidget>
This methods is tedious and not recommended for common usage.
Edit panel is provided with a button having ASK label. This button will insert automatically a template:
allowing a simple request of the widget with parameters.