In one of the previous posts, I had written about Google Mashups editor and how it complements Yahoo Pipes. Here is a small mashup I created sometime ago which puts that concept to use.

The mashup I am going to talk about can be seen here. It’s a simple application that given the name of the place (or any other interest) shows a few photographs (from flickr) and news (from google news) of that place.

The code to accomplish this is really simple. At a high level, this is how it works:

• Define UI structure
• Define data source
• Define the templates that these sources map to
• Specify the events that you’re interested in and the corresponding event handlers

Let’s go over these in a little more detail.

Define UI structure

All the components must be contained under gme:page tag. GME let’s you write html, javascript, css and also provides support for certain UI components. Following is the code used to create the tabbed interface in this example:

<gm:tabs target="infoContainer"/>
<gm:container id="infoContainer"
    style="padding:5px;border:1px solid gray;">
<gm:section id="photos" title="Photos">
//photo tab contents go here
</gm:section>
<gm:section id="news" title="News">
//news tab contents go here
</gm:section>...
//templates go here
//custom javascript goes here
</gm:container>

Accepting user input

You can use regular html forms to accept user inputs, like below:

<form name="infoForm"
   onsubmit="return refreshData();">

I am interested in
<input name="interest" value="New York"
    size="20" type="text" />
<input value="Go find it"
    onclick="refreshData();" type="button" />
</form>

Define Data Source

gm:list tag can be used to define a RSS or Atom feed as data source. This mashup uses a Yahoo pipe in rss format as source for getting photos. As you can see below, the data model points to photoTemplate, which has the information on how to render this data. The gm:handleEvent tag specifies that showPhoto method be invoked when select even occurs:

<gm:list id="photoFeed"
   data="http://yahoo-pipes-feedl-url"
   pagesize="10" template="photoTemplate">
   <gm:handleEvent event="select"
   execute="showPhoto();"/>
</gm:list>

Define templates

The templates are used to render the content. The template below shows the photos from flickr. As you can see, you have complete control over the styling, layout of the UI. The “repeat” attribute on td specifies that code between this td and </td> gets executed for every item in the feed.

<gm:template id="photoTemplate">
<table border="1"
   style="border:1px dotted gray">
<tr>
<td repeat="true" align="center"
  style="width:90px">
<gm:image
  ref="media:group/media:thumbnail/@url"/>
<gm:text ref="atom:title"
 style="font-size:7pt"/>
</td>
</tr>
</table><div style="padding:10px">
Click on the thumbnails above
to see the enlarged view.</div></gm:template>

Event Handling

In this mashup, when user selects a place of interest and presses submit button, refreshData() method is called which dynamically changes the feed source:

function refreshData(){
var interest = document.infoForm.interest.value;
var photoModule =
 google.mashups.getObjectById('photoFeed');
var newsModule =
 google.mashups.getObjectById('newsFeed');
photoModule.setData(
   '[http://yahoo-pipes-feed-url];photoof='+
                    escape(interest) +'&v1');
newsModule.setData(
  'http://[google-news-feed-url];q='+
                    escape(interest));
}

Notice how user selected data is appended to the yahoo pipes and google news feed urls to get the relevant data. The escape function is used to make sure that user data containing space etc are properly encoded.

The event that gets triggered on selecting a photo or news is handled using gm:handleEvent. gm:list (and also gm:map, gm:search, gm:item, gm:calendar) can contain gm:handleEvent to specify the events and event handlers. The following code tells that when a photo is selected from the list, showPhoto method should be invoked:

<gm:handleEvent event="select"
      execute="showPhoto();"/>

The event handler is a javascript method, which in case of photo looks like this. The code below gets the href attribute of the selected photo and opens that link.

function showPhoto(){

  var linkGPath = new GPath(
          "atom:link[@rel='alternate']/@href");
  var listEntry =
   google.mashups.getObjectById('photoFeed').
                     getSelectedEntry();
  var link = linkGPath.getValue(listEntry);
  location.replace(link);

}

Also worth noting in the code above is use of GPath, which is data source element interface. This interface makes it possible to access the getters and setters for the feed elements.

You can see the source code of this mashup here.

Hope this summary of features was useful to get started with creating your own mashups using Google Mashups Editor!