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.
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…
<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.