gistfile1.js

tabulator.panes.register( {

  icon: tabulator.Icon.src.icon_mbPost,//This icon should be defined in icons.js
  label: function(subject) {           //'subject' is the source of the document
    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;
    }
  },

  render: function(subject, document) {

    var kb   = tabulator.kb;
    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/');

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

    var main = document.createElement("div");
    main.className = "ppane";

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

    return main;
  }

} , true);