Posts Tagged ‘ajax’

JavaScript Mashups using Tonido HTTP API

You can write app mashups purely using Javascript in Tonido. For example, say you wanted to combine data from two Tonido apps together and present them in a single view, you can do that quite easily. Or if you want to present information in a different way, you can do that too.

In this post, let me walkthrough a simple JS script that grabs data from Tonido Thots applications and displays them.

For this JS to work, you need to make sure the JS code is being served up by Tonido itself, otherwise, due to the cross-domain scripting rules, the script won’t run. To make Tonido serve these files up, you can add these files to a folder and share it via Webshare and then load the .html page by clicking on it in Webshare file listing.

Doing AJAX via JS can be a chore unless you let a library do all the dirty work for you. In this case, I am using jQuery. It is especially excellent for parsing the XML that is returned by Tonido’s HTTP calls.

First, in the code below, we set an event handler so that when the link is clicked, we make a call to the ‘getauthenticationinfo’ HTTP API. This returns the status of the currently logged in user etc via XML.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
<br />
 $(document).ready(function(){<br />
       $("a").click(function(event){<br />
         $.get('http://127.0.0.1:10001/core/getauthenticationinfo', function(data) {<br />
         var $entry = $(data).find('info');<br />
         var $profile = $entry.find('profile').text();<br />
         if ($profile == "")<br />
         {<br />
             alert("Profile Not Logged IN");<br />
         }<br />
         else<br />
         {<br />
            if ($entry.find('authenticated').text() == "1")<br />
            {<br />
                getThots();<br />
            }<br />
            else<br />
            {<br />
                             alert("Profile logged in, but needs to be authenticated");<br />
            }<br />
        }<br />
        });<br />
          event.preventDefault();<br />
         return false;<br />
       });<br />
     });<br />

This XML response below contains several pieces of information. The primary being the authenticated element. Each value of that element represents something as you can see from the JS. If it is “1″ we are ready to make our next call. That is of course to get the actual thots data.

1
2
3
4
5
6
7
8
9
10
11
<br />
<authenticationinfo><br />
          <info></p>
<profile>mytonidoprofile</profile>
             <displayname>Madhan</displayname></p>
<peerid>mytonidoprofile@tonidoid.com</peerid>
             <authenticated>1</authenticated><br />
             <isremote>0</isremote><br />
             <reasoncode>0</reasoncode><br />
          </info><br />
</authenticationinfo><br />

Getting the Thots data is a simple HTTP call again passed in with a bunch of GET parameters. The return naturally is XML again.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<br />
function getThots()<br />
{<br />
    $.get('http://127.0.0.1:10001/app/thots/getthots?offset=0&max=10&datefilter=&categoryfilter=&searchfilter=',<br />
                             function (data) {<br />
                var $meta = $(data).find('totalrecords').text();<br />
                var $thots = $(data).find('thot').each(function ()<br />
                                 {<br />
                     var $entry = $(this);<br />
                     var $content = $entry.find('displaycontent').text();<br />
                     var $displaycontent = jQuery("
<div><br><br><i>"+$content+"</i><br><br></div>
<p>");<br />
                    $displaycontent.appendTo(document.body);<br />
                });<br />
        }, "xml");<br />
 }<br />

Which looks like the below:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
</p>
<thots>
    <meta><br />
    <totalrecords>60</totalrecords><br />
    </meta></p>
<thot>
        <id>75</id><br />
        <title/><br />
        <displaycontent>Interesting Thot</displaycontent><br />
        <content>Interesting Thot</content><br />
        <status/><br />
        <date>2009-07-20 13:08:09</date></p>
<pageobjectindex>1</pageobjectindex>
<pagenumobjects>10</pagenumobjects>
        <totalobjects>60</totalobjects><br />
        <totalcategories>1</totalcategories><br />
        <categoryid_0>1</categoryid_0><br />
        <categorytext_0>Bookmarks</categorytext_0><br />
       <categoryparentid_0>-1</categoryparentid_0><br />
       <category_texts>Bookmarks</category_texts><br />
       <displaycategory_texts>Bookmarks</displaycategory_texts><br />
       <category_ids>1,</category_ids>
    </thot>
    ...
</thots>

We parse the XML and append it to the document in the loop. So the effect is when you click the link you see list of thots entries.

This is for sake of example and is trivial to write. Imagine you could do the same thing, but create a page which showed your Tasks/Calendars/Thots/Webshare Upload History all in one shot. Maybe even a text box to quickly add a torrent in one shot. That would be fun.

You can even write a mini Tonido application with a different UI just by running Webshare JS and HTML files. The possibilities are endless.

Tonido’s implements almost all of the app functionality using HTTP APIs. You can study these APIs and responses easily using FireBug. If you want more documentation, you can read the official documentation for the HTTP APIs in the reference documentation.

Download the full source for this sample.