RSS Feed
Download our iPhone app
Browse DevX
Sign up for e-mail newsletters from DevX


Will Your Next Web Application Be a Google Gadget? : Page 2

Learn how to leverage the Google Gadget API to make your web applications more reachable. As an example, you'll see how to build a real-world gadget that fetches and displays the DevX feeds.

Gadget Deployment
Of course, after developing a gadget you will want to deploy it. For example, to run the "hello, world" gadget you need to follow these steps:

  1. Upload the gadget to your web server.
  2. Go to http://www.google.com/ig.
  3. To add a gadget, you must have a personalized homepage. If you don't already have one, you must create it by clicking the "Get started" link. Then sign in with an existing Google Account, or create a new one.
  4. After you have a personalized homepage, you can add gadgets to it by clicking the "Add stuff" link in the upper right corner. This takes you to the content directory. You can use the content directory to search for gadgets and add them to your homepage.
  5. Click the "Add by URL" link (next to the "Search Homepage Content" button).
  6. In the "Add by URL" field, enter the URL (your server or mine) for the hello-world.xml gadget, and then click the Add button.
  7. Click the "Back to homepage" link, to see the new gadget on your homepage.
Author's Note: I uploaded the examples for this article in my web server so you can try them even if you don't have your own. You can find all the examples under the following path: http://www.alessandrolacava.com/google/gadgets/. For example, the URL related to the "hello, world" gadget will be: http://www.alessandrolacava.com/google/gadgets/hello-world.xml.

You can also publish your gadgets to the Google Content Directory. That link discusses how to publish your gadget to other targets too, such as your own web site through syndication.

Now that you've seen how to write and deploy a simple gadget you're ready to move on to more interesting stuff.

User Preferences
Some gadgets need to give users a way of supplying user-specific information. For example, an RSS-feed-reader gadget might require users to provide the number of items to retrieve or the URL of a feed the user is interested in. The user preferences section in the XML file describes the user input fields that are turned into user interface controls when the gadget runs. To include a user preference in your gadget you need to include a <UserPref></UserPref> section into your XML file. Going back to the HelloWorld example, you could let users specify the gadget's title through a UserPref element:

   <?xml version="1.0" encoding="UTF-8"?> 
     <ModulePrefs title="__UP_title__" /> 
     <UserPref name="title" display_name="Gadget Title" 
       default_value="Hello world example"
       datatype="string" />
     <Content type="html">
          <div id="content" style="color: red;">
      hello, world!
Figure 2. User Preference: At runtime, the gadget renders the "title" user preference as a simple textbox.
Figure 2 shows how the preceding user preference gets rendered—as a simple textbox.

The attributes for the UserPref elements in the preceding example have the following meaning:

  • name is the preference's name. It's through its name that you refer to the preference within your code. This is the only required attribute.
  • display_name is the label displayed beside the rendered object—textbox, checkbox, and so on.
  • default_value is the value selected by default.
  • datatype is the datatype of this user preference. The options are string, bool, enum, hidden, list or location. If you don't specify a datatype value it defaults to string. The preference rendering depends on this attribute. For example, a preference defined with a datatype of bool renders as a checkbox. You'll see more about datatypes later on.
These attributes are the most common, but there are others you might need in your gadget. Refer to the official documentation to find out more on this and other gadget API topics.

Notice how the previous code points to the user preference. It uses a double underscore, followed by "UP," which signifies "User Preference," another underscore, and the preference name, closing with another double underscore:

The only thing that changes is prefName which must match the name you provided in the name attribute when you defined the preference. Such a variable is called a "substitution variable." For example, you can refer to the title preference using __UP_title__. Later on you'll see how to reference a user preference programmatically within a JavaScript block.

Close Icon
Thanks for your registration, follow us on our social networks to keep up-to-date