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 developer 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:
*Module tag
This tag includes all gadget contents except the XML file declaration that begins the file.
*ModulePrefs tag
This tag contains gadget characteristics and required features.
*Content tag
This tag contains CSS, HTML, and JavaScript code used in the gadget.
*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 type="text/javascript">
<!-- JavaScript code -->
</script>
<!-- HTML code -->
<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 developer 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.