使用Adobe Flex开发Google Wave Gadgets

Adobe Flash Builder 4 简体中文正式版 Windows版点击下载:http://g.csdn.net/5134151

Adobe Flash Builder 4 简体中文正式版 Mac版点击下载：http://g.csdn.net/5134152

Adobe 在线课堂：http://adobev.csdn.net/zx/index.html
Adobe平台技术峰会课程视频：http://adobev.csdn.net/

 

GoogleWave是一个协同平台，由Google去年发布。它是基于网络的平台，参与者可以走到一起，协同工作与娱乐。Wave开发人员保证了平台的开放性，便于未来的拓展，开发人员可以编写可参与wave的自动机器人和小工具（类似于widget），并且向协同添加值。在本文中，我们将讨论你怎么样可以开始使用Flex作为你的主要开发环境，为Google Wave开发小工具。

 

我们将讨论;

l  什么是GoogleWave?

l  什么是GoogleWave拓展？

l  “Hello World”Google Wave 小工具

l  以Flex编写的Twitter Search Google Wave Widget

l  在Google Wave小工具中共享状态

 

什么是Google Wave?

GoogleWave正如上所说，是一个基于网络的协同平台，由Google发布。基本的概念就是就是Wave。Wave是一个在一个或多个参与者之间的threaded的会话。参与者是像我们一样的人类用户，或者是自动机器人。用户可以在wave和嵌入式媒体，如文件，图片，视频中创建信息。你可以对各种通讯使用GoogleWave。各类范例包括活动策划，旅游计划，项目讨论笔记，或在团队中制作列表等。

 

GoogleWave 概述可在http://wave.google.com上看到。为了使用Google Wave，你需要有一个Google Wave账户，现在只有受邀者才能享用此账户。

 

本文不是要从用户的角度深入研究 Google Wave的具体细节。有个详细的参考，叫完全Wave指南，可帮助你了解如何有效使用Google Wave。在http://mashable.com/2009/11/14/google-wave-use-cases/上，还有一些很好的用户体验故事可作参考。

 

什么是Google Wave拓展？

Google Wave的开发人员保证了平台的开发性，以支持未来的拓展。开发人员可以编写参与wave的拓展程序。拓展实际上是一种机制，你可以通过添加自己的创意“拓展“GoogleWave的功能。拓展有两类：机器人和小工具。我们现在简要介绍下这两类：

 

机器人

机器人是一个wave的自动化参与者。通过定制“事件”, 它可以感知大部分发生在wave里的事情。它可以通过修改wave的状态，对“事件”做出反应。

 

修改可能意味着修改参与者输入的信息，添加新的信息，或者将整个wave内容转贴到一个博客上，或者tweet一个特定的信息等。机器人基本上是看不到的，对事件做出反应。机器人的范例是Stocky Robot，它寻找输入$StockSymbol的参与者，添加Symbol现在的股价。

 

小工具

小工具就像运行在Google Wave客户端里的迷你程序。它们基本上被认为是一个UI，几个参与者可以同时共享。这一点很关键，因为所有的参与者在小工具里共享同一个状态。参与者和可以更改小工具的状态，小工具可以通过渲染相应的数据对此做出反应。小工具的一个范例就是YES/NOMAYBE 小工具，你可以添加在Wave里，这样用户可以进行投票。另外一个用ActionScript编写的wave gadget就是，Napkin Gadget，这样你可以向wave的其他参与者以涂鸦的方式说明你的想法。

 

在本文中，我们会主要讨论小工具的编写。编写的小工具构成了Flex开发环境。我们首先看看在编写Google Wave Gadget期望使用的构架。

 

"Hello World"Google Wave Gadget

在Google Wave中定义的小工具是XML文件，如下所示构建：

<Module> <ModulePrefs title="My Flex Gadget"> <Require feature="flash" /> </ModulePrefs> <Content type="html"> <!--[CDATA[ ]]--> </Content> </Module>

table.MsoNormalTable { font-size: 10pt; font-family: "Times New Roman","serif"; }

在root上，我们有个Module元素，包含有参数选择和内容。在ModulePrefs, 你需要包括一到多个小工具会要求的功能库。Google Wave支持多个功能库，如flash，tabs,  dynamic-height 等等。这里是一个完整的列表。

 

在上面第一个列表中，我们只包含了一个功能库，即就是，flash。我们需要flash，因为我们要在小工具中嵌入一个Flash短片，也就是SWF。每个小工具在缺省状态下是200像素高。 如果你想要修改，向你的小工具提供另外一个静态高度值，你可以使用属性高度用于元素。

 

Content元素为HTML，包括小工具的核心。注意，Content放置在CDATA元素内，基本上由HTML，Javascript 和CSS构成。在我们的例子中，我们会使用OBJECT HTML 标签以插入Flash短片，即我们要开发的SWF。

 

开发我们的 Hello World SWF

我们会保持说明的简单性，因为我们的重点是让整个步骤正确，也就是开发，布局和测试的过程正确。我们会开发一个简单的MXML程序，它有一个标签“Hello World”。启动你的

Flex Builder，然后生成一个简单的Hello World程序。我的主要MXML文件叫做HelloWorldGadget.mxml。我的程序的源代码如下所示：

 <?xml version="1.0" encoding="utf-8"?><mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute"><mx:Label text="Hello World"/></mx:Application> 

table.MsoNormalTable { font-size: 10pt; font-family: "Times New Roman","serif"; }

我们构建了上面的项目，生成HelloWorldGadget.swfFlash电影文件

 

授权Hello World GoogleGadget

下一步就是编写我们的小工具XML，因为Google Wave将要了解它。我首先重复下Google Wave GadgetXML的骨架结构。这里再列出来以供你参考。唯一的更改就是我将标题改成了 "Hello WorldGadget"。

<Module> <ModulePrefs title="Hello World Gadget">   <Require feature="flash" /> </ModulePrefs> <Content type="html"> <!--[CDATA[  ]]-->   </Content> </Module>
现在，我们需要使用在Content元素中插入HelloWorldGadget.swf
短片。
<Module> <ModulePrefs title="Hello World Gadget">   <Require feature="flash" /> </ModulePrefs> <Content type="html"> <!--[CDATA[ <object id="HelloWorldGadget" name="HelloWorldGadget"                        type="application/x-shockwave-flash"                        data="http://wavegadgets4u.appspot.com/HelloWorldGadget.swf"                        width="100%" height="100%">                <param name="movie" value="http://wavegadgets4u.appspot.com/HelloWorldGadget"/>                              <param name="quality" value="high" />                <param name="wmode" value="transparent" />                <param name="allowScriptAccess" value="always" />                <param name="allowNetworking" value="all" />        </object>  ]]-->   </Content> </Module> 

代码直截了当，你可以看到HelloWorldGadget.swf 短片在对象标签中被引用。URL来自于将要保存您的文件的网站。记住，Google Wave平台是基于网络的平台，如果你想要其他人使用你的小工具，它就必须放置于一个公众可以读取的服务器上。在我的案例中，我使用了Google App Engine，服务于我的文件，但是你也可以使用个人网站或其他公众可以进入的服务器。

部署Hello World Google Gadget

这一步就是逻辑步骤，我们之前提到了。一旦你准备好了自己的SWF文件和Gadget XML文件，你需要将它们放在一个公众可以读取的文件上。确保在Gadget XML中的标签里，制定了恰当的SWF url。在我们这个例子中，两个重要的文件是，HelloWorldGadget.swf和helloworldgadget.xml，它们均在上述Gadget 的定义范围内。一旦我在公开的服务器上部署了这些文件，最后一部就是使用它了。我们现在测试下新开发的Google Wave Gadget。

在Wave 里插入Gadget

你将需要有一个Google Wave 账户，但是如果没有，你还是能看到整个流程。

步骤：

l  登录http://wave.google.com，使用您的帐户登录；

l  如下所示，点击New Wave:

l  现在，你是唯一的参与者（我自己），如下所示：

在wave中插入我们的Gadget。为此，编辑Wave,然后选择Insert Gadget by URL

 

l  这里会出现一段小对话。你需要提供Gadget XML的完整的URL。在本例中，我们放置在http://wavegadgets4u.appspot.com上的是helloworldgadget.xml文件，因此我们确定http://wavegadgets4u.appspot.com/helloworldgadget.xml. 点击Add.

如果一切顺利，你会看到在wave里播放Hello World SWF短片。

 

用Flex 编写的TwitterSearch Google Wave Widget

在本小节中，我们将使用Flex编写其它Wave Gadget。它与我们之前的流程类似，不过它不仅仅只是一个“Hello World”。在这个我们称之为Twitter Search Gadget的小工具里，我们可以输入一个搜索条目，然后它会在Twitter上进行搜索，寻找与该条目相匹配的内容。

第一步涉及编写Flex程序。主应用文件BasicTwitterSearchGadget.mxml如下所示：

BasicTwitterSearchGadget.mxml

<?xml version="1.0" encoding="utf-8"?><mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" backgroundColor="#323232"><mx:HTTPService id="YQLService" resultFormat="object" method="GET" result="onYQLResult(event)"/> <mx:Script> <!--[CDATA[import mx.rpc.events.ResultEvent; import mx.collections.ArrayCollection; [Bindable] private var results:ArrayCollection = new ArrayCollection(); public function searchTwitterviaYQL():void { var yahooURL:String = ""; var term : String = searchterm.text; yahooURL = "http://query.yahooapis.com/v1/public/yql?q=select%20*%20from%20twitter.search%20where%20q%3D'"+term+"'%3B&format=xml&env=store%3A%2F%2Fdatatables.org%2Falltableswithkeys"; YQLService.url = yahooURL; YQLService.send(); } public function onYQLResult(event:ResultEvent):void { results = event.result.query.results.results as ArrayCollection; } ]]--> </mx:Script> <mx:TextInput id="searchterm" width="200" color="#000000" x="10" y="10"/> <mx:Button id="btn" label="Search" click="searchTwitterviaYQL()" x="218" y="10"/> <mx:DataGrid id="dgData" dataProvider="{results}" variableRowHeight="true" selectionColor="#6496C3" x="10" y="40"> <mx:columns> <mx:DataGridColumn headerText="Image" width="60" > <mx:itemRenderer> <mx:Component> <mx:Image source="{data.profile_image_url}" horizontalAlign="center" verticalAlign="middle"/> </mx:Component> </mx:itemRenderer> </mx:DataGridColumn> <mx:DataGridColumn dataField="from_user" headerText="Screen Name" width="95"/> <mx:DataGridColumn dataField="text" headerText="Status" width="500" wordWrap="true"/> </mx:columns> </mx:DataGrid></mx:Application>

 

我们来看看源代码的主要部分：

1. 通过YQL服务进行Twitter Search；
2. 用户界面很简单。有一个TextInput 域，用户输入搜索条目。点击Search按钮，我们调用searchTwitterviaYQL() 函数。
3. searchTwitterviaYQL() 函数使用一个HTTPService定义的(YQLService)实例来调用Twitter Search YQL 方法。它返回随后与DataGrid的DataGrid绑定，显示Tweets的结果。

 

Gadget 定义 - basictwittersearchgadget.xml

下面是在XML中Google Gadget的定义。目前为止，这些都应是你所熟悉的。唯一的小改变就是，我在这里介绍的，对ModulePrefs元素添加height 属性。我已经提供了高度的静态值，这样当我们的Gadget在Google Wave中显示时，会比缺省的高度值200像素要大些。XML定义的其他内容，请参阅相关SWF文件。

<Module> <ModulePrefs title="Hello World Gadget" height="400"> <Require feature="flash" /> </ModulePrefs> <Content type="html"> <!--[CDATA[ <object id="BasicTwitterSearchGadget" name="BasicTwitterSearchGadget" type="application/x-shockwave-flash" data="http://wavegadgets4u.appspot.com/BasicTwitterSearchGadget.swf" width="100%" height="100%"> <param name="movie" value="http://wavegadgets4u.appspot.com/BasicTwitterSearchGadget.swf"/> <param name="quality" value="high" /> <param name="wmode" value="transparent" /> <param name="allowScriptAccess" value="always" /> <param name="allowNetworking" value="all" /> </object> ]]--> </Content> </Module>

 

 

Twitter Search进行中

如上所示，以同样的方式，我们通过Wave客户端中的URL选项将Gadget添加到Wave。如果你想试下这个小工具，你可以尝试着使用以下url插入Gadget：http://wavegadgets4u.appspot.com/basictwittersearchgadget.xml。一个例子，使用Twitter Search搜索“insideria”显示了嵌入在wave中的Gadget内的结果。

在 Google Wave Gadget中共享状态

Google Wave，如你所知，是一个协同平台。一个wave，通常由参与者发送的几个消息组成，甚至在几天之后，你再回来，会发现其状态仍然被保存了。这就意味着，wave的一个拓展，如刚才我们编写的Gadget，应该能够保存其状态。为了更好地了解这些，考虑以下几点：

1. .你和其他几个wave中的参与者添加我们刚刚开发的Twitter Search Gadget，进行Twitter Search。问题就是，Gadget现在无法反映其他参与者输入的内容；
2. 重要的是，如果你在Search Term输入域中，输入“insideria”。然后wave中的其他参与者可以看到同样的内容。这就是wave的状态，它需要反应给所有的参与者。
3. 即使我们几天后再来看wave，我们应该能够找到特定的wave，它会自动显示使用Twitter Search的最后一个搜索词组。

为了能够让我们的Gadget反映状态，我们需要Wave Programming 模型展示给我们的State API。幸运的是，对于喜欢用ActionScript来编写Gadget的我们来说，有一个API，它使用ActionScript Wrapper来包装Google Wave StateJavascript API。该项目是开源的，可以在

http://code.google.com/p/wave-as-client/上获取。

向你的项目添加Waveas Client SWC

从Downloads网页下载wave-as-client04.swc。添加这个.SWC文件到ProjectLibraryPath。这很简单，就像将它复制到你的Project的libs文件夹中。

我们将要准备修改BasicTwitterSearchGadget.mxml程序，这个程序我们编写来合并状态功能。主程序文件；TwitterSearchGadget.mxml 如下所示。

TwitterSearchGadget.mxml

<?xml version="1.0" encoding="utf-8"?><mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" backgroundColor="#323232" creationComplete="initGadget()"><mx:HTTPService id="YQLService" resultFormat="object" method="GET" result="onYQLResult(event)"/> <mx:Script> <!--[CDATA[ import mx.rpc.events.ResultEvent;import mx.utils.StringUtil; import mx.collections.ArrayCollection; import com.nextgenapp.wave.gadget.WaveState;import com.nextgenapp.wave.gadget.Wave; [Bindable] private var results:ArrayCollection = new ArrayCollection(); //Wave Instance private var _wave:Wave; private function initGadget():void { _wave = new Wave(); _wave.setStateCallback(stateupdated); }private function stateupdated(state:Object):void { var strSearchTerm:String = _wave.getState().getStringValue("mysearchterm"); if (strSearchTerm) { searchterm.text = strSearchTerm; var yahooURL:String = "http://query.yahooapis.com/v1/public/yql?q=select%20*%20from%20twitter.search%20where%20q%3D'"+strSearchTerm+"'%3B&format=xml&env=store%3A%2F%2Fdatatables.org%2Falltableswithkeys"; YQLService.url = yahooURL; YQLService.send(); } } public function searchTwitterviaYQL():void { var delta:Object = new Object(); delta.mysearchterm = searchterm.text; _wave.submitDelta(delta); } public function onYQLResult(event:ResultEvent):void { results = event.result.query.results.results as ArrayCollection; } ]]--> </mx:Script><mx:TextInput id="searchterm" width="200" color="#000000" x="10" y="10"/> <mx:Button id="btn" label="Search" click="searchTwitterviaYQL()" x="218" y="10"/> <mx:DataGrid id="dgData" dataProvider="{results}" variableRowHeight="true" selectionColor="#6496C3" x="10" y="40"> <mx:columns> <mx:DataGridColumn headerText="Image" width="60" > <mx:itemRenderer> <mx:Component> <mx:Image source="{data.profile_image_url}" horizontalAlign="center" verticalAlign="middle"/> </mx:Component> </mx:itemRenderer> </mx:DataGridColumn> <mx:DataGridColumn dataField="from_user" headerText="Screen Name" width="95"/> <mx:DataGridColumn dataField="text" headerText="Status" width="500" wordWrap="true"/> </mx:columns> </mx:DataGrid></mx:Application>

 

我们现在来看看源代码的主要内容：

1. 用户界面保持不变，即就是，一个搜索词输入盒和一个启动搜索的按钮。
2. 第一个要注意的就是，已经向我们的类添加了Wave类实例。
3. 我们有一个函数，由creationComplete事件触发。该函数是initGadget()。使用这个方法，我们创建一个Wave类实例，并且设置一个回调函数，在状态改变时，它被调用。我们的意思就是，任何参与者如果改变了wave的状态（考虑下有些数据），该回调函数就会被调用。
4. 现在，仔细看看当Search按钮被点击时的情况。在前一节，我们都是直接调用YQLService，抓取和显示结果。我们现在不这样做了。searchTwitterviaYQL()方法创建一个Object实例。它是一个简单的名值对（keyname hardcoded对mysearchterm），它的值是你已经输入的搜索值。这个object然后通过_wave.submitDelta方法传递给Wave。
5. 当通过submitDelta方法向Wave提交数据时，Wave会预计出状态发生的一些改变。它会通知所有的Wave参与者客户端，这就意味着出现了一些变化。之前定义的回调函数随着状态改变，也就是object，而被调用。
6. 在回调函数中，stateupdated, 我们所做的就是提取"mysearchterm" 值，执行Twitter Search。

 

通过这些改变，我们更改了Gadget的行为，加入下面内容：

•    如果参与者输入任何搜索词，并点击Search按钮－状态被改变，每一位其他参与者都能几乎实时看到搜索词更新。搜索结果对所有人来说都是类似的。

•   现在因为状态被Wave保存了，如果你几天之后回到同一个Wave，初始化Gadget会产生一个回调函数,stateupdated。这样，就会出现搜索结果，因为它们是最近使用该Gadget搜索的词。

Gadget定义－twittersearchgadget.xml

最后一部分是Gadget XMl的定义，如下所示。仅有的变化就是添加了几个Javascript文件，作为我们使用的Javascript和管理与Wave的Javascript库之间的桥梁。如需了解更多信息，请参考http://code.google.com/p/wave-as-client/.。此外，我们还有一个特别的数据库，包括”rpc”。它可以为远程流程调用提供支持（gadget-to-container,container-to-gadget, and gadget-to-gadget通讯）。

<?xml version="1.0" encoding="UTF-8" ?><Module><ModulePrefs title="Twitter Search" height="400"> <Require feature="rpc" /> <Require feature="flash" /> </ModulePrefs><Content type="html"><!--[CDATA[ <mce:script type="text/javascript" src="http://wave-api.appspot.com/public/wave.js" mce_src="http://wave-api.appspot.com/public/wave.js"></mce:script> <mce:script type="text/javascript" src="http://wave-as-client.googlecode.com/svn/trunk/example/wave_simple_state_example/web/wave-as-client.js" mce_src="http://wave-as-client.googlecode.com/svn/trunk/example/wave_simple_state_example/web/wave-as-client.js"></mce:script> <object id="TwitterSearchWidget" name="TwitterSearchWidget" type="application/x-shockwave-flash" data="http://wavegadgets4u.appspot.com/TwitterSearchWidget.swf" width="100%" height="100%"> <param name="movie" value="http://wavegadgets4u.appspot.com/TwitterSearchWidget.swf"/> <param name="quality" value="high" /> <param name="wmode" value="transparent" /> <param name="allowScriptAccess" value="always" /> <param name="allowNetworking" value="all" /> </object> ]]--> </Content></Module>

 

如果你想要使用下这个Gadget，你可以通过使用下面的url：http://wavegadgets4u.appspot.com/twittersearchgadget.xml来插入该Gadget。即使你以后回到这个Wave,你会发现你或者其他参与者最近使用的词仍然显示。

好，就到这里。希望你能愉快地使用Flex编写http://wavegadgets4u.appspot.com/twittersearchgadget.xml。希望可以在Samples Gallery.里看到你的Gadget介绍。

 

本文译自：http://insideria.com/2010/07/developing-google-wave-gadgets.html