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 withservice="/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
[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("jmaki.filters"); myDays= ["Monday","Tue…
Comment by Arun Gupta's Blog — July 25, 2007 @ 8:27 am
[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…
Comment by Arun Gupta's Blog — August 6, 2007 @ 6:46 am
[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框架进行通讯,通过…
Comment by mengyao.chen — December 13, 2007 @ 8:42 pm
[Trackback] 下面使用jMaki中的Yahoo Calendar和Yahoo DataTable 来建立一个迷你Blog首页。这个小程序可以在选择日历的某个日期后，Data Table中只列出这个日期所发表的文章。jMaki中的Yahoo Calendar和Yahoo DataTable 都是Yahoo UI Library 中的控间, jMaki的作用只是在现有的控件之上作了一些包装(wrapper), 这样,这些Widget可以通过jMaki框架进行通讯,通过很少的代码或者配置就可以完成一个功能丰富的应用…
Comment by techweb — December 14, 2007 @ 2:23 am
[Trackback] 下面使用jMaki中的YahooCalendar和YahooDataTable来建立一个迷你Blog首页。这个小程序可以在选择日历的某个日期后，DataTable中只列出这个日期所发表的文章。…
Comment by csdnexpert — December 16, 2007 @ 6:17 pm
If you have been following my blog, then you know it already. But a picture is worth a thousand words so here it is.
Comment by LAPTOP BATTERY — November 26, 2008 @ 9:59 pm
This screencast shows how to creates two mashups – the first one.
Comment by bertina1230 — December 10, 2009 @ 1:37 am
which to updated the running log filter.
Comment by global-e-world — February 3, 2010 @ 10:56 pm