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
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
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.
Labels: .net, code, projects
» Read more...