Google Gadget Tutorial > Lesson Five
This is the fifth 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.
Let’s do a quick review of what we have done so far, as it serves as the main steps to creating a Google gadget…
- Used the “hello world example” code as a template
- Inserted a code snippet (in our case a tiger, but it could be anything, like a YouTube video)
- Put that file on the internet
- Displayed the gadget on iGoogle.
These are basically the steps of creating the most common types of Google gadgets.
Once you begin doing this however, you may notice some issues. There is one more important concept to understand before we continue to learn more things.
How a Google gadget gets Cached
Earlier we spoke briefly of caching and used the image below to illustrate it…
Now that you are a bit more familiar with Google gadgets, it is time to understand how catching affects us as we build and customize gadgets.
Since Google is actually using the a cached copy of our file to display the gadget, we do not see our changes immediately on Google. This can be very frustrating…
You will see in a moment why this is important, and how to “get around” this problem. Which brings us back to our original “How to Make Google gadgets” tab on iGoogle. There is a gadget in that tab that we have not discussed yet, the Google Developer gadget….
Google Developer Gadget
The developer gadget is an important part of creating and editing Google gadgets. It is discussed in Google’s documentation here, and here. I am going to paraphrase what Google says about it, and then show you step by step how to use it.
From Google:
The developer gadget is a special gadget that you can use as the basis for creating your own gadgets. It is a dashboard for viewing all of the gadgets on your iGoogle page, and it also lets you control gadget caching. By default, gadget definitions are cached. You can uncheck the Cached checkbox to override this behavior. This is useful when you’re working on a gadget and want to see the results of your edits instead of the cached gadget.
one feature you may want to take advantage of right away is the Cached checkbox. By default, gadget specifications are cached. You should uncheck Cached for gadgets while you are working on them. This lets you see your edits instead of the cached gadget.
Okay that is what Google has told us, but what do they mean?
Let’s look at the developer gadget more closely…
The developer gadget has three main functions that we will use right away.
- It lists what gadgets are currently installed on our iGoogle page or tab.
- It allows us to add Google gadgets from a file. This is a very nice feature, and means that we do not have to leave our page to add a gadget.
- It allows us to disable catching
Making and editing Google gadgets is made incredibly easier and less time consuming via the gadget tools Google provides. Let’s see these things in action.
Let’s look at our iGoogle tab again…
There are three gadgets on this tab, a tiger, the Google gadget editor, and the Google developer gadget. (note: you may need to click an “okay” button on your developer gadget, if you have not done so already).
We will begin by removing the original Tiger gadget and installing our own “version” of it (tiger.xml).
Remove the Tiger gadget by clicking the “X”…
Now go to the Google gadget editor and open tiger.xml and click the file name once it is up…
Now, just like we did in the last lesson we will get the address of the tiger file…
Okay, now that we have copied the file address we can illustrate the usefulness of one of the Google developer gadgets’ functions…
Go to the Developer gadget and paste that address into the address bar and then click “add”…
A window will come up asking if you want to install it. Click “okay”.
Now you have added your tiger gadget on iGoogle without even leaving the page, very useful!
It looks just like the original tiger gadget, but the one you see now is actually your “tiger.xml” file which means you can now change things about it, and see those changes live.
Now let’s see what this whole “caching” thing is all about…
We will now make a change in the “tiger.xml” file to illustrate caching.
Go to the Google gadget editor and open the tiger.xml file…
Now we will make a change to the file and see what happens. What we will be doing is removing the link at the bottom of the gadget…
In the Google gadget editor lets look at the code of “tiger.xml” and remove that link.
Remove the code found on lines 11, 12, and 13.
The actual code you are removing is…
<small>
<a href=”http://www.gadzi.com/animals/virtual-pets.html” target=”_blank”>
See more virtual pets</a></small></div>
It is worth noting that if you highlight the code and try to remove it, it doesn’t seem to want to delete. This is a “glitch” of this gadget. You have to type something first in the gadget before removing stuff sometimes. If you just put your cursor in front of the code you want to remove and type “a” or”1″ (or anything at all) it will then let you highlight code and delete it. Weird, I know, but it is just a glitch.
Once you delete those lines, then your Tiger gadget will no longer display that link. Click the preview tab and make sure that the tiger is displaying well and that the link at the bottom is now gone.
Now save the file.
Okay this is where we find out about caching.
Even though we have changed the code of the file that is used by the gadget you will notice that the link is still there on the actual gadget itself.
Why is that? We still see the link in the gadget because Google is displaying that gadget not from our file, but from it’s own “copy” of that file…
This illustrates caching in action. We changed the source file, but the gadget that is displaying has not changed. This would be really frustrating if we wanted to see how changes looked, or were experimenting with what happens when we remove or change part of the code. We would have to wait an hour or so to see each change, which would make things very hard indeed.
This is where the Google developer gadget come in the most handy. We can use it to “make” the gadget display changes immediately…
Go to the Google Developer gadget and find the “tiger.xml” file and then “uncheck the box next to it that says “Cached”
Once you un-check that box the page will refresh and you will see the Tiger gadget displayed from a new copy of your file (the one we justed changed). This means that now there should be no link at the bottom of your gadget.
We are able to create, edit, display, cache and uncache files all from our iGoogle page!
That is why these tools are so important. They mean that we never have to leave our current page to make changes, and trust me, you will have a much easier time because of it.
In our next lesson we will take a peek at a different Google gadget type and cover it briefly, to see some more possibilities of Google gadgets.
Related posts:How to Make Google Gadgets – Lesson Four
How To Make Google Gadgets – Lesson Three
How To Make Google Gadgets – Lesson Two
{ 13 comments… read them below or add one }
I can’t find My Gadgets. I use the gadget editor and can open all my gadgets – but I can’t find anything that says whether it is cached or not – so any changes never show up.
Make sure you have the “google developer” gadget installed or just add the “how to make gadgets” tab from lesson one.
Any changes that you make to your gadgets, after you save the file, will “show up” in about an hour or two from when they are saved.
If you can’t get anything to work, you can use the preview feature of the Google gadget editor to se your changes.
Pat -
Thanks very much! I added the tab and the feature showed up. I appreciate the help.
doh! You explain that in lesson five… lol
I added “How to Make Google Gadgets” to igoogle and followed the directions. The box on the right which I assume should be entitled “My Gadgets” has no title and is showing the following error,
“Error parsing module spec:
Not a properly formatted file
missing xml header”
I have tried reloading “How to Make Google Gadgets”, but still come up with the same error.
Please advise.
Really Useful Tutorial
Keep it up
Hi,
I made my own google gadget, & submitted to google gadget directory also, but its not showing there. Please let me know abou it.
A million thanks for the detailed and accurate breakdown of the developing process. Thanks to the precise hints it provides, I would not waste more hours trying to figure out why the effects of my modifications could not be seen instantly but always differed at puzzling paces.
Really need to read more of this amazing tutorial later.
Hi,
i was following your tutorial and on this lesson #5 I dont have the same screen layout as you do. I dont have a goolge development gadget…instead it says:
Error parsing module spec:
Not a properly formatted file
missing xml header
Can you advice…? Thanks:)
How to run gadgets in Tomcat or any web server ?
I am a bit confused. Does this mean, when someone else adds my gadget, caching will be off for him as well ?
One more thing I wanted my gadgets page to be refreshed every now and then how can I do it ?
Great Tutorial
Thanks a TON!!!
For the people getting errors with the Google Developer Gadget… I had the same problem too. Here’s what I did.
1) Simply delete that gadget (with the error), then click the “Add stuff»” link above it, on the right.
2) On the subsequent page, at the bottom of the left column, click on the “Add feed or gadget” link. Then paste the following link:
http://www.google.com/ig/modules/developer.xml
3) Click “Add”
That should do the trick! I think Google must have recently changed the original URL on this one or something, which is why we got the error.