VisualForce Tag Cloud Component
Tag clouds are nothing new on the interwebs, but there is some debate as to which sort of implementation is best. In this debate I prefer the simplest solution [insert further debate as to the definition of ‘simplest’ here] which I propose to be a simple unordered HTML list with some CSS styling.
Furthermore, wouldn’t it be great if this solution were dynamic, thus enabling you to create tag clouds specific to a particular application context?. Rhetorical question, of course it would be. To this end I’ve created a component that utilises a controller, mostly dynamic in nature.
To start with, let’s have a look at the component code
<apex:component controller="TagCloudController">
<apex:attribute name="objectName" assignTo="{!objectName}" type="String" Default="SkillCandidate__c" Description="name of the object" required="true"/>
<apex:attribute name="objectField" assignTo="{!objectField}" type="String" Default="name" Description="name of the object field that you want to use in the tag cloud" required="true"/>
<apex:attribute name="width" type="String" description="The width of the tag cloud as a % or px" default="39%"/>
<apex:attribute name="float" type="String" description="Which direction to float the component" default="right"/>
<style>
.tagcloud{
width: {!width};
text-align: justify;
float: {!float};
padding: 10px 30px 10px 10px;
margin: 0px;
}
.tagcloud li{
display: inline;
margin-left: 3px;
}
.size1{
font-size:8px;
}
.size2{
font-size:12px;
}
.size3{
font-size:18px;
}
.size4{
font-size:28px;
}
.size5{
font-size:39px;
}
.tagcloud SPAN { position: absolute; left: -999px; width: 990px; }
</style>
<h2>Tag Cloud </h2>
<ol>
<apex:repeat value="{!tags}" var="tag">
<li><a href="{!$Page.SomePageName}?object={!objectLabel}&keywords={!tag.encodedName}">{!tag.name}</a></li>
</apex:repeat>
</ol>
</apex:component>
The controller itself is quite basic. It simply uses an internal class to represent a tag, and various methods for returning the tag class properties. If anyone needs specifics I’ll gladly respond to any email requests.
any way you could share your controller code on this? Im trying to do the same thing but I cant seem to stop punching myself in the face with my keyboard… which isnt helping me by the way… Thanks!
Charles Rowland
August 4, 2010 at 7:57 pm
I don’t have access to this code anymore, and I think I’d probably do it differently now. If you post your issue to the developer forums and link back here I’ll have a look at it for you 🙂
Wes
August 5, 2010 at 10:03 am