Arun Gupta, Miles to go ...

jMaki Filters & Runners Mashup

jMaki allows filter to be configured on a widget. A filter is a JavaScript code fragment that performs data conversion from one object format to another. This allows a widget to consume data from multiple services outside the application domain and transform the received data into a standard data model.

There are several pre-defined filters in system-glue.js, for example jmaki.filters.tableModelFilter, that converts the data from a common data format to DataTable standard data model. This is explained in detail below:

• Configure a DataTable widget to extract data from an RSS feed (defined in xhp.json). This is done by replacing value="..." attribute with service="/xhp?id=rss".
• XML response comes back in various RSS format (RDF / Atom).
• A stylesheet (rss.xsl) is already configured in 'xhp.json' to process all RSS to a common JSON data format "dataType" : "jMakiRSS".
• A pre-defined filter, jmaki.filters.tableModelFilter (defined in 'system-glue.js' and wired in 'component.js'), is configured on all DataTable widgets. This filter understands the common data format and convert it to the new standard format described at: http://wiki.java.net/bin/view/Projects/jMakiTableDataModel.

How to add a New Filter ? A new filter can be defined in 'glue.js'. This filter can be configured on a widget with the following syntax:

 <a:widget name="yahoo.dataTable"
                 args="{filter : 'jmaki.filters.MyCustomFilter'}"
                 service="/xhp?id=rss" />

Each filter consumes data from a specific service and is widget agnostic. This allows the same filter to be used with multiple widgets, for example the following fragment shows how the filter mentioned above can be used with Dojo DataTable:

 <a:widget name="dojo.dataTable"
                 args="{filter : 'jmaki.filters.MyCustomFilter'}"
                 service="/xhp?id=rss" />

Here is a real-life filter that pulls the RSS feed from my running log, the 'rss.xsl' stylesheet (configured in xhp.json) converts the RSS feed into the common "jMakiRSS" format and then this filter processes the data to generate a running log by creating a row for each day of the week.

jmaki.namespace("jmaki.filters");

myDays= ["Monday","Tuesday","Wednesday","Thursday","Friday","Saturday","Sunday"];
oneDay = 24*60*60*1000;

function addDays(myDate, days) {
    return new Date(myDate.getTime() + days*24*60*60*1000);
}

function formatDate(myDate) {
    var dateString = String (myDate.getDate());
    dateString = (dateString.length == 1 ? "0" + dateString : dateString);
    return (myDate.getMonth()+1) + "/" + dateString + "/" + myDate.getFullYear();
}

// convert Running blog feed to the jMaki table format
jmaki.filters.tableModelFilter2 = function(input) {

    var startDate = new Date();
    startDate.setFullYear(2007,1,12); // Feb 12, 2007
    var _columns = [
        {title: 'Title'},
        {title: 'Day of The Week'},
        {title: 'Date'},
        {title: 'Mileage'}
    ];
    var _rows = [];

    for (var _i=0; _i < input.channel.items.length;_i++) {
        var weekNumber = input.channel.items[_i].title.split(' ')[1];
        var weekStartDate = addDays(startDate, (weekNumber-1)*7);
        var desc = input.channel.items[_i].description;
        desc = desc.slice(0, desc.lastIndexOf("</span"));
        var spanArray = desc.split("<span");
        for (var _j=1; _j < spanArray.length; _j++) {
            var span = spanArray[_j].split("</span>")[0];
            if (span.search(/run/) == -1)
                continue;

            var runDay = myDays[_j-1];
            var runDate = addDays(weekStartDate, _j-1);

            var row = [
                'Week ' + weekNumber,
                runDay,
                formatDate(runDate),
                span.split(': ')[1]
            ];
            _rows.push(row);
        }
    }

    return {type : 'jmakiModelData', columns : _columns, rows : _rows};
}
 

This filter can be configured on Dojo table as:

 <a:widget name="dojo.dataTable"
                 args="{filter : 'jmaki.filters.tableModelFilter2'}"
                 service="/xhp?id=rss" />

The filter expects each blog entry in the following format:

<span class="rest">Mon: Rest</span><br>
<span class="run">Tue: 8.5 miles</span><br>
<span class="run">Wed: 7 miles</span><br>
<span class="run">Thu: 7 miles</span><br>
<span class="rest">Fri: Rest</span><br>
<span class="rest">Sat: Rest</span><br>
<span class="run">Sun: 20 miles</span>

It then creates a new row in the DataTable model for each entry enclosed between <span>s and parses the content to extract mileage for a particular day. The web application with a Dojo and Yahoo DataTable configured to use this filter looks like:

Technorati: jmaki mashups running web2.0

Posted by Arun Gupta in web2.0  |  Comments[8]