Arun Gupta, Miles to go ...

jMaki at Mashup Camp Report

Thursday (Jul 19) is the last day of Mashup Camp. Greg gave a jMaki session on Monday and today Carla helped staff the tabletop and I participated in Speed Geeking. This was my first experience and lot of fun to give a 5-minute pitch to bunch of participants. Here is the 5-minute pitch that I presented:

• jMaki is a lightweight framework to create Ajax-enabled Web 2.0 applications.
• jMaki - "j" stands for JavaScript and "Maki" is to wrap in Japanese (as in Sushi).
• Toolkits: It allows to create native widgets and provide wrappers over widgets from multiple toolkits such as Yahoo, Dojo, Script.aculo.us and others.
• Platform: jMaki widgets can be embedded in Java Server Pages (JSP), Java Server Faces (JSF), Phobos, PHP and Ruby-on-Rails applications.
• Tools: jMaki-enabled applications can be easily created using NetBeans IDE, Eclipse and Ant-based command-line tasks.
• The biggest benefit of jMaki is that it provides standard data models allowing developers to seamlessly change the underlying toolkits (for a better look-and-feel) and also shields developers from changes in data models in future version of these toolkits.
• jMaki allows to create powerful mashups easily. Some of the powerful mashups that can be created are described here. Stay tuned for detailed blog entries and screencasts showing how to create them.

Julian @ Sun tabletop	Arun @ Sun tabletop	Jeremiah helping a customer @ Sun tabletop	Carla & Greg @ Sun tabletop
Speed Geeking Schedule		Unconference Event Planner

Technorati: jmaki mashup mashupcamp mashupu sun conf

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

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]