Google Gadgets: Lesson 1 "Hello World"

Written 2010 by Will Johnson for Fast Forward Technologies Email Fast Forward Technologies at fft2001@aol.com or post your comments for public view far below. Creative Commons Attribution 3.0 License

Follow Fast Forward Technologies on Twitter! or use my Knol Public activity feed

<-- Previous Lesson This is Lesson 1! There are no previous lessons.

Next Lesson --> Google Gadgets: Lesson 2 Setting User Preferences

In this article I show you how to write your first Google Gadget that will run inside a Knol.

[Edit]
First you want to know: In general, what is a gadget?  A gadget is a mini-application that does something more complex that what you are able to do with HTML and CSS, and which anyone else can easily embed into their own website.  When you go to your favorite website, and they show you your local weather report, or the latest stock market quotes, or top news headlines, they are probably doing this with a gadget.  Not only do gadgets allow you to write tiny applications that can be embedded in a webpage, they allow you to market those tiny applications to anyone else with a webpage.  So be sure to add a small marketing tag into your application to drive traffic!

Now you will learn how to make a simple gadget to display "Hello World" in any knol, so you can learn the basics of writing gadgets.  In general you will need a website or web server, visible to the world, and which allows you unrestricted access to Javascript, but for this first example, any website that allows you to post an XML file will work.

[Edit]
You can use Notepad to create a file on that site called MyFirstGadget.xml and in that file you will put this code:

<?xml version="1.0" encoding="UTF-8" ?>
<Module>
  <ModulePrefs title="My Hello World Gadget!" />
  <Content type="html">
     <![CDATA[
       Hello World!
     ]]>
  </Content>
</Module>

[Edit]
All Gadgets are XML documents.  The ModulePrefs allows you to set a few preferences, such as the Title which we are doing here.  Any HTML content, must be encapsulated using the CDATA directive as you can see here.  When are you done entering this and studying it, save your file to your website.  Let's make believe that you saved it to http://www.myfreewebs/bobjones/MyFirstGadget.xml

Now create a new Knol, or go to your favorite Knol or your sandbox Knol or whatever and edit it.  While you are in the Knol editor, select the Insert Button, and in its dropdown menu, at the very bottom you will see Google Gadget.  Select that.

The window will take a minute or less to open, when it does, on the left you will see "Add gadget by URL".  Select that.  Now in the window that comes up, for the URL you are going to enter that same place to where you saved it: http://www.myfreewebs/bobjones/MyFirstGadget.xml

Hit the OK button, then the Save button, then the Close button.  And your Hello World text should now display!
Hello World!

[Edit]
I was poking around and saw a few more preferences, someone else was using so I'll tell you about them here:

<ModulePrefs
title="Hello World!"
author="Joe Brown"
description="My First Gadget which just says Hello World!"
author_email="JoeBrown@JoesWorld.com"
width="320"
height="200" />


If you are the kind of person who is fascinated with specifications, you can read all about ModulePrefs at this link from Google.

For the rest of us, onward and upward!

<-- Previous Lesson This is Lesson 1! There are no previous lessons.

Next Lesson --> Google Gadgets: Lesson 2 Setting User Preferences