Samples

gm:item and gm:handleEvent

This example uses a gm:item control to display a single item of a list. The gm:list control can also be used to display infobubbles on a Google Map in a similar manner. The gm:item control is used to create new items in a dataset.

This example also uses gm:handleEvent to allow the item tag to listen for events that occur in the list.

<gm:page title="demo" authenticate="true">
  <table>
    <tr>
      <td width="350"></td>
      <td><b>Click on item to see more details</b></td>
    </tr>
    <tr valign="top">
      <td><gm:list id="myList" data="${test}" pagesize="10"/></td>
      <td valign="top">
        <gm:item id="item" template="template">
          <gm:handleEvent src="myList"/>
        </gm:item>
      </td>
    </tr>
  </table>
  <gm:template id="template">
    <div repeat="true">
      <b><gm:text ref="atom:title"/></b>
      <gm:text ref="atom:id"/>
      <hr size="1"/>
      <gm:date ref="gd:when/@startTime"/>
      <gm:html ref="atom:content"/>
    </div>
  </gm:template>
</gm:page>

gm:filter and gm:editButtons

This example uses the gm:filter tag to screen out everything in the source data that doesn't match the word "danger". The gm:editButtons tag is used to enable the user to change or delete entries in the feed.

<gm:page title="filter" authenticate="true">
  <gm:list id="" data="${user}/filterme" template="filterTemplate">
    <gm:filter ref="atom:title" value="danger" />
  </gm:list>
  <gm:template id="filterTemplate">
    <table>
      <tr>
        <td>Title</td>
        <td>Content</td>
      </tr>
      <tr repeat="true">
        <td> <gm:text ref="atom:title"/> </td>
        <td> <gm:text ref="atom:content"/> </td>
        <td> <gm:editButtons text="false"/> </td>
      </tr>
    </table>
    <gm:create label="Add a row"/>
  </gm:template>
</gm:page>

gm:date

This example uses a gm:date tag in a template. When the user clicks, a date control appears so the user can select a date. The selected date is set as the value.

<gm:page title="date" css="/css/g.css" class="googleTheme" authenticate="true">
  <table width="50%">
    <tr>
      <td width="50%">
        <gm:list id="myList" data="${user}/foo" template="myTemplate"/>
      </td>
      <td width="50%">
        <gm:calendar data="${myList}" ref="gd:when/@startTime" />
      </td>
    </tr>
  </table>

  <gm:template id="myTemplate">
    <table class="gm-table">
      <thead>
        <tr>
          <th width="200">Date</th>
          <th width="30"></th>
        </tr></thead>
        <tr repeat="true">
          <td><gm:date ref="gd:when/@startTime"/></td>
          <td><gm:editButtons/></td>
        </tr>
      <tfoot>
        <tr>
          <td colspan="4" align="right"><gm:create label="New Date"/></td>
        </tr>
      </tfoot>
    </table>
  </gm:template>

</gm:page>

gm:debug

In this example, the gm:debug control is used to display the feed contents of a given data source.

<gm:page title="XML Debug">
 
  <gm:list id="myList" template="myTemplate" data="http://newsrss.bbc.co.uk/rss/newsonline_uk_edition/world/rss.xml"/>

  <gm:template id="myTemplate">
    <div repeat="true" style="border:1px solid green">
      <gm:debug ref="."/>
    </div>
  </gm:template>

</gm:page>

gm:map

This example reads data from a feed and displays a map with points. Click a point to make the map scroll the point to the center.

<gm:page title="Map">
  <gm:map id="myMap" data="${myData}" style="width:900px;height:600px;"
    latref="geo:lat" lngref="geo:long" maptypes="true"/>
  <gm:data id="myData" data="http://www.mapnut.com/calstatepark"/>
</gm:page>

gm:pager

This example uses the gm:pager control to show large data feeds one page at a time.

<gm:page title="Paged List">
  <gm:list id="myList" data="${test}" template="template" pageSize="8"/>
  <gm:template id="template">
    <gm:pager/>
    <ul>
      <li repeat="true"><gm:text ref="atom:title"/></li>
    </ul>
  </gm:template>
</gm:page>

Base feed and gm:param

This example uses a search module and a list module to search the Google Base feed and display the results. The gm:param tag is used to specify parameters for the search tag.

<gm:page title="Base" css="/css/g.css" class="googleTheme">
  <div class="gm-app-header">
    <table>
      <tr>
        <td width="350"><h1>Base Volkswagen Selector</h1></td>
        <td>
          <gm:search id="mySearch" data="${base}" defaultValue="*">
            <gm:param name="make" value="Volkswagen"/>
          </gm:search>
        </td>
      </tr>
    </table>
  </div>
  <gm:list id="myList" template="mytemplate" data="${mySearch}"/>
  <gm:template id="mytemplate">
    <table>
      <tbody repeat="true">
        <tr style="height:1.5em;vertical-align:top">
          <td><b>Year:</b></td>
          <td style="padding-right:10px"><gm:text ref="g:year"/></td>
          <td><b>Color:</b></td>
          <td style="width:100%"><gm:text ref='g:color'/></td>
          <td rowspan="2">
            <gm:image width="300" ref="g:image_link" style="padding:3px"/>
          </td>
        </tr>
        <tr>
          <td style="vertical-align:top;" colspan="4">
            <b>Description:</b>
            <gm:text ref="atom:content"/>
          </td>
        </tr>
      </tbody>
    </table>
  </gm:template>

</gm:page>

gm:calendar

The gm:calendar module is handy for displaying data feed elements that are dates.

<gm:page title="Calendar" css="/css/g.css" class="googleTheme">    
  <gm:data id="cal" data="http://www.google.com/calendar/feeds/2odmstb4hh1qcmg4ml8pj1uoo4%40group.calendar.google.com/public/full"/>
  <table class="gm-padded" width="100%">
    <tr>
      <td>
        <gm:calendar id="myCalendar" data="${cal}" />
      </td>
      <td>
        <div>
          <gm:list id="myList" data="${cal}" template="events">
            <gm:handleEvent src="myCalendar" event="select"/>
          </gm:list>
        </div>
      </td>
    </tr>
  </table>

  <gm:template id="events">
    <table class="gm-small">
      <tr repeat="true">
        <td><b><gm:date ref="gd:when/@startTime"/></b></td>
        <td><gm:text ref="atom:title"/></td>
      </tr>
    </table>
  </gm:template>
</gm:page>

Test Feed

This example demonstrates GME's test feed, a built-in feed that contains various data types and information.

<gm:page title="Test Feed">
  <gm:list id="myList" data="${test}"/>
</gm:page>

gm:create

This examples shows how to use the gm:create tag to allow the user to input data, which is then saved in the ${user} feed.

<gm:page title="Editable List" authenticate="true">

  <gm:list data="${user}/foo">
    <gm:template>
      <gm:create label="Create"/>
      <div repeat="true">
        <gm:text ref="atom:title" hint="Enter title."/>
        <gm:editButtons/>
      </div>
    </gm:template>
  </gm:list>

</gm:page>

gm:template

This example shows how to create a template to display and enter data.

<gm:page title="simpletemplate" css="/css/g.css" authenticate="true" class="googleTheme"
  <gm:list id="myList" data="${user}/foo" template="mytemplate"/>
  <gm:template id="mytemplate">
    <table class="gm-table">
      <thead>
        <tr>
          <th width="200">Email</th>  
          <th width="55">Rank</th>
          <th width="200">Comments</th>
          <th width="30"></th>
        </tr>
      </thead>
      <tr repeat="true">
        <td><gm:text ref="atom:title" default=""/></td>
        <td><gm:number ref="gd:priority" default="3" size="3"/></td>
        <td><gm:text ref="atom:content" hint="Enter comment."/></td>
        <td><gm:editButtons/></td>
      </tr>
      <tfoot>
        <tr>
          <td colspan="4" align="right">
            <gm:create label="New User"/>
          </td>
        </tr>
      </tfoot>
    </table>
  </gm:template>
</gm:page>

gm:list

This simple example demonstrates how to use a gm:list tag to display data from a feed.

<gm:page title="list">
  <gm:list id="myList" template="blog" class="gm-padded" data="${test}"/>
</gm:page>

Referencing Data in a List

In this example, a gm:data module is referenced as a data source from a list module.

<gm:page title="Data RSS">
  <gm:data id="data1" data="http://www.digg.com/rss/index.xml"/>
  <gm:list id="myList" data="${data1}"/>
</gm:page>

gm:page

This example demonstrates the attributes of the gm:page tag, the root tag for all GME applications. The title attribute specifies a display name for the application. The css and class attributes allow you to style the page. The onload attribute works the same way as its namesake in an HTML body tag, in this case calling a function that prompts for the user's name. The authenticate attribute must be set to true if the application accesses private feeds.

<gm:page title="PageExample" css="/css/g.css" class="googleTheme" onload="getName()" authenticate="true" >
  <div id="header" class="gm-app-header"/>
  <script>
    function getName() {
      var name = prompt("Please enter your name");
      document.getElementById("header").innerHTML = "Hello " + name;
    }
  </script>
</gm:page>

gm:data

The gm:data tag allows you to declare different types of data sources. This example shows gm:data tags that access three different types of data sources. The first gm:data tag refers to a built-in feed. There are several built-in feeds, such as ${app}, ${base} and ${test}, that you can access. The second gm:data tag refers to an RSS feed by specifying the URL of the feed. Atom feeds are also supported. The third gm:data tag refers to another data source that was declared in the same application.

<gm:page title="DataExample">
  <hr/>
  <gm:data id="testData" data="${test}" />
  <gm:list id="testList" data="${testData}"/>
  <hr/>
  <gm:data id="urlData" data="http://www.digg.com/rss/index.xml" />
  <gm:list id="urlList" data="${urlData}"/>
  <hr/>
  <gm:data id="otherData" data="${urlData}" />
  <gm:list id="otherList" data="${otherData}"/>
  <hr/>
</gm:page>

gm:search

The gm:search tag lets you search a data source. The data source is specified by the data attribute. The ref attribute specifies which element of the data source to search. The param attribute tells which query parameter (or gm:param tag) the input should be bound to. The hint attribute allows you to specify some text that will be displayed in the search module before the user enters text. This example searches Google Base for vehicles made by Ford. The text entered in the search module is used as a model to search for.

<gm:page title="SearchExample">
  <h1>Find a Ford</h1>
  <gm:search id="mySearch" data="${base}" ref="atom:title" param="model" hint="Enter Ford model">
    <gm:param name="make" value="ford"/>
    <gm:param name="model" value="" />
  </gm:search>
  <gm:list id="myList" data="${mySearch}"/>
</gm:page>

gm:html

This sample uses a public RSS feed with valid HTML embedded within. This HTML is pulled from the feed and displayed in a manner similar to the more familiar process of text extraction. A standard gm:list referencing a pre-built gm:template is used. The template, in turn, defines a repeating div element (one per entry) that contains the HTML content associated with its entry.

<gm:page title="htmlSample">
  <gm:list data="http://ax.phobos.apple.com.edgesuite.net/WebObjects/MZStore.woa/wpa/MRSS/topalbums/limit=10/rss.xml"  template="albumHTML" />
  <gm:template id="albumHTML">
    <h1>Top iTunes albums</h1>
    <div style="margin-bottom:20px" repeat="true">
      <gm:html ref="atom:content" />
    </div>
  </gm:template>
</gm:page>

gm:text, gm:number, gm:textarea, gm:image, and gm:link

This example demonstrates the use of several GME components, including text fields and blocks, links, numbers, dates, and images. The example pulls and displays several pertinent fields from a public RSS feed. Although the controls listed above are different, they share a similar usage syntax: the ref attribute of all of the components contains an XPath that refers to the desired content: text for gm:text and gm:textarea, URL for gm:link, file path for gm:image, and numeric value for gm:number.

<gm:page title="miscSample1">
  <style type="text/css">
    div
      {
        display: inline;
      }
  </style>
  <gm:list data="http://digg.com/rss/index.xml" template="diggItemTemplate" />
  <gm:template id="diggItemTemplate">
    <h1>Digg feeds</h1>
    <div style="margin-bottom:10px" repeat="true">
      <h2 style="margin-bottom:0px"><gm:link ref="atom:link/@href" labelref="atom:title" /></h2>
      <gm:number ref="digg:commentCount" />&nbsp;comments
      <p></p>
      <gm:textarea ref="atom:summary" />
      <p></p>
      <gm:image ref="digg:submitter/digg:userimage" style="margin-right:5px" width="10" height="10" />
      Posted by&nbsp;<b><gm:text ref="digg:submitter/digg:username" /></b> on&nbsp;<b><gm:date ref="atom:updated" /></b>
    </div>
  </gm:template>
</gm:page>

gm:checkbox and gm:rating

The gm:rating and gm:checkbox fields are especially useful for custom feeds. Note that the gm:list control does not use an external feed, but instead references a built-in feed called ${user} . Each user of your published application has a distinct ${user} feed; in contrast, the ${app} feed, is shared by all users of your application. To let users write to to the ${user} feed, the gm:page tag's authenticate attribute must be set to "true." In the rest of the application, a gm:template is used to pull various fields from the feed, one of which can be used as a source (by setting the ref attribute appropriately) for a gm:checkbox control and another that can be used with gm:rating controls. Because this feed is writable, the gm:editButtons tag adds create and delete buttons which can be used to modify the data.

<gm:page title="miscSample2" authenticate="true">
  <style type="text/css">
    th, td
      {
        text-align:center;
        width: 150px;
      }
  </style>
  <gm:list data="${user}/favoriteMusic" template="musicItems" />
  <gm:template id="musicItems">
    <h1 style="text-align:center">Music listing</h1>
    <table align="center">
      <tr>
        <th>Favorite</th>
        <th>Song name</th>
        <th>Rating</th>
      </tr>
      <tr repeat="true">
        <td><gm:checkbox ref="gd:favorite" /></td>
        <td><gm:text ref="atom:title" /></td>
        <td><gm:rating ref="gd:rating" /></td>
        <td><gm:editButtons deleteOnly="true" /></td>
      </tr>
    </table>
    <p></p>
    <div style="text-align:center">
      <gm:create label="New listing" />
    </div>
  </gm:template>
</gm:page>

gm:tabs, gm:container, gm:section, and gm:toggle

This example uses the gm:tabs, gm:container, and gm:section tags to create a 3-tab application. The gm:tabs tag initializes a set of tabs, with the target attribute specifying the ID of the gm:container that holds the tabs (gm:section). Each section displays a different RSS feed from Digg.

The gm:toggle tag allows the user to hide or show the summary. As in this example, you must use gm-toggled as the toggled element's class attribute.

<gm:page title="diggTabs" >

  <gm:tabs target="myContainer"/>
  <gm:container id="myContainer" style="padding:3px;border:1px solid #369;width:600px;">
    <gm:section id="sectionWorld" title="World">
      <gm:list id="World" template="myTemplate" data="http://www.digg.com/rss/containerworld_business.xml" pageSize="10"/>
    </gm:section>
    <gm:section id="sectionTech" title="Technology">
      <gm:list id="Technology" template="myTemplate" data="http://www.digg.com/rss/containertechnology.xml" pageSize="10"/>
    </gm:section>
    <gm:section id="sectionScience" title="Science">
      <gm:list id="Science" template="myTemplate" data="http://www.digg.com/rss/containerscience.xml" pageSize="10"/>
    </gm:section>
  </gm:container>
  <gm:template id="myTemplate">
    <table>
      <tbody repeat="true">
        <tr>
          <td><h3><gm:text ref="atom:title"/></h3></td>
        </tr>
        <tr>
         <td><gm:toggle/><gm:text ref="atom:summary" class="gm-toggled"/></td>
        </tr>
      </tbody>
    </table>
  </gm:template>
</gm:page>

gm:autoComplete

This example demonstrates the gm:autoComplete tag. When the user types two or more characters into an autoComplete field, GME tries to complete the entry by matching an element from the data specified in the tag.

<gm:page title="AutoComplete" authenticate="true">
  <div style="margin: 25%; width: 600px">
    <gm:list data="${user}/autocomplete2" template="autocomplete"/>
  </div> 
  <gm:template id="autocomplete">
    <table width="100%"> 
      <thead>
        <tr>
          <th colspan="4" style="background-color: lightblue">Movie Comments</th>
        </tr>
        <tr>
          <th style="text-align:left">Movie Title</th>
          <th style="text-align:left">Your Review</th>
          <th style="text-align:left">Your Rating</th>
        </tr>
      </thead>
      <tbody repeat="true">
        <tr>
          <td><gm:autoComplete ref="atom:title" data="http://movies.go.com/xml/rss/intheaters.xml" value="atom:title" /></td>
          <td><gm:html ref="atom:content"/></td>
          <td><gm:rating ref="gd:rating"/></td>
          <td><gm:editButtons/></td>
        </tr>
      </tbody>
    </table>
    <gm:create label="New Row"/>
  </gm:template>
</gm:page> 

gm:subscribe

This example uses a simple application-specific message board to demonstrate the gm:subscribe tag. The gm:subscribe tag simply adds a link to the page pointing to the referenced feed. This allows your users to subscribe to a custom feed (such as ${app}/posts in this example) using an RSS reader/aggregator.

<gm:page title="Sample - gm:subscribe" authenticate="true">
  <div align="center">
    <h1>Simple Discussion Board</h1>
    <gm:data id="allPosts" data="${app}/posts" />
    <gm:subscribe data="${allPosts}" label="Subscribe to this discussion board!" />
    <p></p>
    <div>
      <gm:list data="${allPosts}" selection="false" template="discussionTemplate" />
    </div>
    <div>
      <gm:item data="${allPosts}" template="newPostTemplate" create="true"/>
    </div>
  </div>

  <gm:template id="discussionTemplate">
    <table>
      <tr repeat="true">
        <td style="padding:5px;">
          <gm:textarea ref="atom:content" size="80" style="white-space:pre" />
        </td>
      </tr>
    </table>
  </gm:template>

  <gm:template id="newPostTemplate">
    <table style="margin-top:10px;">
      <tbody repeat="true">
        <tr>
          <td style="padding:5px;">
            Post: <gm:textarea ref="atom:content" size="80" style="white-space:pre;display:inline"/>
          </td>
        </tr>
        <tr>
          <td style="padding:5px;"><gm:editButtons text="true"/></td>
        </tr>
      </tbody>
    </table>
  </gm:template>

</gm:page>
	

gm:select, gm:option

The gm:select tag enables you to add a control that presents a fixed set of options to users when they attempt to add or edit a feed entry. The gm:select tag can contain any number of gm:option tags, and Its ref attribute points to the location in the feed where the value of the selected option is stored.

<gm:page title="Sample - gm:select/option" authenticate="true">

  <div align="center">
    <h1>To-Dos</h1>
    <gm:list data="${user}/todos" template="myTemplate" />
  </div>

  <gm:template id="myTemplate">
    <gm:create label="New to-do" />
    <p></p>
    <table class="blue-theme">
      <thead>
        <tr>
          <th>Task</th>
          <th>Priority</th>
          <th />
        </tr>
      </thead>
      <tr repeat="true">
        <td><gm:text ref="atom:title" /></td>
        <td>
          <gm:select ref="gd:priority">
            <gm:option value="0" selected="true">Low</gm:option>
            <gm:option value="1">Medium</gm:option>
            <gm:option value="2">High</gm:option>
          </gm:select>
        </td>
        <td><gm:editButtons /></td>
      </tr>
    </table>
  </gm:template>

</gm:page>

gm:sort, gm:header

This example, which demonstrates gm:sort and gm:header, simply displays two lists, one sorted and the other unsorted. To do this, there's a gm:sort tag in one of the gm:list modules. The ref attribute in the gm:sort tag indicates which feed field to use for sorting. The reverse attribute determines whether to use a reverse sort. You must include a name for the gm:sort tag, because the gm:list tag refers to it. The sorted list's template includes gm:header tags so that users can change the sort order by clicking on a column header. When the user clicks on a header, the list is sorted according to the gm:header tag's sort attribute.

<gm:page title="Sample - gm:sort/header" authenticate="false">
  <table width="100%">
    <tr>
      <td width="50%" align="center">
        <h1>Unsorted</h1>
        A standard, unsorted list.
        <p></p>
        <gm:list data="http://digg.com/rss/index.xml" template="unsortedTemplate" />
      </td>
      <td width="50%" align="center">
        <h1>Sorted</h1>
        Sorted! Click column headers to change sort order.
        <p></p>
        <gm:list data="http://digg.com/rss/index.xml" sort="diggCountSort" template="sortedTemplate">
          <gm:sort name="diggCountSort" ref="digg:diggCount" type="number" reverse="true" />
          <gm:sort name="titleSort" ref="atom:title" />
        </gm:list>
      </td>
    </tr>
  </table>
  <gm:template id="unsortedTemplate">
    <table>
      <thead>
        <tr>
          <th>Diggs</th>
          <th />
          <th>Headline</th>
        </tr>
      </thead>
      <tr repeat="true">
        <td><gm:number ref="digg:diggCount" /></td>
        <td width="15" />
        <td><gm:text ref="atom:title" /></td>
      </tr>
    </table>
  </gm:template>
  <gm:template id="sortedTemplate">
    <table>
      <thead>
        <tr>
          <th><gm:header sort="diggCountSort">Diggs</gm:header></th>
          <th />
          <th><gm:header sort="titleSort">Headline</gm:header></th>
        </tr>
      </thead>
      <tr repeat="true">
        <td><gm:number ref="digg:diggCount" /></td>
        <td width="15" />
        <td><gm:text ref="atom:title" /></td>
      </tr>
    </table>
  </gm:template>

</gm:page>

gm:labels, annotations

This example uses annotations and labels to display a read-only feed tagged with ratings and categories.

<gm:page title="tagged blog feed" authenticate="true" onload="listAll()">

  <h1>tagged blog feed</h1>
  
  <gm:tabs target="cont"/>
  <gm:container id="cont">
    <gm:section id="rss" title="rss feed">
      <gm:list id="rawList" pageSize="10" template="t"/>
    </gm:section>
    <gm:section id="fav" title="favorite">
      <h3>Tags (<a href="#" onclick="listAll()">clear</a>)</h3>
      <gm:list id="labelList" data="${labels}" pageSize="10" template="l">
        <gm:handleEvent event="select" execute="listTag(event.entry);"/>
      </gm:list>
      <gm:list id="annotatedList" pageSize="10" sort="rating" template="t">
        <gm:sort ref="gd:entryLink/entry/gd:rating/@value" name="rating" reverse="true"/>
      </gm:list>
    </gm:section>
  </gm:container>    
  <gm:template id="t">
    <table style="width: 100%" class="blue-theme">
      <tr repeat="true">
        <td><gm:text ref="atom:title"/></td>
        <td><gm:rating ref="gd:entryLink/entry/gd:rating"/></td>
        <td><gm:labels/></td>
      </tr>
      <tr>
        <td colspan="3"><gm:pager/></td>
      </tr>
    </table>
  </gm:template>
  <gm:template id="l">
    <ul>
      <li repeat="true"><gm:text ref="atom:title"/></li>
    </ul>
  </gm:template>
  <script language="JavaScript">
  var feed = 'http://feeds.feedburner.com/boingboing/iBag';
  function listTag(entry) {
    var categoryGpath = new GPath('category/@term');
    var term = categoryGpath.getValue(entry);
    var list = google.mashups.getObjectById('annotatedList');
    var newData = feed + '|${annotations}:(' + term + ')';
    list.setData(newData);
  }
  function listAll() {
    var list = google.mashups.getObjectById('annotatedList');
    var newData = feed + '|${annotations}';
    list.setData(newData);
    list = google.mashups.getObjectById('rawList');
    list.setData(newData);
  }
  </script>

</gm:page>

gm:video

This example demonstrates the gm:video tag, which you can use to embed a video clip in your application.

<gm:page title="Google Samples Video">

  <gm:list template="videoTemplate" data="http://youtube.com/rss/global/top_favorites.rss" selection="false"/>
  <gm:template id="videoTemplate">
    <table>
      <tbody border="0" width="100%" repeat="true">
        <tr>
          <td><gm:html style="font-weight: bold" ref="atom:title"/></td>
        </tr>
        <tr>
          <td><gm:video ref="atom:link[@rel='enclosure']/@href"/></td>
        </tr>
      </tbody>
    </table>
  </gm:template>
</gm:page>