ASP.NET Customizable Tag/Search Cloud

I use a keyword cloud for my BitTorrent website and I thought that it might be helpful for people to just have a customizable component to plop into their site, so they don't have to deal with the headache of all the calculations. So, welcome SearchCloud, a VB.NET Server Control for generating a tag or search cloud (or any cloud, for that matter). It's free and you can edit the source all you want. Just make sure you leave the credits, so that it gets back to here. This page will serve as the informational and support page for the component. Please let me know if there are any major bugs or major features you'd like me to add to the release. Features

• Free Source Code or Component-Only
• Generated by Dataset (use with XML, Databases, Programmatically Created, etc.)
• Optional 2-Color Gradient Cloud
• Various Font Size Units (em, px, pt, %)
• Max and Min Font Sizes (in Hex format)
• Sort by a field name, ascending or descending
• Customizable URL w/ variables
• Customizable Link Title Format w/ variables
• Assignable CSS Class
• Ability to add custom HTML attributes to links (w/ variables)
• XHTML Valid and CSS Friendly

Download Last Updated: 2-14-08

• Component Only Release (.dll file)
• Source Code

Demo and Installation View Demo Here

To use this component, you need to copy the SearchCloud.dll DLL file to your bin directory. Once it is copied, open up the page you plan to implement the Cloud in and add this to the top:

<%@ Register assembly="SearchCloud" namespace="IntrepidStudios.SearchCloud" tagprefix="IS" %>

Then, implement the cloud by using this tag:

<is:cloud id="cloud1" runat="server" />

Before using it, you need to assign it a DataSource and some field names. To do so, open the code-behind of your page and use this code to activate the control:

Dim ds As New DataSet

Cloud1.DataIDField = "keyword_id" Cloud1.DataKeywordField = "keyword_value" Cloud1.DataCountField = "keyword_count" Cloud1.DataURLField = "keyword_url" Cloud1.DataSource = ds

You have to have a DataSet with keyword data to be able to use the control. This can come from a Database, XML file, or anything that can be translated into a DataSet. How to Customize

There are many different ways to customize the SearchCloud control. Let's break it down.

Required Attributes

• DataSource
• DataIDField
• DataKeywordField
• DataCountField

Optional Attributes

• DataURLField
• SortBy
• MaxFontSize
• MinFontSize
• FontUnit
• MaxColor
• MinColor
• KeywordTitleFormat
• KeywordURLFormat
• CssClass
• Debug

Methods

• AddAttribute

Required Attributes Datasource The dataset containing the keywords. For proper display, make sure integer value columns have the proper column type. DataIDField The column name corresponding to your keyword/tag ID DataKeywordField The column name corresponding to your keyword/tag title value DataCountField The column name corresponding to your keyword count value Optional Attributes DataURLField The column name corresponding to your keyword URL, if any. Default: None SortBy The DataView expression to use as a sort. Example: SortBy="keyword_count DESC" MaxFontSize The maximum font size (in value only) to render for the largest tag. Default: 22 MinFontSize The minimum font size (in value only) to render for the smallest tag. Default: 10 FontUnit The font CSS unit. Accepted values: pt, px, em, and %. Default: px. MaxColor The color to use for the largest tag. Must be in Hex format with leading #. Can be 3 or 6 digit. Default: #00f. Example: MaxColor="#fff" or MaxColor="#f93cd0" MinColor The color to use for the smallest tag. Must be in Hex format with leading #. Can be 3 or 6 digit. Default: #000. Example: MinColor="#fff" or MinColor="#f93cd0" KeywordTitleFormat The format to display the link's title attribute in. Accepts 4 variables.

• %i = ID
• %k = Keyword Value
• %c = Keyword Count
• %u = Keyword URL (if any)

Example: KeywordTitleFormat="%k appears %c times" KeywordURLFormat The format to display the link's href attribute in. Accepts 4 variables.

• %i = ID
• %k = Keyword Value
• %c = Keyword Count
• %u = Keyword URL (if any)

Example: KeywordURLFormat="/search/%k" CssClass Built-in ASP.NET attribute. Applies to the containing <div> element. Example: CssClass="cloud" will output:

<div class="cloud">cloud HTML</div>

Debug In Debug mode, the control will throw an actual ASP.NET exception instead of displaying a friendly error message. Unhandled errors will also throw a ASP.NET exception even if not in Debug Mode and if that happens, please report it below. Default: false. Example: Debug="true" Methods AddAttribute(attribute, value) This method allows you to add an HTML attribute to a keyword anchor tag. It must be called in the code. It accepts 4 variables.

• %i = ID
• %k = Keyword Value
• %c = Keyword Count
• %u = Keyword URL (if any)

Example: AddAttribute("onclick", "javascript:alert('You clicked: %k')") will generate:

<a href="link" title="title" onclick="javascript:alert('You clicked: keyword')">keyword</a>

Demo Code The code below is the source for default.aspx. It shows an example of using a default control and a customized control.

<%@ Page Language="VB" AutoEventWireup="false" CodeFile="default.aspx.vb" Inherits="projects_SearchCloud_default" %> <%@ Register assembly="SearchCloud" namespace="IntrepidStudios.SearchCloud" tagprefix="IS" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <title>ASP.NET Tag/Search Cloud Demo - SearchCloud Component - Intrepid Studios</title> <link rel="Stylesheet" href="/lib/css/base.css" /> <style type="text/css"> div.cloud { border:1px dotted #666; padding:20px; width:350px; font-family:Trebuchet MS, Arial, Verdana, Sans-Serif; } div.cloud a { text-decoration:none; } </style> </head> <body> <form id="form1" runat="server"> <h1>ASP.NET Tag/Search Cloud Server Control Demo</h1> <h2>Default Example</h2> <p>This is an example of a default tag/search cloud, with no customization.</p> <IS:Cloud ID="Cloud1" runat="server" /> <p></p> <h2>Customized Example</h2> <p>This is an example of a customized tag/search cloud.</p> <IS:Cloud ID="Cloud2" MaxColor="#339966" MinColor="#333399" MaxFontSize="250" MinFontSize="100" FontUnit="%" KeywordTitleFormat="%k appeared %c times" KeywordURLFormat="default.aspx?id=%i" SortBy="keyword_id DESC" CssClass="cloud" runat="server" /> </form> </body> </html>

The code below is for the default.aspx.vb or code-behind file. It demonstrates how to create a test DataSet and how to use the AddAttribute method.

Imports System.Data Partial Class projects_SearchCloud_default Inherits System.Web.UI.Page Sub Page_Load(ByVal s As Object, ByVal e As Object) Handles Me.Load ' Create Demo DataSet Dim ds As New dataset Dim dt As New DataTable Dim dr As DataRow Dim ki As String = "keyword_id" Dim kv As String = "keyword_value" Dim kc As String = "keyword_count" Dim ku As String = "keyword_url" dt.Columns.Add(ki, GetType(Integer)) dt.Columns.Add(kv) dt.Columns.Add(kc, GetType(Integer)) dt.Columns.Add(ku) ' Make Rows dr = dt.NewRow dr(ki) = 0 dr(kv) = "Pan's Labryinth" dr(kc) = 17 dr(ku) = "www.google.com" dt.Rows.Add(dr) dr = dt.NewRow dr(ki) = 1 dr(kv) = "Linkin Park" dr(kc) = 56 dr(ku) = "www.google.com" dt.Rows.Add(dr) dr = dt.NewRow dr(ki) = 2 dr(kv) = "Sony PSP" dr(kc) = 65 dr(ku) = "www.google.com" dt.Rows.Add(dr) dr = dt.NewRow dr(ki) = 3 dr(kv) = """Quotes""" dr(kc) = 50 dr(ku) = "www.google.com" dt.Rows.Add(dr) dr = dt.NewRow dr(ki) = 4 dr(kv) = "Unfathomably Long Name for a Product No One Knows About" dr(kc) = 12 dr(ku) = "www.google.com" dt.Rows.Add(dr) dr = dt.NewRow dr(ki) = 5 dr(kv) = "Generic Search Term" dr(kc) = 34 dr(ku) = "www.google.com" dt.Rows.Add(dr) dr = dt.NewRow dr(ki) = 6 dr(kv) = "/""'\\?:-0228" dr(kc) = 65 dr(ku) = "www.google.com" dt.Rows.Add(dr) dr = dt.NewRow dr(ki) = 7 dr(kv) = "Movies" dr(kc) = 16 dr(ku) = "www.google.com" dt.Rows.Add(dr) dr = dt.NewRow dr(ki) = 8 dr(kv) = "Music" dr(kc) = 29 dr(ku) = "www.google.com" dt.Rows.Add(dr) dr = dt.NewRow dr(ki) = 9 dr(kv) = "Fish" dr(kc) = 23 dr(ku) = "www.google.com" dt.Rows.Add(dr) ds.Tables.Add(dt) Cloud1.DataIDField = ki Cloud1.DataKeywordField = kv Cloud1.DataCountField = kc Cloud1.DataURLField = ku Cloud1.DataSource = ds Cloud2.DataIDField = ki Cloud2.DataKeywordField = kv Cloud2.DataCountField = kc 'Cloud2.DataURLField = ku Cloud2.DataSource = ds Cloud2.AddAttribute("onclick", "javascript:alert('Hello world. %i, %k, %u, %c');") Cloud2.AddAttribute("class", "tag") End Sub End Class

You can view the output of all this code on the demo page. If you need help or additional information, please leave a comment and I can create a FAQ.

» Read more...