--专题: web 2.0

白金译作 Google 插件应用程序接口

3275个读者 翻译: 拙尘  07/31/2007 原文 引用 双语对照及眉批 字体大小

Google 插件并不神秘,说穿了,就是一段XML代码。你完全可以写出自己的小插件。

好,还是从 Hello World! 开始。下面是代码:

<?xml version="1.0" encoding="UTF-8" ?>
<Module>
<ModulePrefs title="hello world example" />
<Content type="html">
<![CDATA[
Hello, world!
]]>
</Content>
</Module>

就这么简单。没什么多说的:第一行是xml声明,然后是<Module> ... </Module>模块;再里面是由
<ModulePrefs .../>定义的一些属性(关于 ModulePrefs 的属性,请参考这里),以及由
<Content ...> ... </Content>所定义的内容;而<![CDATA[ ... ]]>则告诉解释器,
这部分内容不是XML,而是HTML或Javascript。

好了,天机已经都泄露了!Gadget里面的内容跳不出三样:XML,HTML,和Javascript。剩下的,就是
一些小技巧了。

1. 与使用者的交互

如果想要允许用户设置一些信息,也很简单:用 <UserPref ... />来定义就好了。让我们看个例子:

userprefs_module_new_torn.gif
上面的小插件,允许使用者通过编辑界面设定一些变量。变量的定义是通过下面这段代码做到的:

<?xml version="1.0" encoding="UTF-8" ?>
<Module>
<ModulePrefs title="Preferences for __UP_myname__" height="250" />
<UserPref name="myname" display_name="Name" required="true" />
<UserPref name="myphoto" display_name="Photo" default_value="http://doc.examples.googlepages.com/Rowan-headshot.jpg"/>
<UserPref name="mychoice" display_name="Show Photo?" datatype="bool" default_value="true"/>
<UserPref name="mycolor" display_name="Color" default_value="Yellow" datatype="enum" >
<EnumValue value="Red" />
<EnumValue value="Aqua" />
<EnumValue value="Lime" />
<EnumValue value="Yellow" />
<EnumValue value="Pink" />
<EnumValue value="Orange" />
<EnumValue value="White" />
</UserPref>


一看就明白了,跟一般的变量声明和定义没有什么两样:名字(name),显示名字(display_name),
缺省值(default_value),数据类型(datatype)等。这小段代码里还显摆了一下枚举(enum)
数据的定义。

动态替换用户设定的值是通过 "Preferences for __UP_yourvarname__" 这样一种很直白的方式进行的。
嗯,直白得不能再直白了!(不过,为什么用 __UP_ 这个前缀呢?)对了,Google 插件用 preferences 来
称呼交互式变量。关于 UserPref 的其他属性,请参考这里

然后就是对 preferences 的访问。首先通过 _IG_Prefs() 初始化对象,然后就可以读取变量的内容了。下面
是一段示范代码。

<script type="text/javascript">
var prefs = new _IG_Prefs();
var someStringPref = prefs.getString("StringPrefName");
var someIntPref = prefs.getInt("IntPrefName");
var someBoolPref = prefs.getBool("BoolPrefName");
</script>

下面这段比较长的代码,是上面那个例子里用来显示用户设定内容的javascript。注意:
代码的最后通过 _IG_RegisterOnloadHandler(displayGreeting) 实现在插件
载入时,对 displayGreeting 的调用。

<Content type="html">
<![CDATA[

<div id="content_div" style="font-size:12pt; padding:5px;">

<script type="text/javascript">

// Get userprefs
var prefs = new _IG_Prefs();

// Based on user input, display personal greeting
function displayGreeting (){
// Create Date object
var today = new Date();
// Get current time.
var time = today.getTime();
var salutation;

// Based on the time of day, display an appropriate greeting
var hour = today.getHours();
if (hour < 12)
salutation = "Morning"$$
else if (hour > 17)
salutation = "Evening"$$
else salutation = "Afternoon"$$

// Build HTML string to display message
var html = ""$$
var element = document.getElementById('content_div');
element.style.height=250;

// Set the background color according to the mycolor userpref
element.style.backgroundColor=prefs.getString("mycolor");

// Display a greeting based on the myname userpref
html += "<br><h2>Good " + salutation + ", " + prefs.getString("myname") + "!!!</h2><br>"$$

// If the "Show Photo?" checkbox is checked, display photo.
if (prefs.getBool("mychoice")==true)
{
html += '<img src="' + prefs.getString("myphoto") + '">';
}
_gel("content_div").innerHTML = html;
}
_IG_RegisterOnloadHandler(displayGreeting);
</script>
]]>
</Content>


2. 将网页转换成插件

其实,制作插件最简单、最灵活的办法,还是把网页直接转换成插件。这也有两种办法:一种是把 html 内容,去掉
<html>、<head>、<body>等标志,植入 type="html" 的插件里;另一种就是通过 type="url" 插件,直接
引用网页。注意,当通过 type="url" 直接引用网页时,插件里就不能再放其他的 html 或是 javascript 内容了。

想要了解更多 type="url" 的插件制作技巧的话,可以参考这里


发布你的插件

你可以把 Google 插件放在自己的 Web 服务器上,也可以通过 Google Page Creator 来发布你的插件。你可以
按照下面的步骤来做:

1)到 http://pages.google.com 上,并用你的 Google 帐户登录;

2)在 Page Manager 中,点上传(Upload)链接;

3)把你的文件上传上去。

这些都完成后,你就可以通过 http://<Google-username>.googlepages.com/your_file_name
来使用你的插件了。

最后强调一点,插件一旦发表,就都是公开的。所以切记不要把个人信息写入 Google 插件。

继续阅读
  • 被否决的Google Logo

    优胜劣汰,Google Logo也不例外。幸福的Logo是一样的,不幸的Logo各有各的不幸······

  • 2006 年互联网技术发展趋势

    已经十二月了,是该回顾一下2006年互联网技术的发展状况,和展望2007年的时候了。在随后的几周,Read/WriteWeb将发表一系列深度分析2006年出现的产品和趋势的文章。同时我们会畅想一下20...

  • 101个Google技巧——Google技巧的终极收集

    可能我们用了很久Google都还不知道我们一直在被那个只有十多个链接的Google首页欺骗了,Google那个简单的输入框下还隐藏了多少秘密呢?让这101个Google搜索技巧提示你,或许它可以帮助你...

  • Google 的疯狂面试题

    几星期前,一个朋友接受了Google公司的面试,他透露了面试中的一些问题。顺便,我把从其他几个曾经面试过的人那里听来的内容也整理在一起。最大的互联网公司Google的一份面试题集,看看你是否能够回答出...

  • Facebook如何击败Myspace,Yahoo!和Google?

    Facebook如何击溃Myspace,Yahoo!和Google? 原文作者:Christopher Beam (Slate.com在线杂志专栏作家) 每个年轻人——通常刚脱稚气——必须作出一个重...

  • 聪明地使用Google的7个技巧

    我在下面编辑了一份包含7个使用Google的技巧的清单,我相信每个人都会想要知道这些.我认为这些技巧合在一起已经代表了使用Google搜索的所有技巧和方法的最高成就.虽然除此之外还有很多小技巧,但这7...

  • 三条提高gmail工作效率的可靠忠告

    如果你是个技术专家,email是必不可少的,但要完全控制所有电邮会很困难。如果你使用gmail和firefox,这里有一些技巧可以帮你如意掌控所有电邮。 第一个技巧是补救措施:把所有邮件保存在邮箱之...

  • Google办公室(总部)照片——世界各国的Google总部

    Google办公室(总部)——位于世界各国的照片...这是做梦都想去工作的地方呀:)

相关小组

标签:

内容有问题?请与我们联络。

译作评分

  • Currently 0.00/5
  • 1
  • 2
  • 3
  • 4
  • 5
 0.0  |  0 个评分

3条评论    2眉批

添加评论

欢迎访问译言网。在这里,您可以。。。

阅读
发现
翻译