Welcome, guest ( Login )

» Home (JDC Blog)
» Forums

Page Tags

tag cloud taglib experiment community whuffie

Search Tags:
WikiHome » 2006-3-29-SexierEasierFasterTaggingForJotspot

Sexier, Easier, Faster Tagging for JotSpot

Version 5, changed by ScottMcmullan. 04/13/2006.   Show version history

By ScottMcmullan at 03/29/2006 01:07AM Tags: tag, cloud, taglib, experiment, community, whuffie

W00t!, Phil's been at it again. His latest contribution to the community tagging project is TagLibV2, a ground-up rewrite of the existing tag library. It's faster, has a clean API, and is really really simple to use. Check out his announcement on the project blog.

A Wiki Tag Cloud in 4 Lines of Code

Did I mention it's easy to use? Here's some code that creates a cloud for all pages in a sub-tree of your wiki. In this example the root page is the Tutorials page here on the JDC. 

<jot:include node="TagLib" />
<jot:script>
var docTags = jot.lib.search({forDescendants: 'Tutorials', collect: 'it/main/tags'});
var docCloud = new Tag.Cloud(docTags.getItems());
docCloud.display({pivot: 'JdcTagPivot', idPrefix: 'globalCloud', dynamic: 'static', containerClass: 'tagCloud'});
</jot:script>

Step 1. Include the library page.

Step 2. Create an array of tags (aka array of strings) that you want in your cloud. (Again in this case it's all tags on pages under Tutorials.)

Step 3. Draw the cloud, specifying your "pivot" page, CSS attributes, etc.

Here's TutorialTagCloud in action:

Searching for Related Tags

Often you've got a tag in mind and you're interested in finding related pages. By related I mean all tags that co-appear with the tag I have in mind.

This type of clouod is easy w/TagLibV2 and one additional search. First I get the tag from the user via a simple web form. Then I find all pages that share the specified tag and collect the tags from those pages. Last step is to display the cloud.

I've created such a page here on the JDC called RelatedTagSearch. Here's what it displays when I search for the tag 'filter':

And here's the code FYI (edit in XML mode): 

<html xmlns="http://www.w3.org/1999/xhtml" xmlns:jot="http://www.foopee.com/ns/s3/srvtmpl/">
<h1>Related Tag Search</h1>
<form name="tagSearch" method="get" action="wiki:${page/name}">
   <input name="s" value="${req/args/s}" />
   <input type="submit" value="Go" />
</form>
<br /><i>Enter a SINGLE TAG (e.g. 'search') to view a cloud of related tags</i><br />
<jot:if test="${util:isDefined(req/args/s)}">
 <jot:then>
   <jot:include node="TagLib" />
   <jot:search forAll="1" filter="${util:listContains(it/main/tags, req/args/s)}" 
                                         collect="it/main/tags" set="relatedTags" />
   <br/><h3>Tags related to: <i>${req/args/s}</i></h3>
   <jot:script>
   var relatedTagArray = relatedTags.getItems();
   var searchCloud = new Tag.Cloud(relatedTagArray);
   searchCloud.display({pivot: 'JdcTagPivot', idPrefix: 'searchCloud', dynamic: 'static', 
                        containerClass: 'tagCloud'});
   </jot:script>
 </jot:then>
</jot:if>
</html>

Not Just Clouds

The new library also supplies a tag entry widget so you can provide folks with an interface to add tags to pages. The widget has a number of behaviors -- all require just a single line of code. Here's the code to display the DHTML version of the tag this page link: 

<jot:script>
Tag.EditBox({idPrefix: 'tester2', editClass: 'tagEditBoxFormPopup', dynamic: 'popup'});
</jot:script>

Which looks like this in action:

More Info

There's more documentation on the library's TagLibV2 home page. Install a copy in your wiki by downloading the zip on the tag-dev download page.

This is an open project so if you've got ideas for additional features, pivots, searches, etc. please get in touch or get involved!


Back to WikiHome



Attachments (3)

  File By Size Attached Ver.
filterRelatedPages.png ScottMcmullan 41K 03/29/2006 1 Delete attachment
tagThisPage.png ScottMcmullan 3K 03/29/2006 1 Delete attachment
tutorialTagCloud.png ScottMcmullan 98K 03/29/2006 1 Delete attachment