The Google Mashup Editor is a tool that enables you to create AJAX-based applications. You can pull data from external RSS and Atom feeds as well as Google Base. Additionally, you can write to application- or user-specific feeds.

GME provides versatile modules through declarative XML tags. When used in conjunction with HTML, CSS and JavaScript, these tags allow you to create web applications and mashups quickly and easily. GME also takes care of the storage, hosting and serving of your web application.

To get started using GME, please go to http://editor.googlemashups.com.

The Google Mashup Editor no longer accepting new users. For more information, please refer to the announcement.

GME currently supports Firefox 1.5+ and IE 6+.

GME lets you use familiar technologies. You can use JavaScript, CSS, and HTML along with GME's declarative XML tags to build mashups and web applications quickly. For more advanced developers, GME's JavaScript API gives you even more functionality and flexibility in manipulating data.

Applications run on GME production servers hosted by Google. For now this is the only environment in which they will run. In a future release, it may be possible to deploy your GME-built application on your own site.

All source code and uploaded resource files are stored using the open source project hosting feature of Google Code. When a new project is created we create a new a open source repository on Google Code to store your source files and other resources associated with your project. Initially the source code is created under the Apache 2.0 open source license which you can change at anytime using the project hosting feature of Google Code. You can also use the subversion repository on Google Code to edit your files outside of the Google Mashup Editor.

To access your projects in Google Code, navigate to your projects using the following URL format: http://code.google.com/u/<your gmail username>. A list of the project you have created will be available for you to browse and edit the settings.

GME can read all RSS and Atom feeds, and data contained thereinis made available to your application via the Atom-based Google Data API.

Here are a couple of great resources for learning more about the Atom protocol and the Atom-based Google Data API:

• Atom protocol docs (http://www.atomenabled.org/developers/syndication/atom-format-spec.php)
• Google Data API docs (http://code.google.com/apis/gdata/index.html)

Testing applications is simple in GME. The Test button above the Editor opens your application in the Editor's Sandbox tab for testing. F4 is the keyboard shortcut for this.

All data that you input into your application while in test mode is used only for testing purposes. When the application is first published, its internal data sources will be empty. Once users have entered data into your published application, that data will remain, even when the application is republished.

GME offers the following features to help you in constructing your code:

• Syntax highlighting - Elements are distinctively "colorized"—HTML, GME tags, and JavaScript are highlighted in different colors to visually distinguish the different parts of the code. Also, as the user types, the editor highlights the code to indicate where a tag or attribute value may not have been properly closed off.
• Syntax completion for gm tags - The editor will try to auto-complete GME tags so that you don't have to create closing tags yourself. For example, on a new line, start typing <gm:template and then press the Tab key—the rest of the template skeleton is filled in.
• Error checking - Select Syntax Checking from the drop-down File menu to have the compiler detect and report errors it knows about.
• F2 for reference - If you can't remember the required formats or elements of a tag, you can press F2 to bring up the tag's reference documentation.
• Line numbering - The editor provides line numbering for easy reference.

During compilation of your code such as when you choose Check Syntax from the File menu, GME will identify some classes of errors for you. There are also good debugging tools available for debugging JavaScript, CSS and HTML:

• For Firefox users, we highly recommend Firebug.
• For IE users, Microsoft includes a decent JavaScript debugger with IE. To turn it on, follow the instructions at
  http://www.jonathanboutelle.com/mt/archives/2006/01/howto_debug_jav.html.

Yes. To use external APIs in your application, specify the onload attribute within the <gm:page/> tag of your application. Many JavaScript APIs, such as the Google AJAX Search API, require you to call an OnLoad handler upon loading—you would specify that handler function in the onload attribute, for example:

Yes. To link to an external css file, simply reference that file in the <gm:page> tag. For example:

The default CSS styles are at

http://editor.googlemashups.com/docs/css/gm.css.

Some of the samples link to a "Googley" style sheet from

You can override these defaults by creating a css class with the same name in your application or in an external css file.

To undo the last change, simply press Ctrl-Z or ⌘-Z. You can repeat this command to scroll through your changes.

• Tab - Autocomplete tag declaration
• F2 - Show tag reference
• F4 - Test application

<gm: designates a tag as belonging to GME's "Google Mashup" namespace.

The ${app} feed is specific to your application and is shared by all its users. In contrast, each user of each application has a separate ${user} feed. Users can't see each other's ${user} feeds.

For more details, see the GME documentation.

Yes, GME provides additional functionality on top of regular HTML (or DHTML or XHTML for that matter) pages, so you can include any HTML or JavaScript in the page.

However, if you'd like to use JavaScript on any of the GME objects such as gm:map or gm:list, you must use our JavaScript API that gives you direct access to the document object model (DOM) via JavaScript. This API lets you use JavaScript to perform operations that duplicate and go beyond the features available in the GME tags. The API is useful when you want to access an object in the application from a JavaScript expression. You can also use the API to perform CRUD operations (create, read, update, delete) on entries in a data feed.

There are a couple of ways to do this:

1. Click on the Feed Browser tab. Select from the drop-down menu a feed type—such as the pre-populated ${test} feed or an external RSS or Atom feed. Input query parameters, then click the Get Feed button to fetch and display the feed.
2. Add a <gm:debug/> tag to a form in your application. Whenever data is added, edited, or removed, you will be able to see the XML structure that is produced in real time. <gm:debug/> should only be used when testing applications. Example:

   <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">
         <gm:debug ref="."/>
       </div>
     </gm:template>
   </gm:page>
   

Just as for HTML tags, you can simply add an attribute to the gm:xx tag. For example, if you want to apply an onclick event handler to gm:text, it would look something like this:

Alternatively, you can include a gm:handleEvent object with certain GME modules such as gm:list, gm:map, and gm:calendar. This object will listen to an event and then perform an action when the event occurs.

Follow these steps:

1. Load the source code of the application in the Editor, or save the project if it's a new one.
2. Click the File button and select Upload Resource File.
3. Click the Browse button on the subsequent dialog box and select the resource file you want to upload.
4. Click the Upload button.

The uploaded file should appear under the Files heading in the lower right corner of the Editor window and can be referenced in your code with ./resources/<filename>. For example, if you had uploaded an image file named "gmeimage.jpg", you can include it in your application with <img src="./resources/gmeimage.jpg" />.

Absolutely!

Each project will have an "index.gml" file, which is the starting page for the application. To create a new page for use in the same application, click the File menu button and choose New Source File. Pick a name for this page and start composing the content for it.

To link from one page to another in the same project, use a standard anchor tag, setting the href attribute to the name of the target page followed by the extension .html. For example, to link to the index page, use <a href="index.html">Index</a>.

Note: Do not use .gml in lieu of .html for the file extension, or you'll inadvertently display source code instead of the intended HTML content.

No, data with the same user stripe is not shared across multiple applications. Even if the same user stripe (e.g. ${user}/locations) is used in multiple applications, each application keeps its own data. The scope of the stripe does not expand beyond its own application.

Absolutely! GME has a gm:rating control for just this purpose -- the actual rating is stored in the value attribute of the element referenced in the control's ref attribute. Say your rating control looks like:

you can always display the highest rated entries first by using the following gm:sort tag:

To publish an application once you have finished testing it, click on the File menu above the source editor and select Publish Project....

A dialog box will appear in which you can choose the subdomain your application will be served from. You can check if the URL is available by pressing the Check button.

Once you have typed in the application's published name, click the Publish button. This will compile your application into JavaScript and HTML. The files it produces are deployed on Google servers.

After clicking the Publish button, GME will launch the just-published application. The URL that appears in the address bar of your browser is the address to your application and can be distributed to your users.

Click on the Published Apps tab at the top right hand corner of the Editor. Select the application you want to unpublish and then click the Unpublish button.

Creating a Google Gadget from your mashup is easy! Just follow these steps:

1. Publish your mashup by choosing 'Publish Project' from the Editor's File menu.
2. Select 'Submit Gadget' from the Editor's File menu -- a new file appears under the Files heading in the lower-right corner of the Editor called <PAGE_NAME>-gadget.xml.
3. Edit this new file as you see fit (e.g. changing the Gadget's title, setting size properties, etc.).
4. Add your gadget to your iGoogle homepage by visiting http://www.google.com/ig, signing in, clicking the 'Add Stuff' link at the right of the page, clicking 'Add by URL' to the right of the search box, and entering the URI to your Gadget XML file (e.g. http://<PUBLISHED_NAME>.googlemashups.com/<PAGE_NAME>-gadget.xml).

Bear in mind that you must re-publish your application in order for any changes to the Gadget XML file to take effect.

Click on the Published Apps tab at the top right hand corner of the Editor. A table with all your published applications will be displayed with links to view the applications. You can also unpublish any application from this list by choosing the item and then clicking the Unpublish button.

For a previously published project, the Editor will display the published application's URL (on top near the project title) upon opening of the project.

Once published, your application can be accessed at http://<appname>.googlemashups.com. You specify an <appname> when you first publish your application.

You can't do this currently. However, we believe it's important for developers to be able to deploy their applications where they please, so we plan on providing this feature at some point in the future.

No, the data stored in the ${app} and ${user} feeds will remain intact even if you republish your application. Thus, your data is safe across changes to your application.

When you first save a project, you are asked to enter a Display Name and a Project Name. The Display Name is what will be displayed in the GME environment, whereas the Project Name is what's used in.

To create a new project, click on the File menu on the Editor tab, above the source editor. In the File menu, select New Project.

To save a project, click on the File menu on the Editor tab, above the source editor. In the File menu, select Save Project.

When you save your project, the save dialog will allow you to specify both a Project Name as well as a Display Name. The Project Name is the internal name of the project and is limited to lower case alphanumeric characters. The Display Name is what will be displayed as the title of the project in the file manager tree on the right of the editor.

At this time, a project's display and project names cannot be modified after it has been saved. It is possible to work around this by copying the project (using "Save Project As..." under the File menu) and entering new display and project names. You can then delete the original by selecting "Delete Project" from the File menu.

To delete a project, first load the project in the source editor by choosing the project from the file manager tree. Click on the File menu on the Editor tab above the source editor. In the File menu, select Delete Project.

All project source code and data will be deleted after you confirm the deletion. You will not be able to recover deleted projects.

Yes, you can upload resources like image, css and js files to GME.

First, load a project into the source editor. Then, click the File menu button and choose Upload Resource File. A dialog box will be displayed to enable you to upload files from your computer. You can then reference those files in your source code for that project.

No, the names of source files and resources cannot be changed after the initial save.

Yes, you can call the getMap() API method to get the native maps object which you can then use to call the Maps API methods. However, in GME's current implementation, some usage of the Maps API methods will break the default event handling in GME. We recommend you test thoroughly when incorporating the Maps API in your application.

The applications created in Google Mashup Editor are maintained by Google Project Hosting. You can access your projects by logging into http://code.google.com/hosting/ and clicking the "My Profile" link in the upper-right corner of the page. Every project has a website complete with a wiki, downloads page, and issue tracker, as well as a Subversion repository where you can access previous versions of your application. You can also use the Subversion repository to write your code in your favorite desktop-based text editor, although you must continue to compile and test your applications in the actual Editor.

Yes! If the application feed is accessible to "anonymous" users (i.e. non-members), it is available at the following URI:

<PUBLISHED_MASHUP_NAME>.googlemashups.com/feeds/app/<STRIPE_NAME>

Likewise, if the user feed has been set to read-only, it can be accessed at:

<PUBLISHED_MASHUP_NAME>.googlemashups.com/feeds/public/user/<USER_EMAIL>/<STRIPE_NAME>

This returns the specified user's feed. Please note that <USER_EMAIL> is case-sensitive. To enable your mashup's users to easily locate a custom feed, you can place a gm:subscribe tag in your mashup. This creates a link to the feed, which can then be subscribed to by an RSS reader.

Yes! GME's JavaScript API exposes an array of application properties including the account name of the current user. Access this username within a script using google.mashups.properties['username'].

Every application and user stripe is capped at 1,000 entries in order to prevent time-outs from occuring when sorting or filtering.

Some item types for the Google Base feed include housing, products, jobs, and vehicles. For a complete listing of all item types, please check the following list:

Suppose you have a gm:data element that gets vehicle snippets from Google Base like this:

You can use JavaScript to update the feed URL to show job snippets like this:

GME's feed-reading infrastructure has a caching policy in place; this means that instead of re-downloading a feed every time it is requested, the feed is instead downloaded only one time initially and stored so that subsequent requests can be processed faster. Unfortunately, because it may take several hours for the feed-reading backend to verify whether it has the newest edition of a particular feed, you may not always see the latest entries in your mashup.

All data read and/or manipulated by GME applications are stored internally as a GData feed, which is based on the Atom format. All data sources that are not compatible with this format (RSS feeds primarily) are transformed behind-the-scenes into Atom feeds, thereby rendering some original element names unusable—though the data is still available under a different name.

For example, if you are trying to access an RSS item's description field, reference the atom:summary field instead. Likewise, instead of referencing the link field, use atom:link/@href (the data stored in the href attribute of the link element). Please see http://code.google.com/apis/gdata/reference.html for more equivalences.

For a particular feed, you can verify what element names GME is using by exposing the feed through the Feed Browser or the gm:debug tag as detailed here.

In your GME code, you can refer to most of the popular custom namespaces (such as gd, digg, itms) directly. GME will assign an internal alphanumeric ID (e.g. "ns1432138428") for namespaces it doesn't recognize. To discover these namespace IDs, use the built-in Feed Browser:

1. Click on the Feed Browser tab
2. Select Remote Feed from the pull-down menu
3. Enter the URL of your feed

GME lets you build your application using an XML-based language which must be compiled into HTML and JavaScript before it can be viewed with a browser. During this compilation process, several objects including images (gm:image) and text blocks (gm:textarea) are placed inside a pair of <div> tags; because <div> is a block element, it will appear on its own line by default. You can change this by specifying that it be displayed inline using some CSS. Example:

<gm:page title="inlineTest" authenticate="false">
  <style type="text/css">
    div { display: inline }
  </style>
  <gm:list data="http://ax.phobos.apple.com.edgesuite.net/WebObjects/MZStore.woa/wpa/MRSS/topalbums/limit=10/rss.xml" template="inlineTemplate" />
  <gm:template id="inlineTemplate">
    <table>
      <tr repeat="true">
        <td>
          <gm:image ref="itms:coverArt" /><gm:html ref="atom:title" />
        </td>
      </tr>
    </table>
  </gm:template>
</gm:page>

You may not be seeing output for several reasons. First, make sure that your gm:list or gm:item element's template attribute matches the id attribute of the intended gm:template.

Next, verify that the data source you have specified in your gm:list or gm:item element's data attribute is RSS or Atom-compatible; GME cannot parse other XML-based formats at this time. You can verify whether GME can read a particular feed by using either the Feed Browser or the gm:debug tag as detailed here.

Finally, make sure that the specified template contains a repeating "container" element such as <div>, <span>, or <tr>. In order to be repeatable, the repeat attribute must be set to true as in the following example:

<gm:template id="myTemplate">
  <div repeat="true">
    <gm:text ref="atom:title" />
  </div>
</gm:template>

If a repeating element is not indicated, the application will compile correctly but the template will not render any output.