Extension:JSHTMLWidget

From Biowikifarm Metawiki
Revision as of 12:06, 7 December 2010 by LiaVeja (Talk | contribs) (→‎JSHTMLWidget Extension)

Jump to: navigation, search

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. 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.

Retrieved from "https://biowikifarm.net/metawiki/index.php?title=Extension:JSHTMLWidget&oldid=3235"