Recently at work, we've started diving into Google Gadgets. They are quite fun and really extremely easy to build. In this article, I'm going to get you started creating your very own Google Gadget.
Sit back and reserve a few minutes of your time and you will be well on your way in no time!
The first thing we need to do is open our favorite text editor. Create a new file called google.xml. Inside the file, place the following information to get started:
The following code sets up our basic module. We create a module, give it a title and a fixed height. We require a couple of options to provide us with a few capabilities. Finally we create three blank content areas: "home", "profile", and "canvas".
The home content area gets displayed if our module was embeded on another webpage other than iGoogle.
The profile content gets displayed when viewing the module in iGoogle. This is the small box that can be dragged and dropped to organize the various modules in your account.
The canvas content area gets displayed when the module is maximized. When maximized, it takes up the full area inside of iGoogle, minus the left navigation.
To actually have content displayed now, we simply need to populate our different content areas. Inside of the content areas you can include Javascript, CSS, and HTML. The sky is the limit! If you plan to create gadgets with dynamic data, Google offers AJAX helpers to load data in through AJAX.
Enjoy! Published on May 12, 2009 Did you enjoy this article? If you did here are some more articles that I thought you will enjoy as they are very similar to the article
that you just finished reading.
Jamie Munro is the author of ASP.NET MVC 5 with Bootstrap and Knockout.js,
Knockout.js: Building Dynamic Client-Side Web Applications,
20 Recipes for Programming MVC 3,
and 20 Recipes for Programming PhoneGap. He has been developing websites and web applications for over 20 years. Jamie began his writing career in 2009. As the success of Jamie's blog grew, he turned his writing passion to books about web development in hopes that his many years of experience could be passed on to his readers. No matter the programming language you're looking to learn, I've hopefully compiled an incredible set of tutorials for you to learn; whether you are beginner
or an expert, there is something for everyone to learn. Each topic I go in-depth and provide many examples throughout. I can't wait for you to dig in
and improve your skillset with any of the tutorials below.
<?xml version="1.0" encoding="UTF-8" ?>
<Module>
<ModulePrefs title="Hello, World!"
height="240">
<Require feature="opensocial-0.8"/>
<Require feature="views" />
<Require feature="setprefs" />
</ModulePrefs>
<Content type="html" view="home"><![CDATA[
]]>
</Content>
<Content type="html" view="profile"><![CDATA[
]]>
</Content>
<Content type="html" view="canvas"><![CDATA[
]]>
</Content>
</Module>
Related Posts
Tutorials
Learn how to code in HTML, CSS, JavaScript, Python, Ruby, PHP, Java, C#, SQL, and more.