Here are the basic steps you follow to create and deploy a gadget:
1. Use any text editor to write your gadget specification, and host it on a public web server.
2. Add your gadget to a site that has the ability to run gadgets, such as iGoogle.
Anatomy of a Gadget
Once you understand how to edit and publish gadgets, you're ready to include more advanced features in your gadget specifications. The XML gadget specification consists of 3 major parts:
• Content Section. The
• User Preferences. The
• Gadget Preferences. The
Note: Within the XML attributes in a gadget spec, you need to "escape" (that is, properly encode) certain characters so that they will be interpreted correctly. For more information, see Escaping Special Characters.
Escaping Special Characters
Within the XML attributes in a gadget spec, you must escape certain special characters. Note that only ASCII entities can be used in the gadget spec. For example, you cannot use ISO 8859-1 symbol entities. Here is a list of the special characters that are supported:
Character Escape Code
1.& ---- &
2.< ---- < 3.> ---- >
4." ---- "
5.' ---- '
For example:
• BAD: href="http://www.foo.com/bar?x=a&y=b"
• GOOD: href="http://www.foo.com/bar?x=a&y=b"
• BAD: description="this is a "good" gadget"
• GOOD: description="this is a "good" gadget"
Note that this type of escaping is not required in the CDATA block. However, it is still good practice to do it there.
Within your JavaScript code, you can use the _hesc(str) function to return the HTML string str with the the following characters escaped: <>'".
When writing a gadget, you should start with the
Defining Content
The
The easiest way to create your gadget is to simply place HTML (and optionally, JavaScript or Flash) into the
Choosing a Content Type
One of the first decisions you make when you're developing a gadget is which content type to use. For example:
The content type determines:
• Which API features are available to you as a gadget author.
• How your gadget is rendered.
• Where you can deploy your gadget.
The following table describes the available content types and when you should use them:
Content Type -Html
Description - With an html content type, all of the content typically resides in the gadget spec. A type="html" gadget contains HTML, possibly with embedded JavaScript, Flash, ActiveX, or other browser objects. This is the default type.
When to Use -The most flexible, versatile content type is html. When in doubt, choose the html content type.
Content Type -url
Description -With a url content type, the gadget content lives on a remote web page referenced by a URL in the gadget spec. The remote web page is where all of the HTML markup and JavaScript resides. You can NOT put any HTML markup or JavaScript code in the gadget spec itself.
When to Use -The type="url" content type is currently not fully supported by the gadgets.
[CDATA[
]]
<?xml version="1.0" encoding="UTF-8" ?>
<module>
<moduleprefs title="Go to SALONISAYONI Photo Album" width="200" height="200" scaling="false" author_email="www2007@gmail.com"
thumbnail="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi_EqVV7tmGiYDrl0xJavBM-biIlEAsYw2PIfVijRYruCElZne2TSCKTH0s2tHe7zyVFn60rvt7z8dHRDp0AL9QusX_qaSXajBxSc-JGzND7H_zYwSRiGQfKqghkPFORmY2iE5QG2pDjdgX/s640/DSC03216.JPG" />
<content type="html">
[CDATA[
<div style="text-align:center">
<a
id="Riggs" title="My Photo Album" target="_blank"
href="http://picasaweb.google.com/swapnanjalis/Prathamastami2009?locked=true&feat=email#5410615684023266514">
<img border="0" alt="Photo" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi_EqVV7tmGiYDrl0xJavBM-biIlEAsYw2PIfVijRYruCElZne2TSCKTH0s2tHe7zyVFn60rvt7z8dHRDp0AL9QusX_qaSXajBxSc-JGzND7H_zYwSRiGQfKqghkPFORmY2iE5QG2pDjdgX/s640/DSC03216.JPG"
title="Click Here."></a>
</div>
]]
</Content>
</Module>
Defining User Preferences
Some gadgets need to give users a way of supplying user-specific information. For example, a game gadget might allow users to enter a preferred level of difficulty. The user preferences (
For example, this gadget displays a personal greeting based on the time of day. It lets users specify the following:
• A name to use in the greeting. The name is also displayed in the title bar.
• A background color.
• Whether to display a photo.