Adding Spry widgets to blogger

In my previous article I introduced you to Adobe's Spry framework for Ajax and explained its pros and cons. In this article, we will implement Spry into a blog and see how beautifully it works. Our aim will be to add an accordion in the right column. We will display a panel of badges, and widgets like Blog Rush and Feedjit in this accordion.

Spry provides widgets that are independent to one another and this makes it very easy to implement it restrictive environment. Another plus point is that your implementation of accordion is going to be very small. And the implementation is very simple. Once you have the downloaded Spry framework, you need unzip it and get hold of just two files located at \widgets\accordion. You need SpryAccordion.css and SpryAccordion.js files to build your project. If you want to make come changes, you can modify the CSS file. The file contains all the necessary style classes required for the accordion widget.

Once your custom modifications are done. Its time we move it on to the web! To host these two files, I will be using Google Pages. Many of you will be wondering why I am using Google pages and not other services that are specifically used to host files on web. The reason is, majority of these hosting services are bocked at corporate gateways and offices. I am not willing to mess up by blog when professionals access my blog. So, I will be using Google Pages. Coding a Spry widget is very simple. The accordion we are building will be represented as DIV tags. We will have a main DIV tag denoting the widget and each accordion panel will be represented as separate DIVs inside the main one. Each panel is further divided into panel heading and content. Both these parts are also denoted using DIV. So our widget code will look like this on completion:

<div class="Accordion" id="sampleAccordion" tabindex="0">
 <div class="AccordionPanel">
  <div class="AccordionPanelTab">Panel Heading</div>
  <div class="AccordionPanelContent">
   All the blog badges, images, will go in here.
 I can have multiple para tags and other tag here.
  </div>
 </div>
 <div class="AccordionPanel">
  <div class="AccordionPanelTab">Panel Heading next</div>
  <div class="AccordionPanelContent">
   Content for Panel 2 goes here!
  </div>
 </div>
 <div class="AccordionPanel">
  <div class="AccordionPanelTab">Final</div>
  <div class="AccordionPanelContent">
   Content for the last accordion panel goes here!
  </div>
 </div> 
</div>

Spry framework will not render the above code as accordion. We need to initialize the widget using Java Script. The initialization is also simple and straight forward as creating a object in Java using constructors. Have a look at how we initialize the widget:

<script language="JavaScript" type="text/javascript">
var sampleAccordion = new Spry.Widget.Accordion("sampleAccordion");
</script>

You can add this code into blogger template or use a HTML page element to hold the widget. Last modification to the blog is to add the CSS and widget JS files to the blogger template. This can be as simple as:

<link href="http://araotest.googlepages.com/SpryAccordion.css" rel="stylesheet" type="text/css" media="all" />
<script src="http://araotest.googlepages.com/SpryAccordion.js" type="text/javascript"></script>

You can see the demo on my testing blog where I build templates and test different functionalities. I am sure you will be confident enough to implement any other Spry widgets on a blog or site. Watchout for some interesting widgets to appear on my blog soon.