Creating Google gadgets

Building custom gadgets : Creating Google gadgets

Creating Google gadgets

Users can create Google gadgets that display on a dashboard. These gadgets are XML text files and must follow the Google gadget specification. After the file is placed on a web server, a dashboard designer can use the file’s URI in an import gadget to make it appear on the dashboard.

A Google gadget file typically includes the following components:

n

Module tag

This tag includes all gadget contents except the XML file declaration that begins the file.

n

ModulePrefs tag

This tag contains gadget characteristics and required features.

n

Content tag

This tag contains CSS, HTML, and JavaScript code used in the gadget.

n

CDATA section

This section avoids XML parsing and the escape of special characters in HTML and JavaScript code.

Listing 8-1 shows an example Google gadget that displays HTML content.

Listing 8-1  Example Google gadget displaying HTML code

<?xml version="1.0" encoding="UTF-8" ?>

<Module>

  <ModulePrefs title="gadget example" height="300">

  </ModulePrefs>

  <Content type="html">

  <![CDATA[

    <script language="javascript" type="text/javascript">

      

    </script>

    

    <div id="my_div" style="background-color:green;height:100%">

    <b>My sample gadget</b></div>

  ]]>

  </Content>

</Module>

CSS, HTML, and JavaScript content that normally goes inside BODY tags of an HTML file, can be included in a Google gadget. Google gadgets generate their own HTML, HEAD, and BODY tags so it is not necessary for a gadget designer to use these tags in the gadget. Users can load external files such as JavaScript libraries and images in the gadget by using the URI of the external file.