Tabulator — Creating a New Pane — Part 2

Last week, we looked at how to create a new tabulator pane.  The first part was just a template, without any real content.  This time we will look at how to add a pane for a specific object type and to query the object’s fields and display them in the pane.  If you havent already completed the first part, go back and follow the instructions to make a new file microblogPostPane.js.  This is the file we’ll be editing in this part.

Step 1 — Only Display an Icon for Microblog Posts

Previously we would display our microblog icon in all cases.  We would rather only show the icon when we are looking at a microblog post.  Instead of the if (true) condition we had in the label() function we will now replace it with:

    var SIOCt = tabulator.rdf.Namespace('http://rdfs.org/sioc/types#');
    if (tabulator.kb.whether(
        subject, tabulator.ns.rdf('type'), SIOCt('MicroblogPost'))) {
      return "MicroblogPost";          //The icon text
    } else {
      return null;
    }

The kb.whether function will test whether we are looking at something of type SIOC MicroblogPost.  More on the kb later.

Step 2 — Initialize the Render Function

The first thing to initialize is the tabulator knowledge base.  The following code will go in the render() function.

    var kb   = tabulator.kb;

The knowledge base is an indexed database of all the information you will store.  It allows many features such as fast querying and utility functions.  As you browse the web of data, the knowledge base is automatically populated.   The next thing we will do is set up namespaces.

    var SIOC = tabulator.rdf.Namespace("http://rdfs.org/sioc/ns#");
    var dc   = tabulator.rdf.Namespace("http://purl.org/dc/elements/1.1/");
    var FOAF = tabulator.rdf.Namespace('http://xmlns.com/foaf/0.1/');

Once we have the knowledge base in place, we add the popular namespaces for the FOAF, dublin core and SIOC ontologies.

Step 3 — Query the Knowledge Base

We will use the kb.any function to get the values of data points for our microblog post.  The function queries the knowledge base in a similar way to NoSQL or map reduce style databases.  In this case we will get the avatar, name, content and date of the microblog post.

    var content = kb.any(subject, SIOC("content"));
    var date    = kb.any(subject, dc("date"));
    var maker  = kb.any(subject, FOAF("maker"));
    var name  = kb.any(maker, FOAF("name"));
    var avatar  = kb.any(maker, FOAF("depiction"));

Now that we have our data we can go ahead and display it.

Step 4 — Draw the Pane

Now that we have our data, all that’s left is to draw the microblog post.  I’m using a simple native javascript commands of createElement, createTextNode and appendChild.  However tabulator also works with jQuery too.

    var postLi = document.createElement("div");
    postLi.className = "post";
    main.appendChild(postLi);

    var img = document.createElement("img");
    img.src = (""+avatar).slice(1,-1);
    img.height = img.width = 50;
    img.className = "postAvatar";
    postLi.appendChild(img);

    var nameHeading = document.createElement("h3");
    nameHeading.appendChild(document.createTextNode(name));
    postLi.appendChild(nameHeading);

    var contentDiv = document.createElement("div");
    contentDiv.appendChild(document.createTextNode(content));
    postLi.appendChild(contentDiv);

    var dateDiv = document.createElement("div");
    dateDiv.appendChild(document.createTextNode(date));
    postLi.appendChild(dateDiv);

The basic styles live in an existing file, mbStyle.css, so I have just reused that.

Step 5 — Test the Microblog Post

If all has gone well your file should look like the following gist.  When clicking on a microblog post such as this test post, you should see something like the image above.

Summary

We’ve seen how to add a simple pane to The Tabulator, how to set up and query the knowledge base, and how to display a new pane in the tabulator.  In future blogs we will show how to use Tabuator’s read and write functions to both render, and update, the web of data!