Skip to main content

jMaki Filters & Runners Mashup

Posted by arungupta on July 18, 2007 at 10:06 AM PDT

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

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
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:

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:

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

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.


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 :

    return (myDate.getMonth()+1) + "/" + dateString + "/" +


// 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 <;_i++) {

        var weekNumber =[_i].title.split(' ')[1];

        var weekStartDate = addDays(startDate,

        var desc =[_i].description;

        desc = desc.slice(0, desc.lastIndexOf("
        var spanArray = desc.split("
        for (var _j=1; _j < spanArray.length;
_j++) {

            var span =

            if (
== -1)


            var runDay =

            var runDate =
addDays(weekStartDate, _j-1);

            var row = [

'Week ' + weekNumber,



span.split(': ')[1]





    return {type : 'jmakiModelData', columns : _columns, rows :



This filter can be configured on Dojo table as:

args="{filter : 'jmaki.filters.tableModelFilter2'}"

service="/xhp?id=rss" />

The filter expects each blog entry in the following format:

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

It then creates a new row in the DataTable model for each entry enclosed
between 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


Related Topics >>