... <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});