Create widgets

It is possible to extend the XML editor in Lexonomy with widgets. For example, buttons to search the corpus and include results into the entry data structure are created as a widget. For more samples, have a look at the directory website/widgets.

There are two types of widgets: configure pages and extensions to the editor.

Configure pages

These widgets take are various dictionary settings, accessible from the Configure page. For example, Configure - Users page is created by widget users.js.

Each widget is JavaScript object with functions. For that reason, first line is

var Users={};

Each configuration widget must include two functions: render() and harvest().

Users.render=function(div, json){
}

Render function will receive configuration data in JSON format from the database in json variable, and create HTML form based on the data. The form is appended to div variable.

Users.harvest=function(div){
}

Harvest function is responsible for data collection. It must collect all relevant data from the form and return then as an object. In the next step, the data are converted to JSON format and stored in the database.

You may create more functions as needed, but render and harvest must be included always.

Extend the editor

These widgets are loaded in the entry editor and may extend the editing features, add new kinds of data, allow searching in external sources, etc. For example, links to search in the Sketch Engine corpora are created with widget ske.js + ske.css (for formatting). JavaScript (and any other supporting files) must be linked in views/entryeditor.tpl. Also, the "starting point" must be accessed in entryeditor.tpl, for example:

<script type="text/javascript" src="../../../widgets/ske.js"></script>
<link type="text/css" rel="stylesheet" href="../../../widgets/ske.css" />

Ske.extendDocspec(docSpec, xema);

The extendDocspec function is given two parameters: docSpec (structure specification for the Xonomy editor) and xema (entry structure with elements, attributes, and their properties).

Other useful variables that are available in the widget:

• xemplate - entry formatting rules
• kex, xampl, thes, collx, defo -
• subbing - setting of subentries
• titling - setting of headword and sorting
• flagging - setting for flags in entry
• linking - manual links setting

You have access to full HTML page of the entry editor and it's possible to e.g. add new div to display information.

Also, you have access to Xonomy functions to manipulate entry editor form, or get XML representation of data:

Xonomy.harvest() // full XML of entry
Xonomy.harvestElement(elementName) // XML of one element

titling.headword // name of element that contains entry headword
xema.elements[elementName] // structure and properties of element

If you need to display box/container for your own data, you can use Xonomy function makeBubble.

document.body.appendChild(Xonomy.makeBubble(html)); // html is HTML code to display in the bubble

Extend public preview

Create the widget the same way as for the editor. You may of course use the same Javascript file both for editor and preview. JavaScript (and any other supporting files) must be linked in views/dict-editor.tpl. At the moment, html code of entry preview need to be extended with the call to the right function. This is done in lexonomy.py, in publicentry function. This behaviour will be changed in the future to work only with calls from preview template.

In lexonomy.py:

html += "<script type='text/javascript'>Gmedia.addVoicePublic('" + re.sub(r"\<[^\<\>]+\>", "", _title) + "');</script>"

In widget Javascript file, e.g. gmedia.js:

Gmedia.addVoicePublic=function(headword) {
$('#viewer div:first span:first').after(HTML Code);