Google Gadget Widget - Developer Guide

This document explains how to configure the Google Gadget Dashboard Widget template.

Concept

The only file to be changed to run any is:

gadget.js

If you want to change the appearence change:

gadget.css

In case you want to change Gadget parameters from the backside of the widget you have to add your controls to (see guide);

gadget.html

Step by Step Guide

Go to the Google Gadget catalog and choose the gadget you want to convert.
Example: Choose Date & Time
Press the Add to your website button and customize the widget the way you want it to appear.
Example: Leave defaults
Press the Get the code button and copy the URL from the src attribute of the <script> element.
Example: Copy http://gmodules.com/...
Open gadget.js in an editor and copy the url into the src: parameter, enclosed in ""
Example:
```
src: "http://gmodules.com/...",
```
Save and test the widget.
Modifiy the width and height parameter if you are not happy. Alernativly change widht and height in the Google Catalog and recopy the source.
Example:
```
width:430,
```
```
height: 190,
```
Consider uploading the converted widget to Widgetop.

Gadget Parameters

src:

required
String
The gadget URL from the src parameter from the gadget <script> tag.

width:

optional
Integer
The gadget width, overwrites the parameter in the URL.
Defaults to gadget URL parameter w

height:

optional
Integer
The gadget height, overwrites the parameter in the URL.
Defaults to gadget URL parameter h

title:

optional
String
The gadget title, overwrites the parameter in the URL. Used for the backside.
Defaults to gadget URL parameter title

hideTitle:

optional
Boolean
If set to false the Widget displays the Gadget title on the front side.
Defaults to true

border:

optional
CSS properties
CSS properties to defines the gadget border
Defaults to gadget URL parameter border

params:

optional
Array of Strings
See parameter guide

Parameter Guide - Step by Step (Advanced)

Some widgets support extra parameters for their configuration. The template supports the automatic update of the gadget URL with the parameter values.

Find the parameter names you want to use. Gadget parameters are encoded as up_ keys in the gadget URL.
Example: up_color
Add the parameters list as an array of strings to the params parameter.
Example:
```
params: ["color"]
```
Add control elements to the widget back. Define control IDs as
```
Parameter_$param$
```
Example:
```
<select id="Parameter_color"> ...
```

The widget automatically reads the parameters from the controls and places them in the gagdet URL on startup and when flipped from front to backside.