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

Comments:

[Trackback] I updated the running log filter to the one given below. This allows me to generate the total running mileage of all the weeks. The changes are highlighted in this color: jmaki.namespace(&quot;jmaki.filters&quot;); myDays= [&quot;Monday&quot;,&quot;Tue...

Posted by Arun Gupta's Blog on July 25, 2007 at 01:27 AM PDT #

[Trackback] What is jMaki ? If you have been following my blog, then you know it already. But a picture is worth a thousand words so here it is. One-liner: jMaki is a light-weight framework to build Web 2.0 applications. &quot;j&quot;...

Posted by Arun Gupta's Blog on July 26, 2007 at 03:50 AM PDT #

[Trackback] This second screencast of the Creating Mashups with jMaki Series show how jMaki allows to embed and interact with map widgets in your application.This screencast shows how to creates two mashups - the first one is where a city...

Posted by Arun Gupta's Blog on August 05, 2007 at 11:46 PM PDT #

[Trackback] 2007年09月13日 15:58:00 下面使用jMaki中的Yahoo Calendar和Yahoo DataTable 来建立一个迷你Blog首页。这个小程序可以在选择日历的某个日期后,Data Table中只列出这个日期所发表的文章。jMaki中的Yahoo Calendar和Yahoo DataTable 都是Yahoo UI Library 中的控间, jMaki的作用只是在现有的控件之上作了一些包装(wrapper), 这样,这些Widget可以通过jMaki框架进行通讯,通过...

Posted by mengyao.chen on December 13, 2007 at 12:42 PM PST #

[Trackback] 下面使用jMaki中的Yahoo Calendar和Yahoo DataTable 来建立一个迷你Blog首页。这个小程序可以在选择日历的某个日期后,Data Table中只列出这个日期所发表的文章。jMaki中的Yahoo Calendar和Yahoo DataTable 都是Yahoo UI Library 中的控间, jMaki的作用只是在现有的控件之上作了一些包装(wrapper), 这样,这些Widget可以通过jMaki框架进行通讯,通过很少的代码或者配置就可以完成一个功能丰富的应用...

Posted by techweb on December 13, 2007 at 06:23 PM PST #

[Trackback] 下面使用jMaki中的YahooCalendar和YahooDataTable来建立一个迷你Blog首页。这个小程序可以在选择日历的某个日期后,DataTable中只列出这个日期所发表的文章。...

Posted by csdnexpert on December 16, 2007 at 10:17 AM PST #

If you have been following my blog, then you know it already. But a picture is worth a thousand words so here it is.

Posted by LAPTOP BATTERY on November 26, 2008 at 01:59 PM PST #

This screencast shows how to creates two mashups - the first one.

Posted by bertina1230 on December 09, 2009 at 05:37 PM PST #

which to updated the running log filter.

Posted by global-e-world on February 03, 2010 at 02:56 PM PST #

Post a Comment:
Comments are closed for this entry.
About

profile image
Arun Gupta is a technology enthusiast, a passionate runner, author, and a community guy who works for Oracle Corp.


Java EE 7 Samples

Stay Connected

Search

Archives
« April 2014
SunMonTueWedThuFriSat
  
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
27
28
29
30
   
       
Today