VIE Widget - Auto Tagger

How To

First, we need to include the dependencies in the header:

...
<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});
If that documentation is of no help for you, do not hesitate to contact me. I am a friendly person who loves to support you with integrating the widget in your site.
Click here to go back to the demo.

Download