使用Adobe Flex开发Google Wave Gadgets

最新推荐文章于 2024-05-22 17:50:20 发布

lihe111

最新推荐文章于 2024-05-22 17:50:20 发布

阅读量978

点赞数

文章标签： google flex adobe search actionscript 工具

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/

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

我们将讨论;

l 什么是Google Wave?

l 什么是Google Wave 拓展？

l “Hello World ”Google Wave 小工具

l 以Flex 编写的Twitter Search Google Wave Widget

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

什么是Google Wave?

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

Google Wave 概述可在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 的拓展程序。拓展实际上是一种机制，你可以通过添加自己的创意“拓展“Google Wave 的功能。拓展有两类：机器人和小工具。我们现在简要介绍下这两类：

机器人

机器人是一个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 文件，如下所示构建：

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.swf Flash 电影文件

授权Hello World Google Gadget

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

<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 编写的Twitter Search 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>  </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>

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

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

Gadget 定义 - basictwittersearchgadget.xml

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

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 ，应该能够保存其状态。为了更好地了解这些，考虑以下几点：

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

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

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

向你的项目添加Wave as Client SWC

从Downloads 网页下载wave-as-client04.swc 。 添加这个 .SWC 文件到Project LibraryPath 。这很简单，就像将它复制到你的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>  </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>

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

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

lihe111

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
使用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/ <br /
复制链接

扫一扫