Documentation: Widget Tag Cloud

Description

Like most of Zaltana, the main purpose is to provide an abstraction from simple HTML to the presentation technique of the day. Tag clouds are no different. The accepted trick currently is to add style font tags (yes bad, but hard to do any other way, although there is some work towards classes) to each list item. Thus non-css users still see a nicely ordered working list, and css browsers get a tag cloud.

Therefore to produce this I wanted to just enter the list items I would put out, and let the code take care of sorting, limiting the list to a sensible maximum and of course shape and size.

This implementation is a few lines of XSL and a few lines of CSS. It simply does the sort, limit and adds the font tags. It could easily be re-written to use CSS instead of font tags (albeit you would have to provide each possible CSS entry which may be difficult on a large map).

It could also be easily re-written to generate SVG - and best of all, could easily be re-written as a Javascript version running on the browser side.

All these re-writes can be done in the style itself and has no effect on your code.

Thanks to David Singleton for his ideas.

Format

ordered list with class 'tagcloud'
each list item requires a 'span' which contains the weighting (any integer)
content must currently start with an anchor but any other HTML (you can use anything, but sorting only works on the content in an anchor).
Span entries will be moved to the end and will add spacing and brackets for easier reading.

Example

XXX better formatting of span (nocss) and support non anchors. Javascript Version and move to other styles.

Show Source

<ol class="tagcloud">
  <!-- Span can be anywhere -->
  <li><a href="#">Full Metal</a><span>14</span></li>
  <li><span>11</span><a href="#">Take of</a></li>
  <li><span>3</span><a href="#">World</a></li>
  <li><span>1</span><a href="#">Blah</a></li>
  <li><span>1</span><a href="#">Boo</a></li>
  <li><span>10</span><a href="#">Zentertainment 2004</a></li>
  <li><span>7</span><a href="#">Quality Control</a></li>
  <li><span>5</span><a href="#">Hello World</a></li>
  <li><span>5</span><a href="#">Another</a></li>
  <li><span>1</span><a href="#">Yah</a></li>
  <li><span>3</span><a href="#">Example</a></li>
  <li><span>2</span><a href="#">Word</a></li>
  <li><span>1</span><a href="#">Changing</a></li>
  <li><a href="#">Events</a> <span>7</span></li>
  <li><span>8</span><a href="#">Gliders</a></li>
  <li><span>12</span><a href="#">Babies</a></li>
  <li><span>3</span><a href="#">Floods</a></li>
  <li><span>9</span><a href="#">Work</a></li>
  <li><span>5</span><a href="#">Marriage</a></li>
  <!-- order is optional, any html is allowed -->
  <li><span>14</span><a onclick="window.alert('Clicked Horses'); return false;" href="#">Horses</a></li>
</ol>

Implementations

XSL

This version is kept as an example for an XSL implementation only. It depends only on the XSL and CSS.

Standalone Javascript

This version runs on the browser side only and does not depend on server side code.