Tutorial: jQuery and the Talis platform
We will use the jQuery.Talis plugin to create a simple html+js interface to a talis store.
the Talis plugin is a small wrapper that simplifies retrieving json from the platform remotely (via jsonp). It allows you to query the platform, and specify callback functions for dealing with the retrieved data.
We’ll have a text box to type a search string into; this will retrieve results (of matching resource descriptions) from the platform store, and display them in a list of links. Clicking on the links will display the resource description.
1. The HTML:
We are going to need three elements for this:
- A text input for typing the search strings into:
<label for="search">Search<input type="text/submit/hidden/button" name="search" id="search"/></label>
- A list to insert the search results into.
<ol id="results"></ol>and:
- A div to display the resource descriptions in:
<div id="description"></div>
2 The Javascript
At the command line, switch to the directory you saved your HTML file in, and do:
svn co http://n2.talis.com/svn/playground/kwijibo/js/Talis.jQuery.plugin/trunk/ js/
Now we link to the javascript files from the bottom of the <body> of our html page:
<script type="text/javascript" charset="utf-8" src="js/jquery.js" mce_src="js/jquery.js"></script> <script type="text/javascript" charset="utf-8" src="js/Talis.jQuery.js" mce_src="js/Talis.jQuery.js"></script> <script type="text/javascript" charset="utf-8" src="js/jsRDF.jquery.js" mce_src="js/jsRDF.jquery.js"></script>
(jsRDF.jQuery.js is just a small, nascent library for manipulating RDF/JSON )
Now open another script tag, and we’ll write some javascript to connect our html with the platform:
First, we’ll declare some variables we’ll want to use:
var RSS_ITEM = 'http://purl.org/rss/1.0/item'; var RDF_TYPE = 'http://www.w3.org/1999/02/22-rdf-syntax-ns#type'; var MY_STORE = 'schema-cache';
For this tutorial, I’m using the schema-cache store, which contains many RDF and OWL vocabularies.
Now, what we want is to query the platform when we type in the text box, so:
$("#search").keyup(function(){
var query = $("search").val();
$.Talis.Store(MY_STORE).items(query, function(json){
/* we do something with the json data from the platform in here ... */
});
});
What’s happening here, is we are taking the text that has been typed in the textbox (#search), and querying the items service of our store with it. The second parameter of the Store.items method is a callback function, in which you can specify what to do with the data when it is retrieved.
The platform items service returns the results in an RSS feed, which the jQuery.Talis plugin fetches for us in rdf/json, however, for this, we only want the items of the feed, not the RSS feed resource itself, so we need to filter in only the resources that have rss:Item as a value of their rdf:type property:
var RDF = $.jsRDF(json);
var rss_items = RDF.filter({p:RDF_TYPE, o:{value:RSS_ITEM}});
Here, we are loading the data into a jsRDF object, which has methods for manipulating it. We’re using the filter method to select the resources that have an rdf:type of rss:Item. Now we want to render them in the page inside our #results list:
$.each(rss_items, function(uri, properties){
$("#results").append('<li><a href="'+uri+'" mce_href="'+uri+'">'+RDF.get_label(uri)+'</a></li>');
});
OK. We want clicking on those links to show the resource description, so we’ll define a function for retrieving that description from the store, and rendering it, then we’ll bind it the onclick event of the links in the results list:
function browse(uri){
var uri = this.href;
$.Talis.Store(MY_STORE).lcbd(uri, function(data){
var RDF = new $.jsRDF(data);
$('#description').html( RDF.to_html(uri) );
$('#description dd a').click(browse);
});
return false;
}
We get the URI of the resource from the @href attribute (which we set when we were rendering the search results), then we call the lcbd method on our store (LCBD is short for labelled concise bounded description, and returns the properties of the resource, and labels for all the resources our description references). Again, we use the $.jsRDF object to render the description as html (it uses a definition list for rendering the properties of the resource).
After we’ve rendered the description in the #description div, we also bind the click event on the links to the resource’s properties to the browse function, so that clicking on those links will retrieve and render the resources being linked to.
And that’s pretty much it.
