Google混搭编辑器(Google Mashup Editor)
| Modules and Module Support
|
Controls |
|
|
|
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}" size="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>
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">
<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>
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>
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>
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>
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>
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>
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>
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>
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>
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>
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>
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>
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>
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>
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>
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>
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" /> 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 <b><gm:text ref="digg:submitter/digg:username" /></b> on <b><gm:date ref="atom:updated" /></b>
</div>
</gm:template>
</gm:page>
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"> <th>Favorite</th>
<th>Song name</th>
<th>Rating</th>
<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>
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>
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>
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>