Difference between revisions of "Extension:JSHTMLWidget"
(→QueryEditor Widget) |
|||
| (2 intermediate revisions by the same user not shown) | |||
| Line 2: | Line 2: | ||
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). | 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 === | === Use of JSHTMLWidget === | ||
| − | <JSHTMLWidget htmlbody="body.html" jsincludes="file1.js|file2.js|..|filen.js" cssincludes="file1.css|file2.css|...|filen.css"> | + | <nowiki><JSHTMLWidget htmlbody="body.html" jsincludes="file1.js|file2.js|..|filen.js" cssincludes="file1.css|file2.css|...|filen.css"> |
| − | </JSHTMLWidget> | + | </JSHTMLWidget></nowiki> |
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. | 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. | ||
| Line 13: | Line 16: | ||
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). | 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). | ||
| − | === | + | === TaskMonitor Widget === |
| − | The | + | The TaskMonitor widget uses the JSHTMLWidget extension. The widget uses the following files: |
* TaskMonitor/body.html – the html body of the widget. | * 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/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; | ||
| Line 22: | Line 25: | ||
TaskList widget periodically sends an AJAX request to the server to update the status of the tasks displayed in the page. | TaskList widget periodically sends an AJAX request to the server to update the status of the tasks displayed in the page. | ||
| − | === Use of | + | ==== Use of TaskMonitor widget ==== |
<nowiki><JSHTMLWidget htmlbody="TaskMonitor/body.html" | <nowiki><JSHTMLWidget htmlbody="TaskMonitor/body.html" | ||
| Line 30: | Line 33: | ||
Notice: Special thanks to my friend Cristian Botau who helped me with this extension development. --[[User:LiaVeja|Lia Veja]] 12:05, 6 January 2010 (CET) | Notice: Special thanks to my friend Cristian Botau who helped me with this extension development. --[[User:LiaVeja|Lia Veja]] 12:05, 6 January 2010 (CET) | ||
| − | == Installation of online view of tasks management == | + | ==== Installation of online view of tasks management ==== |
The following steps are necessary for this application's installation: | The following steps are necessary for this application's installation: | ||
| Line 46: | Line 49: | ||
=== QueryEditor Widget === | === QueryEditor Widget === | ||
| + | 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: | The QueryEditor widget uses the JSHTMLWidget extension. The widget uses the following files: | ||
* QueryEditor/QueryEditorTemplate.htm – the html body of the widget. | * 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/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/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 | + | * 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. |
| − | 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. | 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. | Notice: Internally, it requires the global variable wgwMedia setup at the value of the path on the current MediaWiki Commons Repository. | ||
Latest revision as of 12:09, 7 December 2010
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). 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.
- 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).
TaskMonitor Widget
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;
- 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 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;
- 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 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;
- 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.
