Styling Cloud Controls

Top  Previous  Next

Topic clouds can be styled via very simple XSL. The simplest styling, used in the screenshots for this document:

<?xml version="1.0"?>

<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">

  <xsl:template match="/">

    <xsl:apply-templates />

  </xsl:template>

  <xsl:template match="OneHopDataTable">

    <span class="{CssClassName/text()}">

      <a href="{linkUrl/text()}">

        <xsl:value-of select="name/text()"/>

      </a>

    </span>

    <xsl:value-of select="' '"/>

  </xsl:template>

</xsl:stylesheet>

Applying different CSS styles to the tags is done using the CssClassGroupingNames property of the topic cloud web part. CSS styles are applied to tags by equally dividing the range of values (not tags) in to bands and assigning each tag within a particular band a CSS name.

For example: the following topic (tag) names and their metrics when the CssClassGroupingNames property is Small,Large.

Topic Name

Metric

CSS Class Assigned

C#

1

Small

Java

2

Small

Perl

3

Small

Ruby

4

Small

Powershell

6

Large

VB.NET

10

Large

Note how the tags are not equally divided in to the different CSS classes, the banding is applied on the metric values. The algorithm applied is:

int numberOfGroups = <number of CSS classes specified>

int spread = <highest metric> - <lowest metric>

int jump = spead / numberOfGroups

foreach (Tag in Cloud) {

  int n = Floor((<tag metric> - <lowest metric>) / jump);

  CssClass = The n'th class specified by CSS classes

}

There is no limit on the number of CSS classes that can be specified in CssClassGroupingNames. If you wish to skew the CSS classes for an uneven distribution, you may specify the same CSS class multiple times, for example: Small,Small,Small,Small,Large. This would make the tags with a metric in the top 20% of the range of metric value distinct from all others.