How to make gadgets:
PART ONE: Getting the editor
To make a Google gadget, first you must have the Google gadget editor. “Oh noes!” You may say, but this is not too hard to solve. I can simply give you the link: here. Once you have added that to your iGoogle page, then we can go onto the next step (yes, this requires a Google account, hence the “Google Gadgets”)
PART TWO: Starting your gadget
Hokay, so now that we have the gadget editor, it is time to get started:
Ministep one:
check that you have the “hello.xml” opened, as it is the easiest thing to start off with
Ministep two:
delete the text after the ‘Content type=”…’ stuff, you do not need it.
Ministep three:
start adding the code for your gadget (see here for my YouTube tutorials, for good coding techniques, see the text below)!
PART THREE: Coding techniques
When coding a gadget, you need to keep a few things in mind. First, always use good coding conventions, which are a certain set of steps/methods that make code much more readable. The first rule of good coding conventions is: WHITE SPACE IS YOUR FRIEND!!! The computer just ignores white space, so use VERY liberally. The next, and probably most important rule is to use obvious variable names, i.g: $Date. That is obviously a variable that contains the date of something. And number three is: be spare on the comments, they clutter up the page. If you are forced to use too many comments, then you are not properly using good coding conventions.
PART FOUR: The gadget construction
Most gadgets use JavaScript, HTML, CSS, or a combination of all three. They are required to use XML, as they are XML gadgets. XML is called Extensible Markup Language and is used when there is a need for a language that is readable and writable by humans, and easily readable by computers. HTML is HyperText Markup Language and is used for the main body of your gadget’s look and feel. CSS is called Cascading Style Sheets and is used for fine-tuning the look of your gadget. It allows you to create custom classes for your buttons and other such inputs. It is used mostly to style pages using HTML or XHTML. JavaScript is a variant of Java that is used to enable programmable objects that get run within other programs, or in a Google Gadget, your browser. While JavaScript is a variant of Java, do not expect to be an instant expert at it if you know Java well, they are almost completely unrelated.
PART FIVE: Some simple code
Here is some help getting started. If you are immediately confused, take a breath, and stay calm. I find that the most affective technique for staying calm while looking at a new programming language is to take a deep breath and resolve myself to learn this language. Let me give you some starting tips:
1. Do not EVER skimp on white space, I know I have already said this, but NEVER EVER skimp on white space.
2. Always use good variable names, yes this is a reoccurring statement.
3. Tutorials are OK! I would never have gotten as far as I have without tutorials! Speaking of, I can give you one right now (you cannot tell, due to formatting problems, but there is excessive white space in there)!
The Simple Gadget:
<?xml version=”1.0″ encoding=”UTF-8″?>
<Module>
<ModulePrefs title=”Simple Gadget Example” />
<Content type=”html”><![CDATA[
<div id="container"></div>
<script type="text/javascript">
function onLoad()
{
_gel('container').innerHTML = "Hello, World!";
}
function displayHTML(value)
{
_gel('container').innerHTML = value;
}
_IG_RegisterOnloadHandler(onLoad());
</script>
Simple Inputs: <input type="text" name="Text1" id="Text1" size="30" onkeydown="displayHTML(this.value)" onkeyup="displayHTML(this.value)"
]]></Content>
</Module>
Do not be phased by that. If you want to see that gadget in action, paste it into your gadget editor and press “preview”.
Let’s go through this line by line. First, the very beginning line
<?xml version=”1.0″ encoding=”UTF-8″?>
is just to tell the computer how to interpret the following text. Then, the line after that,
<Module>
tells the computer to create a XML module, which is a little application. As for the next line,
<ModulePrefs title=”Simple Gadget Example” />
That just states some general preferences about the new module we have created. It sets a title (obviously) and that is about it. You can go a lot more extensive, declaring height, width, scrolling or not, author, author email, and lots more.
<Content type=”html”><![CDATA[
Ok, this line may be a wee bit confusing. It is a little piece of code that says "Ok, the text following is html, but do not parse the text following <![CDATA[. *Gasp* ok, that is probably the most confusing line of this all.
<div id="container"></div>
All this does is divide the HTML into a new section and assign a callable id to this new section of HTML.
function onLoad()
{
_gel('container').innerHTML = "Hello, World!";
}
I am going to tackle this all at once, due to it being a function. The "function onLoad()" declares a new function, and assigns a name to it. Inside the parentheses would go input variables, which will be explained in the next function. I hope you at least get what happens next. There is a { following a enter. This just contains the function text, so the computer knows what this function contains. now, for a bit of harder stuff. 'gel('container').innerHTML = "Hello, World!"' is a line of code inside of the function 'onLoad()' that tells the division of HTML we created earlier with the id of "container" to change the inner HTML code. Pretty simple, huh? the '_gel' is a command devised by Google themselves. Then there is just a } to declare the end of the function.
</script>
This has probably the most obvious use ever. It simply tells the JavaScript interpreter to die (not literally).
Simple Inputs:
This is not even a function. Since the interpreter for JavaScript has died, it is going to interpret as HTML now, so text is just text.
<input type="text" name="Text1" id="Text1" size="30" onkeydown="displayHTML(this.value)" onkeyup="displayHTML(this.value)"
All this is is a line of HTML that makes a textbox input that has a size (characters per line) of thirty, has the name (what shows up next to the value when the form is submitted, not necessary in this case since there is no form…) of Text1, and the id (used to call the text in the box and any other value) of Text1 (same as the name). The onkeydown/up sections are little events (when any key is pressed down or up) that run the function inside of the quotes.
]]></Content>
</Module>
This is just some cleanup HTML. It ends the <
