Gadget
What is a gadget?
Google gadgets are HTML and JavaScript mini-webpages, mostly served in iFrames that can be embedded in web pages and other apps. Gadgets may be embedded in iGoogle, Google Desktop and any page on the web. Gadgets that can work on iGoogle, Google Desktop, and other pages across the Web are created using the Universal Gadgets API, and they are as easy to develop as a webpage.
While simple gadgets can be created in a few minutes, in order to develop a useful gadget with interesting functionality and an appealing look and feel we suggest learning about HTML, JavaScript and Google's Gadget API.
A gadget is described in an XML file. This XML file defines the gadget look and feel as well as its functionality.
Here is an example "Hello World" gadget:
<?xml version="1.0" encoding="UTF-8" ?>
<Module>
<ModulePrefs title=“Hello World" />
<Content type="html”><![CDATA[
<b>Hello World!</b>
]]></Content>
</Module>
A gadget is defined in an XML document containing a module root element. In this example the module contains a ModulePrefs element and a Content element. The ModulePrefs element describes general gadget preferences, such as its title ("Hello World" in this example) and may also contain other gadget preferences, such as Description, Author and more. The Content element is the heart of the gadget and it describes the actual HTML displayed by the gadget (the >Hello World!</b> string in this example). The Hello World gadget in this example is very simple - it has very limited functionality and will just display a "Hello World!" text - but more advanced gadgets will use the Content element to put their JavaScript and HTML code. The <![CDATA[..]]> markers are XML standard way of embedding data strings within XML elements. Learn more about CDATA here.
Developing gadgets does not require special development tools. You may either use the online Google Gadgets Editor tool (GGE), or use your favorite text editor to edit the gadget and upload it using GGE.
Some gadget examples
Gadget functionality runs from simple static HTML pages to very sophisticated HTML, JavaScript, AJAX with Server Side functionality gadgets, such as a virtual keyboard that lets you type in your own locale even if you are are using a kiosk computer that does not have that locale installed, and lets you also email the text you type using an email server.
To get a good sense of what gadgets can do let us review some gadgets examples.
In this section we will introduce some gadgets and in the next section we will review more gadgets, view their source code and learn how they operate.
A Dictionary gadget:
Allows you to lookup keywords in Dictionary.com, Thesaurus.com, or Reference.com
Some Code Examples
To learn how gadgets work, let's go through some gadget code examples:
A Hello World
As a reminder let's look at the Hello World gadget presented before.
<?xml version="1.0" encoding="UTF-8" ?>
<Module>
<ModulePrefs title=“Hello World" />
<Content type="html”><![CDATA[
<b>Hello World!</b>
]]></Content>
</Module>
A Better Hello World
The following example also displays a Hello World message, but also introduces the ModulePrefs and the UserPref sections.
In this example we see a module named "My First Gadget".
The first section (green) describes the gadget preferences in the ModulePrefs XML element. The ModulePrefs section describes the gadget name, description, height, author's name and a category. All these attributes are used by Google when the gadget is published to the gadgets directory.
The second section (blue) describes user preferences. The set of user preferences used by the gadget is really up to the gadget developer. In this example we chose Color, Toggle and Locations. The developer of the gadget chooses the set of user preferences that make sense to the gadget. After publishing the gadget the user of the gadget selects the preferred values for the gadget preferences and saves them as her own preferences. An example would be color. A gadget developer creates a Color UserPref XML element and the user of the gadget may chose her favorite color, such as "blue". The Color is saved by iGoogle and next time she logs in to iGoogle the value "blue" is restored.
The third section (red) is the content of the gadget. In this case, it's the same HTML string seen before containing the "Hello World" text. This time the "Hello World" text is colored in red. Note that, in this example, even though user preferences were introduced they were not actually used by the gadget content (e.g. in this example, the color of the "Hello World" text is always red). In the next example, however, we demonstrate how they can be used.
Notes example - Storing State
The notes example allows a user to create a note and save it.
The next time the user visits iGoogle the note will be restored.
It also lets the user set a different background color for the gadget.
The color is selected by a user and stored into the "color" user preference. Note the <UserPref name="color" element. In this example a user may choose 3 different colors: Yellow, Blue and Green.
In the content section you may notice there is a <style> block. This block determines the look and feel of the gadget using CSS. CSS is a widely used standard for controlling HTML look and feel. Inside the style block you'll find the textbackground-color: __UP_color__;
This means that the value of the background-color CSS property is replaced for each user of the gadget with the value of the user preference color selected by the user from the UserPref section. This is done automatically by iGoogle.
Another example of user preferences usage would be the text UserPref highlighted in red.
In this example we use a hidden text UserPref. Since user preferences are stored by Google, the text UserPref lets us save the content of the note. We use JavaScript to populate the test UserPref with the value of the note textarea.
The <Require feature="setprefs"/> element provides us with programmatic access to the user preferences object using JavaScript. Programmatic access to user preferences is an optional feature, this is why we include the Require section. To learn more about optional features see http://code.google.com/apis/gadgets/docs/reference.html#Feature_Libs
The <UserPref name="text" default_value="Type text here.” datatype="hidden"/> element defines a hidden user preference. The hidden user preference is used to store the content of the note. However, this is not done automatically. We do it by calling the JavaScript save() function.
The JavaScript save() function is called whenever a user clicks the "Save Note" button. The method uses the __IG_Prefs() object to set the value of the user preference keyed "text" with the content of the "note" textarea element. _gel() is just a simple replacement for JavaScript's document.getElementById(), which gets a reference to an HTML element using its ID.
This example is simple, yet demonstrates the power of gadgets using Google Gadgets API.
Before You Start
The Google Gadgets API uses a few simple building blocks: XML, HTML, and JavaScript. Here are some resources that could help you get familiarized with building your own gadget. As a starting point, all you need is a basic understanding of HTML. Later, as you write more sophisticated gadgets, you will probably want to learn some JavaScript if you're not familiar with it already.
- HTML is the markup language used to format pages on the Internet. The static content of a gadget is typically written in HTML. HTML looks similar to XML, but it's used to format Web documents rather than to describe structured data.
- JavaScript is a scripting language you can use to add dynamic behavior to your gadgets.
- Google Gadgets API is the JavaScript library developed by Google used for implementing the more sophisticated gadgets features, such as controlling user preferences programatically, tabs, remote server communication and more.
- In addition, it would be useful to understand some basic XML concepts and syntax. XML is a general purpose markup language. It describes structured data in a way that both humans and computers can read and write. XML is the language you use to write gadget specifications. A gadget is simply an XML file, placed somewhere on the internet where Google can find it. It may be hosted by Google as well as on your own server. As demonstrated before, the XML file that specifies a gadget contains instructions on how to process and render the gadget. The XML file can contain all of the data and code for the gadget, or it can have references (URLs) for where to find the rest of the elements. References (URLs) were not discussed on this page. To learn more about them read http://code.google.com/apis/gadgets/docs/fundamentals.html#URL
- Gadgets are open-source by design. A immediate consequence is that if you see a gadget with interesting functionality, you may simply open the the gadget module definition file with your browser and examine its source code. For example, the source code for the Date & Time gadget is here: http://www.google.com/ig/modules/datetime.xml. This is the best way to learn about gadgets development.
Gadget Hosting and Placement
As a gadget developer you have two options for hosting your gadget - you may host the gadget on Google's servers or you may host the gadget on your own server. Hosting the gadget on Google's servers is very convenient since you don't need to have administrative access to a web server. If, however, you do have access to a web server, you can use it to host your gadget as well.
Follow these steps to publish a gadget using Google hosting service:
- Use the Google Gadgets Editor (GGE) or any text editor to write your gadget specification, and host it on a public Web server. The easiest way to do this is through GGE. When you save a gadget in GGE, it is automatically hosted in the GGE environment.
- In GGE, choose File > Publish. This step will put your gadget on Google's servers, available on the internet.
- You may grab the URL to your published gadget. In the Publish dialog use the link that reads "Your gadget is located here".
Gadgets may be placed on iGoogle, as well as on any other blog or Web site such as http://blogger.com, http://orkut.com or your own website.
To add your gadget to your iGoogle page use the following procedure:
- Use the Google Gadgets Editor (GGE) or any text editor to write your gadget specification, and host it on a public Web server. The easiest way to do this is through GGE. When you save a gadget in GGE, it is automatically hosted in the GGE environment.
- In GGE, choose File > Publish.
- In the Publish Your Gadget dialog, choose Add to my iGoogle page. If you don't already have an iGoogle page, you must create one as described in Getting Started.
- Go to http://www.google.com/ig, and make sure you are logged in. You will see the gadget you just published to iGoogle.
For more details visit http://code.google.com/apis/gadgets/docs/basic.html
To place gadget on your website use the following procedure:
- Create a gadget using GGE or your favorite text editor
- Publish the gadget, by choosing File > Publish in GGE
- In the publish dialog select the Add to a web page option. This action is also referred to as Syndication.
- Select your preferred color, width etc, click the Get the Code button and copy the code in the text box. This is a short JavaScript code that will display your gadget on any Web site.
- Paste the copied code on your blog or Web site.
Gadgets you create may be used by other users (if you choose to publish them), and any gadgets that you see and like can be added to your personalized iGoogle page, blog or Web site.
To add gadgets created by others to your iGoogle page go to http://www.google.com/ig and click Add Stuff. Browse the gadgets directory and add which ever gadget you like.
To add gadgets created by others to your website go to http://www.google.com/ig/directory?synd=open, select your gadget and click Add to your webpage.
Internationalizing a Gadget
After implementing a useful gadget you may extend its reach by making it available to users speaking different languages by internationalizing the gadget.
Localizing a gadget is simple. Let us start with an example:
In this example we see the Hello World example from previous sections, in different languages: The title and the "Hello, World!" messages are externalized and translated into two languages, English and Japanese.
In the gadget module definition the "Hello, World!" string was replaced with __MSG_hello__ and the title was replaced with __MSG_title__. In addition to this change, there are now two message bundles that go along with the gadget: the en.xml message bundle, which translates __MSG_hello__ to "Hello, World!" and ja.xml which translates __MSG_hello__ to the "こんにちは、世界" Japanese string.
When a user uses your gadget, Google will make sure that the gadget automatically uses the user's own language, where available, as indicated by the user's domain and language preferences.
We recommend that you to prepare the gadget for internationalization and start with English. This requires from you to externalize all strings in your HTML by using __MSG_ variables and creating an English message bundle.
If you speak another language, you can also translate the English message bundle to this other language and include it with the gadget.
If your gadget becomes popular enough, you may want to consider translating it into even more languages. But the important thing is that you make your gadget ready for internationalization in the first place by using __MSG_ strings rather than the actual English strings in the module definition.
To learn more about internationalization visit here.
Where to Go Next
You're ready to start writing your first gadget. Here are some resources to help you:
For additional information consult the resources below:
- YouTube iGoogle Video
- Developer Guide
- Gadget Design Guidelines
- Internationalization
- Google Gadget Editor
- Gadget Developer FAQs
- HTML Tutorial
- JavaScript Tutorial
- XML Information
- CSS Tutorial
Third party gadgets and links are listed for your convenience. Google does not make any representation, endorsement or warranty regarding their content.
Labels: 小資產階級
