Monday, January 18, 2010

Basic steps to create and deploy a gadget

Basic Steps
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 section is where the real work of your gadget happens. It is where you specify the type of gadget, your programming logic, and often the HTML elements that determine the appearance of your gadget.
• User Preferences. The section defines controls that allow users to specify settings for the gadget. For example, a personalized greeting gadget might provide a text field for users to specify their names.
• Gadget Preferences. The section in the XML file specifies characteristics of the gadget, such as title, author, preferred sizing, and so on.
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.< ---- &lt; 3.> ---- &gt;

4." ---- &quot;

5.' ---- &apos;

For example:
• BAD: href=""
• GOOD: href=""
• 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 section.
Defining Content
The section represents the "brains" of a gadget. The section defines the type of content, and either holds the content itself or has a link to external content. The section is where the gadget attributes and user preferences are combined with programming logic and formatting information to become a running gadget.
The easiest way to create your gadget is to simply place HTML (and optionally, JavaScript or Flash) into the section. Experienced web developers can read Choosing a Content Type for other options relating to access control, remote hosting, using alternative scripting languages, and other topics. Here's a simple sample gadget. This gadget displays a clickable photograph that opens a photo album in a new HTML page:
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.


<?xml version="1.0" encoding="UTF-8" ?>
<moduleprefs title="Go to SALONISAYONI Photo Album" width="200" height="200" scaling="false" author_email=""
thumbnail="" />
<content type="html">
<div style="text-align:center">
id="Riggs" title="My Photo Album" target="_blank"
<img border="0" alt="Photo" src=""
title="Click Here."></a>
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 () section in the XML file describes the user input fields that are turned into user interface controls when the gadget runs. User preferences are stored persistently.
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.

No comments:

Post a Comment

add comment here