{"id":273,"date":"2013-07-19T09:20:47","date_gmt":"2013-07-19T09:20:47","guid":{"rendered":"http:\/\/www.w3.org\/community\/rww\/?p=273"},"modified":"2013-07-19T09:20:47","modified_gmt":"2013-07-19T09:20:47","slug":"tabulator-creating-a-new-pane-part-1","status":"publish","type":"post","link":"https:\/\/www.w3.org\/community\/rww\/2013\/07\/19\/tabulator-creating-a-new-pane-part-1\/","title":{"rendered":"Tabulator — Creating a New Pane — Part 1"},"content":{"rendered":"

Last time, we looked at how to install The Tabulator<\/a> as a Firefox extension.\u00a0 Although tabulator can also run as a chrome extension or a JavaScript shim, one advantage of the approach outlined is that you can dive in to the code and make changes.<\/p>\n

We’re going to look at how to create a new ‘Pane’ and expand slightly on the developer notes.<\/a>\u00a0 For this tutorial you’ll need a text editor and basic JavaScript knowledge.<\/p>\n

What is a Tabulator Pane?<\/span><\/h2>\n

Panes are views for displaying different types of data, and creating apps that are data driven.\u00a0 Although tabulator has many generic data panes, for viewing, querying and editing data<\/a>, it can be handy to have vertical specific panes, too.<\/p>\n

For example for a Person entity you may want a social style pane that allows updates to your timeline, for a publication you may want a special reader, or for your photos you may wish to develop a gallery pane.\u00a0 In this two part tutorial I’ll show how to display a microblog post in a pane.<\/p>\n

Step 1: Find an Icon<\/span><\/h2>\n

\"\"<\/a><\/p>\n

Each pane will normally require an icon.\u00a0 There are many icon repositories on the web, for this I used, openiconlib<\/a> which has conveniently sized 22×22 sized icons under LGPG.<\/p>\n

The icons are stored in content\/icons from the main source tree.\u00a0 In our case we will save the 22×22 PNG<\/a> under \/content\/icons\/microblog\/microblogPost.png<\/strong><\/p>\n

Step 2: Add the Icon to Tabulator<\/span><\/h2>\n

Next we need to add the icon to tabulator and this is done in the file located at \/content\/js\/init\/icons.js<\/strong>.\u00a0 Add the following line:<\/p>\n

tabulator.Icon.src.icon_mbpost = iconPrefix + 'icons\/microblog\/microblogpost.png';<\/pre>\n
Step 3: Add the Pane<\/span><\/h2>\n
To add the pane we need to create a new JavaScript file located at \/content\/js\/panes\/microblog\/<\/strong><\/p>\n
tabulator.<\/span>panes.<\/span>register(<\/span> {<\/span>\r\n\r\n  icon:<\/span> tabulator.<\/span>Icon.<\/span>src.<\/span>icon_mbpost,<\/span>\/\/This icon should be defined in icons.js<\/span>\r\n  label:<\/span> function<\/span>(<\/span>subject)<\/span> {<\/span> \/\/'subject' is the source of the document<\/span>\r\n    if<\/span> (<\/span>true<\/span>)<\/span> {<\/span>\r\n      return<\/span> \"<\/span>MicroblogPost<\/span>\"<\/span>;<\/span> \/\/The icon text<\/span>\r\n    }<\/span> else<\/span> {<\/span>\r\n      return<\/span> null<\/span>;<\/span>\r\n    }<\/span>\r\n  }<\/span>,<\/span>\r\n\r\n  render:<\/span> function<\/span>(<\/span>subject,<\/span> document)<\/span> {<\/span>\r\n    var<\/span> newDiv =<\/span> document.<\/span>createElement(<\/span>\"<\/span>h2<\/span>\"<\/span>)<\/span>;<\/span>\r\n    var<\/span> newContent =<\/span> document.<\/span>createTextNode(<\/span>\"<\/span>Microblog will appear here!<\/span>\"<\/span>)<\/span>;<\/span>\r\n    newDiv.<\/span>appendChild(<\/span>newContent)<\/span>;<\/span>\r\n    return<\/span> newDiv;<\/span>\r\n  }<\/span>\r\n\r\n}<\/span> ,<\/span> true<\/span>)<\/span>;<\/span><\/pre>\n
The (true) condition means that this icon will always appear (more on this in part 2).\u00a0 The render function will simply display a generic heading for testing purposes.\u00a0 Later we will show how to query an actual microblog and display the fields.<\/p>\n
Step 4 — Load the Pane and Test
\n<\/span><\/h2>\n
\"\"<\/a><\/p>\n
Image: New pane Icon added to Tabulator<\/em><\/p>\n
We’re now ready for the final step.\u00a0 Add the line below to \/content\/js\/init\/init.js<\/strong> and once done you should see the icon on any data that the tabulator imports.<\/p>\n
\u00a0tabulator.loadScript(\"js\/panes\/microblogPane\/microblogPostPane.js\");<\/pre>\n
If all has gone well you should see the new icon appear in tabulator, after restarting.\u00a0 Try clicking the following test link<\/a> to see if you have been successful!<\/p>\n
What’s Next?<\/span><\/h2>\n
We’ve seen how to add a simple pane to The Tabulator.\u00a0 In the next part we will look at how to get data items from a real microblog post, how display the icon conditionally and how to style the page.\u00a0 The ultimate goal here is to be able to both read and write microblog posts, and share them with your social graph, using web standards.<\/p>\n","protected":false},"excerpt":{"rendered":"
Last time, we looked at how to install The Tabulator as a Firefox extension.\u00a0 Although tabulator can also run as a chrome extension or a JavaScript shim, one advantage of the approach outlined is that you can dive in to … 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],"class_list":["post-273","post","type-post","status-publish","format-standard","hentry","category-rww-2","tag-linkeddata","tag-rww","tag-readwriteweb","tag-tabulator"],"_links":{"self":[{"href":"https:\/\/www.w3.org\/community\/rww\/wp-json\/wp\/v2\/posts\/273","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=273"}],"version-history":[{"count":6,"href":"https:\/\/www.w3.org\/community\/rww\/wp-json\/wp\/v2\/posts\/273\/revisions"}],"predecessor-version":[{"id":281,"href":"https:\/\/www.w3.org\/community\/rww\/wp-json\/wp\/v2\/posts\/273\/revisions\/281"}],"wp:attachment":[{"href":"https:\/\/www.w3.org\/community\/rww\/wp-json\/wp\/v2\/media?parent=273"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.w3.org\/community\/rww\/wp-json\/wp\/v2\/categories?post=273"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.w3.org\/community\/rww\/wp-json\/wp\/v2\/tags?post=273"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}