{"id":282,"date":"2013-07-26T12:40:53","date_gmt":"2013-07-26T12:40:53","guid":{"rendered":"http:\/\/www.w3.org\/community\/rww\/?p=282"},"modified":"2013-07-26T12:40:53","modified_gmt":"2013-07-26T12:40:53","slug":"tabulator-creating-a-new-pane-part-2","status":"publish","type":"post","link":"https:\/\/www.w3.org\/community\/rww\/2013\/07\/26\/tabulator-creating-a-new-pane-part-2\/","title":{"rendered":"Tabulator \u2014 Creating a New Pane \u2014 Part 2"},"content":{"rendered":"

Last week, we looked at how to create a new tabulator pane<\/a>.\u00a0 The first part was just a template, without any real content.\u00a0 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.\u00a0 If you havent already completed the first part, go back and follow the instructions to make a new file microblogPostPane.js<\/strong>.\u00a0 This is the file we’ll be editing in this part.<\/p>\n

Step 1 — Only Display an Icon for Microblog Posts<\/span><\/h2>\n

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

    var<\/span> SIOCt =<\/span> tabulator.rdf.Namespace('http:\/\/rdfs.org\/sioc\/types#'<\/span>);\r\n    if<\/span> (tabulator.kb.whether(\r\n        subject, tabulator.ns.rdf('type'<\/span>), SIOCt('MicroblogPost'<\/span>))) {\r\n      return<\/span> \"MicroblogPost\"<\/span>;          \/\/The icon text<\/span>\r\n    } else<\/span> {\r\n      return<\/span> null;\r\n    }<\/pre>\n
The kb.whether function will test whether we are looking at something of type SIOC MicroblogPost.\u00a0 More on the kb later.<\/p>\n
Step 2 — Initialize the Render Function
\n<\/span><\/h2>\n
The first thing to initialize is the tabulator knowledge base.\u00a0 The following code will go in the render() function.<\/p>\n
    var<\/span> kb   =<\/span> tabulator.kb;<\/pre>\n
The knowledge base is an indexed database of all the information you will store.\u00a0 It allows many features such as fast querying and utility functions.\u00a0 As you browse the web of data, the knowledge base is automatically populated.\u00a0\u00a0 The next thing we will do is set up namespaces.<\/p>\n
    var<\/span> SIOC =<\/span> tabulator.rdf.Namespace(\"http:\/\/rdfs.org\/sioc\/ns#\"<\/span>);\r\n    var<\/span> dc   =<\/span> tabulator.rdf.Namespace(\"http:\/\/purl.org\/dc\/elements\/1.1\/\"<\/span>);\r\n    var<\/span> FOAF =<\/span> tabulator.rdf.Namespace('http:\/\/xmlns.com\/foaf\/0.1\/'<\/span>);<\/pre>\n
Once we have the knowledge base in place, we add the popular namespaces for the FOAF, dublin core and SIOC ontologies.<\/p>\n
Step 3 — Query the Knowledge Base
\n<\/span><\/h2>\n
We will use the kb.any function to get the values of data points for our microblog post.\u00a0 The function queries the knowledge base in a similar way to NoSQL or map reduce style databases.\u00a0 In this case we will get the avatar, name, content and date of the microblog post.<\/p>\n
    var<\/span> content =<\/span> kb.any(subject, SIOC(\"content\"<\/span>));\r\n    var<\/span> date    =<\/span> kb.any(subject, dc(\"date\"<\/span>));\r\n    var<\/span> maker  =<\/span> kb.any(subject, FOAF(\"maker\"<\/span>));\r\n    var<\/span> name  =<\/span> kb.any(maker, FOAF(\"name\"<\/span>));\r\n    var<\/span> avatar  =<\/span> kb.any(maker, FOAF(\"depiction\"<\/span>));<\/pre>\n
Now that we have our data we can go ahead and display it.<\/p>\n
Step 4 — Draw the Pane
\n<\/span><\/h2>\n
Now that we have our data, all that’s left is to draw the microblog post.\u00a0 I’m using a simple native javascript commands of createElement, createTextNode and appendChild.\u00a0 However tabulator also works with jQuery too.<\/p>\n
    var<\/span> postLi =<\/span> document.createElement(\"div\"<\/span>);\r\n    postLi.className =<\/span> \"post\"<\/span>;\r\n    main.appendChild(postLi);\r\n\r\n    var<\/span> img =<\/span> document.createElement(\"img\"<\/span>);\r\n    img.src =<\/span> (\"\"<\/span>+<\/span>avatar).slice(1<\/span>,-<\/span>1<\/span>);\r\n    img.height =<\/span> img.width =<\/span> 50<\/span>;\r\n    img.className =<\/span> \"postAvatar\"<\/span>;\r\n    postLi.appendChild(img);\r\n\r\n    var<\/span> nameHeading =<\/span> document.createElement(\"h3\"<\/span>);\r\n    nameHeading.appendChild(document.createTextNode(name));\r\n    postLi.appendChild(nameHeading);\r\n\r\n    var<\/span> contentDiv =<\/span> document.createElement(\"div\"<\/span>);\r\n    contentDiv.appendChild(document.createTextNode(content));\r\n    postLi.appendChild(contentDiv);\r\n\r\n    var<\/span> dateDiv =<\/span> document.createElement(\"div\"<\/span>);\r\n    dateDiv.appendChild(document.createTextNode(date));\r\n    postLi.appendChild(dateDiv);<\/pre>\n
The basic styles live in an existing file, mbStyle.css, so I have just reused that.<\/p>\n
Step 5 — Test the Microblog Post<\/span><\/h2>\n
\"\"<\/a><\/p>\n
If all has gone well your file should look like the following gist<\/a>.\u00a0 When clicking on a microblog post such as this test post<\/a>, you should see something like the image above.<\/p>\n
Summary<\/span><\/h2>\n
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.\u00a0 In future blogs we will show how to use Tabuator’s read and write functions to both render, and update, the web of data!<\/p>\n","protected":false},"excerpt":{"rendered":"
Last week, we looked at how to create a new tabulator pane.\u00a0 The first part was just a template, without any real content.\u00a0 This time we will look at how to add a pane for a specific object type and … Continue reading →<\/span><\/a><\/p>\n","protected":false},"author":26,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_s2mail":"yes","footnotes":""},"categories":[19],"tags":[16,15,13,21,20],"class_list":["post-282","post","type-post","status-publish","format-standard","hentry","category-rww-2","tag-linkeddata","tag-rww","tag-readwriteweb","tag-tabulator","tag-w3c"],"_links":{"self":[{"href":"https:\/\/www.w3.org\/community\/rww\/wp-json\/wp\/v2\/posts\/282","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.w3.org\/community\/rww\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.w3.org\/community\/rww\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.w3.org\/community\/rww\/wp-json\/wp\/v2\/users\/26"}],"replies":[{"embeddable":true,"href":"https:\/\/www.w3.org\/community\/rww\/wp-json\/wp\/v2\/comments?post=282"}],"version-history":[{"count":7,"href":"https:\/\/www.w3.org\/community\/rww\/wp-json\/wp\/v2\/posts\/282\/revisions"}],"predecessor-version":[{"id":290,"href":"https:\/\/www.w3.org\/community\/rww\/wp-json\/wp\/v2\/posts\/282\/revisions\/290"}],"wp:attachment":[{"href":"https:\/\/www.w3.org\/community\/rww\/wp-json\/wp\/v2\/media?parent=282"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.w3.org\/community\/rww\/wp-json\/wp\/v2\/categories?post=282"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.w3.org\/community\/rww\/wp-json\/wp\/v2\/tags?post=282"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}