Raplets tutorial part 2 – Add Javascript to your Raplet

This is the 3rd article in the series of my articles on Raplet development and I assume you followed my previous articles on Raplet development before reading this one. If you want to know what Raplets are and start making your first Raplet then I suggest you read my previous posts:

1. Building Raplets – Get started from here!
2. Raplets tutorial part 1 – ‘Hello World’

In this article, we’ll see how we add Javascript to our Raplet to make it more jazzy! I assume you followed my previous posts on Raplet development and have the ‘Hello World’ Raplet running in you Gmail inbox. Cuz we’ll be using the same example to continue making it better with jQuery.
jQuery is supported by Rapportive so you can use jQuery code. In the previous article I spoke about the parameters in the reponse object we send. A quick revision of those parameters:

1. html
2. css
3. status

Now I’ll introduce you to the 4th parameter that allows us to add Javascript/jQuery to our Raplet, the ‘js’ parameter. We’ll be adding this parameter to our ‘raplet.php’ file that is our main Raplet file. It should look like this:
[php]

//Parameters in the request from Rapportive to our Raplet
$callback = $_GET[‘callback’];

if(isset($_GET[‘name’]))
{
$name=$_GET[‘name’];
}
else
{
$name="";
}

if(isset($_GET[’email’]))
{
$email=$_GET[’email’];
}
else
{
$email="";
}

if(isset($_GET[‘twitter_username’]))
{
$twitter=$_GET[‘twitter_username’];
}
else
{
$twitter="Twitter account not found.";
}

//Our response
$parameters = array();
$parameters[‘html’] = "<p class=’head’>Hello World. Click me!</p><div class=’info’><p>".htmlentities($name)."</p><p>Email id:".htmlentities($email).".</p><p>Follow on Twitter: ".htmlentities($twitter)."</p></div>";
$parameters[‘css’] = "p{margin:0; padding:0;} p.head{padding:2px 8px; cursor: pointer; position: relative; background-color:#eee; font-size:13px; border-bottom:1px dashed #bbb; font-weight:bold;} div.info{ padding: 5px 10px 15px; background-color:#F4F4F8; color:#444; font-size: 13px; }";
$parameters[‘js’] = "$(‘div.info’).hide(); $(‘p.head’).click(function(){ $(this).next(‘div.info’).slideToggle(600);});";
$parameters[‘status’] = 200;

//We encode our response as JSON and prepend the callback to it
$object = $callback."(".json_encode($parameters).")";
echo $object;

[/php]

As you can see, our response object now contains the ‘js’ parameter. The line of jQuery code here makes the line ‘Hello World’ clickable. On clicking it the ‘div’ that contains the info of the person we’re looking at will expand and collapse on clicking again. Our Raplet is now jQuery powered!

In the next article, we’ll see how to make our Raplet configurable so that it can take user input when installing.