Google混搭编辑器(Google Mashup Editor)入门指南

内容

使用Google混搭编辑器
Hello World!
用简单列表显示一个数据聚合源
创建带有地图的简单混搭程序
读写数据

使用Google混搭编辑器

Google混搭编辑器(GME)是一个互动开发环境，你可以在里面编辑，编译，测试并且管理你的应用程序。编辑器还包含了一个内建的所有GME标记和属性的参考文档。当你的程序设计完成，你可以把它发布到Google的服务器上，这样其他人就可以使用它了。

下面是GME关键部分的介绍:

编辑器

编辑器就是包含<gm:page></gm:page> 标记的文本编辑面板。你可以通过在<gm:page>标签之间放置你的HTML，CSS，JavaScript以及GME标记的方式创建你的应用程序。

通常情况下，任何可以放置在<body>和</body>之间的HTML，CSS，或者JavaScript代码，都可以用在你的程序中。GME为你的程序提供了语法检查和关键字高亮功能。当你编译的程序准备测试或发布的时候，所有的GME标记就会被转换为JavaScript。你可以通过点击你使用的浏览器菜单中的查看->页面源代码，查看你程序包含的结果HTML代码。

如何进行调试呢？我们发现的最好的JavaScript调试工具是Firebug，一个Firefox插件，允许你查看JavaScript错误信息，查看DOM结构，调试JavaScript（设置断点，查看变量等等）。
管理项目和文件

你可以使用文件菜单来保存项目，创建新项目，测试你的项目，以及发布它。为了使用起来更快，你也可以点击编辑器顶端的Test按钮来测试你的应用程序。

你可以使用屏幕右边的链接，来查看你创建的项目，还可以查看我们用来帮助你入门的例程的列表。
发布程序
你可以随时通过点击Test按钮来测试你的程序。一旦你确信你的程序已经可以正常工作了，你可以使用File > Publish Project 菜单把你的程序发布到Google的服务器上。当你发布了你的应用程序，GME给你显示你的程序托管的地址。
你还可以把你的程序发布为一个Google Gadget。如果你想这么做，只需选择File > Publish as Google Gadget菜单。
参考指南

想知道如何使用Google混搭编辑器，就需要浏览我们的标签参考文档。在编辑器点击一个GME标签，然后按键盘的F2键，编辑器右边就会从标签参考文档显示该标签的描述。

Hello World!

Google混搭编辑器的"Hello World!"程序非常简单。

<gm:page title="hello">

  <h1>Hello World!</h1>

</gm:page>

就是这样的。这个程序创建了一个页面包含了一个文本信息"Hello World"作为标题。这里我们混用了gm:page，一个GME标签，以及h1，一个HTML标签。这表现了GME强大的能力。你的程序中除了可以使用GME标签以外，还可以使用任何HTML，CSS，或者JavaScript。

用简单列表显示一个数据聚合源

许多GME应用程序都提供让用户和一个数据聚合源内数据交互的途径。你通常可以用下面的步骤创建你的程序。

定义用户接口
用界面组件制作包含重复元素的模版
指定一个使用该模版的GME模块(比如list)
定义在模板中出现的数据源
决定模块之间如何交互，如何处理事件。

我们来看看示例。

定义用户接口

Google混搭编辑器程序可以包含HTML，CSS，JavaScript，和Google混搭(gm:)标签。首先，我们用HTML和CSS定义我们程序的外观。在这个程序里，我们想显示应用程序的标题，然后在表格里面显示来自digg.com的Rss源中条目的标题和"digg count"。我们在GMEgm:page标签内用HTML实现这些内容。

<gm:page title="Mashup">

  <h1>Hello World!</h1>

    <table>
      <tr>
        <td>story title</td>
        <td>digg count</td>
      </tr>
    </table>

</gm:page>

现在我们只是简单的定义了一条数据的外观。后面我们将把这个外观应用于数据源中的每条数据。

创建模板引用数据

在我们创建了用来定义显示数据行外观的表格后，我们把这个表格做成模板。要把表格变成模板，我们需要做三个改变：

增加gm:template标记。
在针对数据源每个数据都会重复的元素上加上repeat属性。
用我们想要的源的数据引用代替"story title" and "digg count"。

我们给先前做好的表格加上模板元素。

加入模版标签:

<gm:template id="diggTemplate"> 
  <table>
    <tr>
      <td>story title</td>
      <td>digg count</td>
    </tr>
  </table>
</gm:template>

现在在需要重复的元素上加上repeat属性──在这里，一行数据用一个tr标签表示。这样，数据源中的每个条目就会创建一个新行。

<gm:template id="diggTemplate">
  <table>
    <tr repeat="true">
      <td>story title</td>
      <td>digg count</td>
    </tr>
  </table>
</gm:template>

接下来，我们用源数据的引用代替占位用的文本"story title"和"digg count"。因为repeat属性，数据源中的每条数据都会让行重复。GME把所有的数据聚合源都转换为ATOM聚合格式，这样数据访问的方式就标准化了。在这里，我们想获取每条记录的atom:title和digg:diggCount元素，并把他们显示在表格的行中。

<gm:template id="diggTemplate">
  <table>
    <tr repeat="true">
      <td><gm:text ref="atom:title"/></td>
      <td><gm:text ref="digg:diggCount"/></td>
    </tr>
  </table>
</gm:template>

加入list标签

下面，我们需要加入一个用指定模板现实数据的list标签:

<gm:page title="Mashup">

    <h1>Hello World!</h1>

<gm:list id="diggFeed" template="diggTemplate"/>

<gm:template id="diggTemplate">
  <table>
    <tr repeat="true">
      <td><gm:text ref="atom:title"/></td>
      <td><gm:text ref="digg:diggCount"/></td>
    </tr>
  </table>
</gm:template>

指定数据源

在GME程序中可以使用任何RSS或者ATOM聚合源作为数据源。（后面我们提供了一些内建的数据源，如果你现在就像看可以点击这里查看。）你可以用data属性为list或者其他模块指定数据源。

例如，按如下步骤我们可以把digg.com的聚合源指定为list的数据源。

<gm:list id="diggFeed" data="http://www.digg.com/rss/index.xml" pagesize="10" template="diggTemplate"/>

pagesize属性设定数据显示的行数。

好，完成了。这就是完整的程序，这个程序会从digg.com的聚合源读取信息，显示故事的标题和被digg的次数：

<gm:page title="Mashup">

  <h1>Hello World!</h1>

  <gm:list id="diggFeed" data="http://www.digg.com/rss/index.xml" pagesize="10" template="diggTemplate"/>

  <gm:template id="diggTemplate">
    <table>
      <tr repeat="true">
        <td><gm:text ref="atom:title"/></td>
        <td><gm:text ref="digg:diggCount"/></td>
      </tr>
    </table>
  </gm:template>

</gm:page>

你可以更改data属性指向任何Rss或者Atom聚合源。你的GME程序会用聚合源指定的位置得到数据并把数据填充到模板上。

创建带有地图的简单混搭程序

Google混搭编辑器提供了一种简单途径，方便用户创建带有强大组件的交互程序。在下面的例子里面，我们从一个数据源得到一个公园名字和位置的列表。我们用两种方式显示这些信息:文本列表和地图。然后我们将两者联系起来，这样我们在列表上选择一个项目，对应的公园就会被滚动到地图的中央。

指定列表

我们首先创建一个list模块并指定如何显示它:

<div style="float: left; width: 50%"> 
  <gm:list id="CAParks" data="http://www.mapnut.com/calstatepark.xml" pagesize="25"/>
</div>

在前面的例子里面，我们指定数据源和我们希望显示的条目数量。这次略有不同。首先，我们没有指定模板。在没有指定模板的情况下，数据会按list默认的方式显示。其次，我们用div标签来控制list的宽度是屏幕宽度的一半。

创建地图

下面我们指定map模块:

<div style="float: left; width: 50%"> 
  <gm:map id="CAParkMarkers" data="${CAParks}" latref="geo:lat" lngref="geo:long">
    <gm:handleEvent src="CAParks"/>
  </gm:map>
</div>

注意data属性指向了gm:list，ID为CAParks。为了获取聚合源的经纬度信息，我们请求geo:lat和geo:long元素。

处理用户点击

map标签内的handleEvent在map和list之间建立了联系。当list中的项目被选中的时候，map会得到通知，把所选的位置移动到地图中央。

下面是完整的代码:

<gm:page title="Mashup">


<div style="float: left; width: 50%">  <gm:list id="CAParks" data="http://www.mapnut.com/calstatepark.xml" pagesize="25"/>
</div>

<div style="float: left; width: 50%">

  <gm:map id="CAParkMarkers" data="${CAParks}" latref="geo:lat" lngref="geo:long">
    <gm:handleEvent src="CAParks"/>
  </gm:map>

</div>

</gm:page>

读写数据

GME创建的程序不仅可以读聚合源，也可以写聚合源。这就给了应用程序接受和保存用户输入的能力。这个例子里，我们创建一个基础项目列表。每个项目有一个名字和任意多数量的任务。项目中的任务包含标题和日期。

指定项目的显示方式

我们从设置项目列表的显示方式开始。我们不知道会有多少个项目，所以我们的模板需要repeat属性。

<gm:template id="simpleProjects">

  <div repeat="true">
    <gm:text ref="atom:title"/>
    <gm:editButtons/>
  </div>

  <gm:create label="New Project"/>

</gm:template>

repeat属性指定列表中的每个项目都用一个文本对象(标题)表示。editButtons标记在每个条目之后加入编辑按钮，允许用户编辑或者删除条目。当条目编辑后，它会保存在数据聚合源内。

create标记在模板上添加"New Project"按钮。用这个按钮用户可以在列表中加入新项目。当用户点击"New Project"按钮，应用程序采用模板修饰的方式创建新的条目，并显示出来供用户编辑。当用户点击回车键或者点击保存按钮后，数据会保存在数据聚合源内。

设置任务的显示方式

接下来，我们需要创建一个模板来显示任务中的每一个项目。因为每个任务有多种元素(例如，任务名和日期)，所以我们创建一个表格来定义显示方式。

<gm:template id="simpleTasks">
  <table width="100%">
    <tr repeat="true">
      <td><gm:text ref="atom:title"/></td>
      <td><gm:date ref="gd:when/@startTime"/></td>
      <td><gm:editButtons deleteonly="true"/></td>
    </tr>
  </table>

  <gm:create label="new task"/>

</gm:template>

repeat块内的第一行是任务标题，就像项目模板的一样。下一个标记引用数据聚合源中的任务的日期信息。repeat块的最后一行是另一个editButtons标记。这个标记包含了deleteonly属性，这意味着如果一个已经存在的任务被显示的时候，它的后面只会显示删除按钮(没有编辑按钮)。

跟项目模板相似，任务模板包含一个create标记用来显示创建按钮。用户点击"new task"按钮就会在数据聚合源中加入新的任务。

创建整体外观处理事件

为了完成我们的程序，我们需要一个表格显示所有项目，一个项目一行。当项目被选择，它包含的任务就被显示在后边，一个任务一行。我们还需要设定，当用户点击一个项目，项目中的任务会被显示。

<table width="100%">
  <tr>
    <td width="50%">
      <gm:list id="Projects" data="${app}/Projects" template="simpleProjects"/>
   </td>
   <td width="50%">
     <gm:list id="tasks" data="${Projects}/tasks" template="simpleTasks">
       <gm:handleEvent src="Projects"/>
     </gm:list>
   </td>
  </tr>
</table>

td标记把表格分成两列。左边那列放置了一个list对象，这个list对象用${app}/Projects语法从数据聚合源获取数据。这是什么呢？每个应用程序包含自己的数据聚合源，用${app}语法你就可以访问它。你可以用斜杠的语法提取聚合源中的信息，例如：${app}/Projects。当你使用斜杠语法，你就在聚合源创建了相应的数据结构。

用来定义右栏list标记还包含了一个handleEvent标记。这个handleEvent标记监听项目的list标记，当一个选择事件发生的时候，任务列表响应这个事件，显示这个项目包含的任务。

下面是程序的完整代码

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

  <table width="100%">
    <tr>
      <td width="50%">
        <gm:list id="Projects" data="${app}/Projects" template="simpleProjects"/>
      </td>
     <td width="50%">
       <gm:list id="tasks" data="${Projects}/tasks" template="simpleTasks">
         <gm:handleEvent src="Projects"/>
       </gm:list>
     </td>
    </tr>
  </table>

  <gm:template id="simpleProjects">

    <div repeat="true">
      <gm:text ref="atom:title"/>
      <gm:editButtons/>
    </div>

    <gm:create label="New Project"/>

  </gm:template>


  <gm:template id="simpleTasks">
    <table width="100%">
      <tr repeat="true">
        <td><gm:text ref="atom:title"/></td>
        <td><gm:date ref="gd:when/@startTime"/></td>
        <td><gm:editButtons deleteOnly="true"/></td>
      </tr>
    </table>

    <gm:create label="new task"/>

  </gm:template>

</gm:page>

这些例子会帮助你入门。最好的学习方法是使用Google混搭编辑器(Google Mashup Editor)来实现你自己的想法。祝你好运，希望你能玩的愉快！