Setup Your Page
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
- 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.
- SortBy
- The DataView expression to use as a sort. Example:
SortBy="keyword_count DESC"
- MaxFontSize (22)
- The maximum font size (in value only) to render for the largest tag.
- MinFontSize (10)
- The minimum font size (in value only) to render for the smallest tag.
- FontUnit ("px")
- The font CSS unit. Accepted values: pt, px, em, and %.
- MaxColor ("#00f")
The color to use for the largest tag. Must be in Hex format with leading #. Can be 3 or 6 digit.
Example: MaxColor="#fff" or MaxColor="#f93cd0"
- MinColor ("#000")
-
The color to use for the smallest tag. Must be in Hex format with leading #. Can be 3 or 6 digit.
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 (false)
-
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.
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.
