... <script type="text/javascript" src=".../jquery.js"></script> <script type="text/javascript" src=".../underscore.js"></script> <script type="text/javascript" src=".../backbone.js"></script> <script type="text/javascript" src=".../jquery.rdfquery.js"></script> <script type="text/javascript" src=".../vie-2.0.0.js"></script> <script type="text/javascript" src=".../jquery-ui.js"></script> <!-- the current VIE widget --> <script type="text/javascript" src="./vie.widget.auto_tagger.js"></script> ...
Now, we need to set-up the widget and bind it to certain events:
<script type="text/javascript">
$(function() {
// initialize a global VIE object
var myVIE = window.myVIE = new VIE();
myVIE.loadSchema("http://schema.rdfs.org/all.json", {
baseNS : "http://schema.org/",
success : function () {
finishSetUp();
},
error : function (e) {
//...
}
});
function finishSetUp () {
$('article > section')
.click(function (ev) {
// perform the auto-tagging
$(this).vieAutoTag("tagit");
})
// set-up of the widget
.vieAutoTag({
// your local VIE instance
vie : myVIE,
// language-order to be checked for
lang : ["en", "de", "es"],
// append new entities or create new list
append : true,
// setup of each service (default: use is set to false)
services : {
stanbol : {use : true},
zemanta : {use : true, api_key : "<your_FLICKR_API_KEY_HERE>"},
rdfa : {use : true},
},
// each bin is defined as an object, containing:
// (1) element: the element, the entities should be added to
// (2) filter: either a function that checks for each entity
// if that entity should be shown in the current
// element, OR, an array of strings that represent
// VIE.Types to be checked for.
// (3) label : either a method that extracts a label from an
// entity (needs to return a string), OR an array
// of attributes.
bins : [{
element : $('#persons'),
filter: ["Person"],
label: function (entity) {
return VIE.Util.getPreferredLangForPreferredProperty(
entity,
["name", "rdfs:label"],
this.options.lang);
}
},
{
element : $('#places'),
filter: function (entity) {
return entity.isof("Place")
},
label: ["name"]
}]
});
};
});
Events
Pre-init
// the event is thrown when a service-query is started
$('...').bind('vieautotagstart_query', function (ev) {...});
// the event is thrown when a service-query ends
$('...').bind('vieautotagend_query', function (ev) {...});
// the event is thrown when a warning arised
$('...').bind('vieautotagwarn', function (ev) {...});
// the event is thrown when an error happened
$('...').bind('vieautotagerror', function (ev) {...});
Options
Post-init
// the instance of VIE
$('...').vieAutoTag("option", "vie", myVIE);
// an array of languages that is used to perform language-specific queries
$('...').vieAutoTag("option", "lang", ["en", "de", "es", ...]);
// append new entities or create new list
$('...').vieAutoTag("option", "append", {true|false});
// a timeout if the queries take too long. default: 10 seconds
$('...').vieAutoTag("option", "timeout", 1000);
// each bin is defined as an object, containing (see above)
$('...').vieAutoTag("option", "bins",
[{
element : $(...),
filter: ["Thing"],
label: ["name", "rdfs:label"]
}]
);
Options
Pre-init
$('...').vieAutoTag({
"vie" : myVIE,
"lang" : ["en", "de", "es", ...],
"timeout" : 10000,
"append" : {true|false},
"bins" : [{...}, ...]
});
Methods
// get the widget's instance
var widget = $('...').data("vieAutoTag");
// list all available services
widget.options.services;
// change to use a service, e.g., stanbol, post-init)
$('...').vieAutoTag("useService", 'stanbol', {true|false});

