要知道什么是Gadget，可以先去看看iGoolge。前者是技术，后者是基于此技术的成果，更有直观感受。
iGoogle是一个个性化的门户网站。用户可以定制自己的感兴趣的内容，设置自己的首页的展示。iGoogle中的所有可定制的内容其实都是一个个的Gadget。这些Gadget是利用OpenSocial API（扩展自Gadget API，可以开发一个社会化的应用）来开发的。
下面展示了一个简单的定制的iGoogle首页：
如图所示iGoogle的组成部分：
1，Navigation（左侧导航栏）：左侧导航栏包含了一个树形的导航，有一个Home链接和其下的一些子链接，点击Home链接，将展示iGoogle的Home视图（下面会提到），点击Home下的子链接会在Canvas视图中展示这个子链接指向的Gadget；
2，Home View：Home视图展示的是所有的用户定制的Gadgets。可以存放多个Gadget。Home的UI Layout仅仅支持三列，每一列可以放多少Gadget没有明确限制，所有的Gadget都可以在这三列中来回拖拽。Home View的UI Layout的实现应该使用jQuery框架来实现的；
3，View：用来展示Gadget的地方，一个View展示一个Gadget，每一个View都包含一个编辑图标和一个最大化图标，编辑图标用来通过读取Gadget的XML定义文件中的<UserPref>来动态展示编辑区域，最大化图标用来将Gadget显示到Canvas视图中。关于具体的每个Gadget的内容读取方式，都是根据Gadget的xml来定义的方式来读取的，或者动态或者静态；
4，Canvas View：一个大的展示Gadget的视图，在一个Canvas View中只展示一个Gadget。根据Gadget的xml定义文件的不同，同一个Gadget在Home View跟Canvas View中展示的内容可能是不一样的，因为在Gadget的xml定义文件规范中，可以定义多个<Content。type="html" view="">元素，在这个元素中有一个view属性，就是用来指定当展示的容器（在iGoogle中有home跟Canvas两种）不同时具体的这个Gadget的展示情况。比如上图所示的谷歌翻译词典，它的xml定义文件中定义了两个<Content。。。>元素，一个用来指定当Gadget位于Home View时显示的效果（view=“home”），另一个则是指定当Gadget位于Canvas View时的现实效果（view=“canvas”）。这个由Gadget容器来决定，每一个Gadget容器的view类型不一致。
5，另外其实还有一个Gadget Directory：用来展示所有的这个iGoogle容器存放的可定制的Gadget。
Gadget在技术上，是一个基于HTML、CSS、JS的web应用组件，可以在不做任何改动的情况下部署到任意的页面。Gadget通过JavaScript, Flash 或者 Silverlight来实现动态行为。
Google为了实现iGoogle（当然不仅仅是为了实现iGoogle，还有制订标准，占领高地plapla），定义了一个开发Gadgets的规范，并提供了Gadgets API来开发Gadgets。
按照这个规范，Gadget是由一个XML语法的文件来定义的，通过Gadget服务器，把这个XML文件编译成可以一个可以嵌入到独立页面、Web应用或者其他Gadget的合适的代码格式。也就是说，Gadget与XML是同义的。一个Gadget就是一个XML文件来定义。定义Gadget的XML的格式例子如下：
<?xml version="1.0" encoding="UTF-8" ?>
<Module>
<!—ModulePrefs元素定义了Gadget的一些特征，比如标题作者等，可以有多个-->
<ModulePrefs title="hello world example" />
<!—UserPref元素定义了一些用户可以自己设置的一些Gadget的属性，可以有一个或者多个，-->
<UserPref name="myname" display_name="Name" default_value="Rowan"/>
<!-- Content元素是这个文件的最重要的部分，这里由开发者来写一些html和js等代码作为Gadget的具体展现-->
<Content type="html">
<!--<![CDATA[里面的内容不会被作为XML语法来解析 -->
<![CDATA[
Hello, world!
]]>
</Content>
</Module>
一个Gadget的XML文档主要包含以下三个主要的元素：
<Content>元素内定义了三个作用：1、这个Gadget的功能；2、这个Gadget如何呈现；3、指定部署的位置。如果指定的Gadget是html的，则由用户在这里定义Gadget显示的内容以及动作，这时不能写<html><body>标签；如果指定的Gadget是url类型的，则这个Gadget的内容由一个url来指定，这个时候就不能再定义自己的html等元素了。
<UserPref>元素定义允许用户指定的Gadget的属性。开发者可以利用js来获取这些属性值。从而对Gadget进行修改。
<ModulePrefs>元素指定了静态的Gadget的属性。
资源：
1，具体的关于Gadget API中JS的接口的使用可以访问这个网址：http://code.google.com/apis/gadgets/docs/reference/
2，有一个通过jQuery框架实现的类iGoogle首页的例子：http://net.tutsplus.com/tutorials/javascript-ajax/inettuts/
