Google Gadget Tutorial > Lesson Three

This is the third in a series of articles which will be put together as a guide to creating Google gadgets. To see a full index of all gadget lessons, please see the Google Gadget Tutorial.

Understanding the elements of the gadget code

We will begin to examine the elements of the actual gadget code in this lesson. This will not be a technical description of the code, it will be just a functional one so that we can learn what each part does.

In lesson two we created a tiger gadget using the Google gadget editor. If everything went right, you should now have a file named “tiger.xml” on your Google account.

If you are just joining us, copy this code from this text file and save it as as “tiger.xml” via the Google gadget editor so that we all have the same code to discuss. (To get the gadget editor and learn how to use it, go here and click “add to Google”.)

Let’s take a look at the code itself. Here is how to get it.

1. Make sure you are logged into Google.
2. Go to your iGoogle page and click the tab called “How to make Google gadgets” (we added this in lesson one).
3. Use the Google gadget editor to open the file “tiger.xml”

This is what you should see…

Okay, let’s look at that code and explain what each part does…

The Parts of a Google gadget:

Here is what you should see in your gadget editor:

There are three parts of every Google gadget code:

A beginning, a middle, and a end.

Overview

The beginning:

The first few lines of code are always “about” the gadget, in other words, these lines “tell” a gadget things like how big or small it should be. They also explain how a gadget should act and provide details about the gadget like what the gadget title should be , who the author is, etc. For those of you familiar with HTML, the “beginning” is very very similar to the “head” portion of a web page and the meta data.

The middle:

The middle is the code that actually displays when the gadget is used (or seen in the preview tab). For example, remember that “hello, world!” we saw? We saw the words “hello world” because they were in the middle.

The end:

The last couple of lines, for the most part, are always the same! Very simple. It just tells the gadget that “the middle” is over.

Details:

We will use the tiger.xml file to illustrate the different parts:

The Beginning:

Line 1:

<?xml version=”1.0″ encoding=”UTF-8″?>

This is the first line of every gadget, it must be there. It is the standard way to start an XML file (XML is the name of the code language we are editing).

Line 2:

<Module>This line must be there always too. It indicates that the file contains a gadget.

Line 3:

<ModulePrefs title=”hello world example” />

“ModulePrefs” is short for “Module Preferences” which really means “Gadget Preferences” because module is just another name for a gadget. Information about the gadget such as its size, title, description, author, and other optional features are all determined in the “ModulePrefs” line. In this case it is only showing one thing, the title (title=”hello world example”). We will change this in a moment.
Line 4:

<Content type=”html”><![CDATA[

This tells the gadget what type of information is going to be in "the middle". For most of our examples, this line will always stay the same. We will discuss this line more when the time comes.

Let's get started and change the beginning of our tiger gadget:

Important note: All of the changes we are doing should be done by hand, not by copying and pasting. If you try to copy and paste here, it will not work.

(Go to your Google gadget editor and make sure you have opened the file "tiger.xml" )

Changing the title of our gadget:

• Look at line 3 ...
  • <ModulePrefs title="hello world example" />
• See where it says...
  • title="hello world example"
• That is the part that tells the gadget that it's name is "hello world example". We want to call it "Tiger" so we will change that line...
  • <ModulePrefs title="tiger" />
• Now save your file.

Now our gadget has the right title, but lets do something else...

Press the preview tab. You should see...

Notice that it is small and cut off at the bottom? The reason for this is because we have not told the gadget how big to be yet. Lets go ahead and change that. Gadget size can changed with the "ModulePrefs" too. Remember that you must actually type these changes, copying and pasting won't work.

• Line 3 now looks like...
  • <ModulePrefs title="tiger" />
• Let's add a height to it, you can do it by adding [ height="350" ] to the code, making line three look like this…
  • <ModulePrefs title=”tiger” height=”350″ />
• After you make that change to your file, save it.

Now click the preview tab again and see what a difference it made…

Now we can see the whole gadget!

“ModulePrefs” is an important part of the gadget, and there are many things you can change about it.

The thing to know about changing “ModulePrefs” is how they should be entered into the code…

Every change has the same format

• name=”something”

examples we used…

• title=”tiger”
• height=”350″

more examples…

• description=”A really cool little tiger”
• author=”Put your name here”

A full list of what you can change is provided by Google here.

Okay, that is enough for today about the “beginning”!

The middle:

This is just the stuff we “copied and pasted” it does not need to change in any way. We will discuss more later, but for this gadget we do not need to do anything to the “middle”.

The end:

More good news, we don’t need to change this at all either for now, but I will quickly just say that these lines “close” the gadget.

In the next lesson, we will learn how to display our tiger gadget live on an iGoogle page. We will also learn how to find where the code we are editing resides.

Go To Next Lesson

Related posts:
How to Make Google Gadgets – Lesson Five
How to Make Google Gadgets – Lesson Four
How To Make Google Gadgets – Lesson Two