Extension:JSHTMLWidget
Contents
JSHTMLWidget Extension
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).
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.
- Requirements
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).
TaskList Widget
The TaskList 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;
- It also uses the JQuery library for DOM manipulation and JTemplates for manipulation of html templates in javascript.
TaskList widget periodically sends an AJAX request to the server to update the status of the tasks displayed in the page.
Use of TaskList 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;
- the javascript refresh.js file tries to access "/metawiki/js2/Widgets/TaskMonitor/time.xml". In order to do this, a symbolic link will give the access to time.xml file from this location.
- 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!
touch /var/www/metawiki/LocalSettings.php
QueryEditor Widget
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;
- It also uses the JQuery library for DOM manipulation and in javascript. For md5 algorithm calculus and thumbnails creation uses
jquery.md5.js and jquery.ae.image.resize.js, respectively. 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.
Using ASK button
Edit panel is provided with a button having ASK label. This button will insert automatically a template:
{{SemanticQueries}}
allowing a simple request of the widget with parameters.
