Wednesday, January 7, 2009

Generate a "tag cloud" using DynaCloud (jQuery Plugin)

To make your application look more Web 2.0, it's a good idea to add a Tag Cloud section on some pages. ;)
I did a little search for a jQuery plugin that can do the job and I found DynaCloud.

You can include a Tag Cloud on your page in 4 steps.

1) Add on your page a container for the tag cloud. For good results create an HTML Region and put the following code in the region source. (Set the template to Sidebar Region)

<div id="dynacloud" style="font-size:12px;"></div>


2) Load jQuery using Google AJAX Libraries API

<script src="http://www.google.com/jsapi"></script>
<script>
// Load jQuery
google.load("jquery", "1.2.6", {uncompressed:false});
</script>


3) Load DynaCloud Plugin

<script src="&WORKSPACE_IMAGES.jquery.dynacloud-4.js"></script>


4) Add CSS styles to display the Tag Cloud

<style type="text/css">
div#dynacloud {
font-size:5px;
}
div#dynacloud a span{
font-size:1em;
}
.highlight { background-color: yellow }
</style>


5) Configure the settings of DynaCloud. When the page his loaded, add the CSS class "dynacloud" to your page reports regions. And finally, generate the tag cloud.

<script>
$.dynaCloud.sort = false;

$().ready(function() {
$('.t4ReportsRegion').addClass("dynacloud");
$('.dynacloud').dynaCloud();
});
</script>



You can see my working example of a Tag Cloud in APEX.


Talking about clouds, here in Montreal it's snowing... they announced 15-30cm of snow for today. Tonight traveling back home will be long! ;)

Google AJAX Feed API

I'll start the year by showing you how to add a simple feed reader to your page.
For my demo, I decided to use the feed from the "official" Apex Blog Aggregator.

Using Google AJAX Feed API, you can easily load and parse feeds. Using Google Visualization API, you can easily display the information in a datagrid.



For more information, consult my online demo of the Google AJAX Feed API in Oracle APEX.