[翻译]Popfly系列课程2 - 起程–Popfly Mashup创作工具：即将成为你身边的影院

起程 – Popfly Mashup创作工具：即将成为你身边的影院

在地图上实时显示社区的属性，合并RSS源，将Flicker上的照片嵌入其它网站都是一种被称为Mashup的新型Web应用程序。在上面每一个例子中，拥有管理这些被mashup的数据 – 实时的地区列表，地图，RSS源及图片的团体使其可以被用来组合以创建新程序。

使用微软Popfly's Mashup编辑器，任何没有软件开发经验的人都可以创建Mashup。在这节课中，你将一个Mashup并与之交互以访问并显示你身边的影院正在访问的电影信息。

本课的Professor Popfly Mashups参考:

本地电影轮播：http://www.popfly.com/users/professorpopfly/LocalMoviesCarousel

本地电影表：http://www.popfly.com/users/professorpopfly/LocalMoviesTable



学习成果

完成本节课学习后，你将应该能够：

描述什么是mashup，并举出一些"真是生活"中mashup的例子。

创建，保存，修改，并分享一个Popfly mashup。

在你的网站或Facebook页面中嵌入一个mashup。

分辨一个块的操作的默认值

描述怎样通过改变一个mashup的参数来改变它的行为。

定位并分辨Popfly中的块的输入，处理及输出。

将面向对象编程的概念与Popfly block及mashup的概念相联系。

概览

Mashup是一种将互联网上来自不同数据源的数据以一种新的途径整合在一起而形成的新型Web应用程序。随着这些年越来越多的公司将他们的数据通过编程接口或RSS源暴露出来，Mashup变得流行起来。

下面是一些Mashup的例子：

根据地图上的实时社区信息来划分区域。

将多个RSS源的信息合成到一个单独视图

将一个网站存储的照片以一种有趣的方式显示在另一个网站中

上面这些例子实现的前提是拥有管理这些被mashup的数据 – 实时的地区列表，地图，RSS源及图片的团体使其可以被用来组合以创建新程序。于是，软件开发者可以以这一种新途径来创建这种整合了不同公司数据或处理单一数据源数据的新型程序。

在2007年秋天微软推出一个新的基于Web的应用程序 – Microsoft Popfly – 来可视化的创建mashup。作为一个平台Popfly包含了三个应用程序：

Popfly Mashup Creator：可视化mashup设计器

Popfly Game Creator：创建视频游戏

Popfly Web Page Creator：创建简单页面来轻松容纳你的mashup游戏和其他网页内容

本系列中的本次课将教你怎样使用微软Popfly Mashup Creator来创建真实世界的Web应用程序。使用微软Mashup Creator。即使没有任何软件开发经验的人也可以创建新型的有趣的应用程序（mashup）。在本课中，你将学习创建一个mashup并与之交互来访问并显示你所在地区的上映的电影的信息。

Popfly使用称为block（块）的构造来获取，处理或显示数据。一些Popfly块访问一个远程Web站点暴露的数据，所以Popfly中的其他块可以与之交互。其它块处理数据，如排序或过滤一系列的值，许多块以表格，照片领域，图形等形式可视化的显示数据。通过这样一种形式组合块，一个块的输出可能成为另一个块的输入。描述这样一个与数据交互的过程是可能的。

本课使用LocalMovies块作为你周围影院上映的电影的数据源。



当你创建一个mashup后，你可以在你的博客，网站，或Facebook个性化信息等其它地方来分享它。你同样可以在Popfly社区中分享mashup，那样其他用户可以了解你是怎样构建它的。

块

在左侧是一系列以功能（显示，娱乐及游戏，图像及视频，本地信息等等）分组的块。你可以使用这些基本的构建块来创建mashup。

如果你知道你想要使用的块的名字，你可以直接在块搜索框中输入它的名字（或前几个字母）。部分块包含静态数据来组合到一个mashup中。Popfly以黄色标识数据块，如US信息块。

你可以点击

来展开一个快组，或点击

折叠一个组。微软Popfly团队创建的块以

来标识。然而，Popfly是可扩展的，那些了解怎样编写JavaScript代码并对XML有所了解的用户可以创建他们自己的块来与其它Popfly用户分享。这些社区中创建的块以

标识。这种增强Popfly平台的能力是Popfly Web2.0增强的众多特性之一。越多的人使用Popfly这个平台（创建并分享附加块及mashup）它就会变的越好越强大。



在Popfly Mashup编辑器中，你可以将你的鼠标放在块列表中的块上，右手边将显示这一个块更详细的信息。你也可以将块拖到设计界面上，然后点击

来查看其详细信息。

在设计视图中放置的每一个块的右侧都有一个面板。每一个符号完成一个特定的任务。



连接块以创建信息流

当计划一个mashup的时候，首先考虑完成它所需要的工作流或任务，然后找到适当的Popfly块及操作来处理每个任务。Popfly块拥有各种操作（也称函数或方法）来获取、处理或显示信息。点击块的扳手图标展开块来进一步选择一个操作并指定其输入。

要连接两个块，点击"开始"块右侧的蓝色圆圈，然后点击"结束"块左侧的蓝色圆圈。这说明你要将第一个块的输入连接到第二个块的输入。考虑数据从哪开始、哪一个信息流中后面的块需要从前面的块获得数据。在简单的mashup中，可能只有一个块连接到另一个块。然而在更复杂的mashup中，可能有许多其它块连接到一个块。



数据类型

Popfly定义了几种智能的数据类型，它可以知道与其一同工作的数据是什么类型的信息。除了简单的标识"这是一个字符类型"或"这是一个数据类型"。Popfly还可以识别出会被使用的数据，例如，像一个纬度或经度，缩略图的URL或城市的名称。



这允许Popfly对象一个块的哪一个输出会作为另一个块的输出的问题作出智能的猜测。当可能有多种选择或者Popfly无法给出任何建议的时候，连接块会显示黄色警示符以通知你提供附加信息。

Popfly需要知道一个块输出的信息的结构以及怎样使用它。例如，一个块可能返回指向图片的URL。如果Popfly可以判断这个URL是指向图片（而不是指向网页或RSS源等等），则Popfly会建议用户将此块与一个图片显示块相连。

为了实现这些Popfly创建了一系列数据类型，并将一个块可能提供给另一个块的信息按此分类。下面表格中列出了一些广泛使用的Popfly数据类型。

数据类型	描述
标题	一个对象的简短描述
描述	一个较长的描述（可能包含HTML）
URL	不是其它任何一种URL类型的任意URL
图像URL	指向一个全尺寸的图像的URL
缩略图URL	指向一个缩略图的URL
源URL	一个RSS或ATOM的源的URL
经度	小数格式的经度值
纬度	小数格式的纬度值
订制	用户必须指定的值
城市	一个城市的名称
州	一个州的名称
邮政编码	美国一个地区的邮政编码

常用Mashup任务

使用Popfly的最大困难之一在于使用哪一个块完成特定的任务来组成你的Mashup。下面的表格列出了一些常见的Mashup任务及你可以使用的来完成这些任务的Popfly块。

如果你想完成：	你可以使用这些块中的操作：
获取数据	让用户输入或者由列表选择一个值	User Input User Input V2_brian
由其它站点获取图片	Yahoo! Images flickr Live Image Search Image Scraper
获取基于文本的数据	RSS Live News LocalMovies Imdb iTunesTopSongs PhoneBook
处理数据	处理数据列表	Filter (with ConditionBuilder) RSS Filter (with ConditionBuilder) Sort RSSDateSort Bentley_TextTools (RemoveDuplicates) Combine Text Util (to split text input)
处理文本值	TextAppender Bentley_TextTools Text Util Text Helper Logic (with ConditionBuilder)
显示数据	使用Silverlight可视化块显示图像	Carousel MovingSlideShow PageTurner PhotoFlip PhotoShow PhotoSphere PhotoStack PhotoTiles SimpleImage
在地图上显示信息	GeoNames YahooGeoCoding VEPushpinListCreator Virtual Earth
在表格显示信息	Table Table Display RSSTableDisplay StevesTableWithHotFirstColumn BlockOutputInspector RSS List ListOfLinks

注意，这些块中的大部分已经被Popfly用户分享，因此微软Popfly团队不再维护它们。当已经在块列表中工作的块上做了很多工作，有可能一些块的作者将来会修改或者不再共享他们的块。Popfly为你的mashup中使用到的每一个块保存了一份当前状态的拷贝，所以即使一个用户共享的块被修改或移除了，你的mashup也可以保持运行。

示例1：在Popfly中开始本地电影mashup

本课描述的mashup使用了一个叫做LocalMovies的块，它通过互联网由http://www.ignyte.com（

http://www.ignyte.com/services-web-services.html提供了更多的信息）提供的一个免费服务获取电影和电影院信息数据。

按以下三个步骤打开Popfly Mashup编辑器

打开浏览器并转到www.popfly.com。

使用你的Windows Live ID（如果你还没有则创建一个）登录Popfly。如果你的电脑上还没有安装Silverlight，Popfly会要求你安装以便运行。Microsoft Silverlight是一个跨浏览器跨平台的浏览器插件。它使你的浏览器可以显示一些当前时代的Web应用所具有的高级的可视化效果和用户界面元素。

当你登录Popfly后，点击Create并选择Mashup。呈现在你眼前的屏幕中，左边有一个块工具条，上方提供了保存选项来保存你的mashup，一个动作工具条来编辑你的mashup、添加自定义HTML到你的mashup或者是运行mashup，及中间的一个大的设计界面，在其中你可以设计你的mashup。右侧是一个帮助面板提供了使用Popfly的建议与技巧。

在Popfly编辑器左侧的块工具条的LocalInformation组中找到LocalMovies块。另一种方法，你可以在块工具条的查找框输入LocalMovies，让Popfly为你找到想要的块。

找到想要的块，将其由工具条拖放到设计界面。



点击扳手图标"放大"，查看此块支持的操作及它们的默认值。
操作描述了一个块可以完成的功能或任务，每一个操作可能有一个或多个输入（参数）来提供其运行所需要的信息，部分输入项有默认值，如果你不指定一个值，操作会使用默认。必须的输入项以粗体显示，并有*标示。

如果有多于一个操作可用，一个下拉框显示了一个当前块所有可用操作的列表。下拉框的下方是针对每一个操作的输入项列表。你即可以指定一个连接到当前块的（已连接块的名字会出现在来源列中）中的值或也可以在来源列选择"自定义"并在值列输入一个特定的值。

从下拉列表中选择GetTheatersAndMovies操作。

将数组列中默认的邮政编码换成你所在地区的邮政编码。

再次点击扳手（或OK按钮）关闭块并返回设计界面。

点击

查看此块产生的原始数据，当你点击运行时，Popfly调用了一个第三方Web服务提供的GetTheatersAndMovies操作，其根据你指定的邮政编码提供正在该地区上映的电影的数据。Popfly收集数据，并将你所在区域的电影院，及它们正在上映的电影显示为一个列表。



注意从技术上来讲这个应用并不是一个mashup。因为它只包含了一个由互联网获取原始数据并将其值输出的块，它没有使用其他的块来处理或显示数据据。

示例2：在表格中显示数据



在上一个例子中，LocalMovies块从一个第三方Web服务获取本地上映电影的数据，并将原始数据格式化为文本显示在浏览器窗口中。

Popfly提供了许多不同的块来显示数据：例如，你可能在表格中显示数据；你可能要用户选择一部电影然后找出所有正在上映这部电影的电影院的位置。你可以以旋转方式显示与每一部电影的标题相关的照片。

本示例介绍了怎样使用TableDisplay块显示原始电影数据。

假设你不知道有这样一个块存在，但是你知道你想把数据输出到表格，在块搜索框输入Table，你将找到所有与表格有关系的块。

继续示例1中未完的部分，按以下步骤在表格中显示数据：

将一个TableDisplay块拖放到设计界面上。

将LocalMovies块连接到它。

点击LoalMovies块上的扳手并像下图中显示的那样设置其属性。



再次点击

预览这个mashup。

当mashup运行的时候，注意出现的调试工具条。点击Debug/Console图标

来显示控制台窗口，其中包含了你的mashup运行时产生的实时活动，它记录了你的mashup中所有块被调用的操作及传入它们的值。当mashup不按你期待的方式运行时，调试工具是一个很有用的工具。再次点击调试图标关闭控制台窗口。

TableDisplay块显示了你所在地区上映的电影。示例输出如下：



TableDisplay块是使用Silverlight来显示信息的几个块之一，它支持部分用户接口特性。例如，点击第一行中任一个表头项，你可以将那列的值排序。

示例3：保存你的Mashup

点击mashup编辑器右上角的Save或Save As图标，你可以在任意时间保存你的工作。如果你希望其他人可以浏览你的mashup。点击Share，请确保在描述文本框中输入简介，这样其他用户可以了解你的mashup的作用。



接着示例2末尾的部分继续，按以下步骤保存mashup。

点击保存按钮。

给你的mashup输入一个名字，虽然Popfly允许你在mashup的名称中包含空格，如果你限制mashup的名字只包含大小写字符情况会更简单。mashup名称中每一个单词都以大写字母开头。

给你的mashup添加描述信息及标签。你可以用mashup的作用的关键词，或它使用的块的名称来标记你的mashup。



在你的项目页查找你保存的mashup。



你可以通过上方导航菜单中"My Stuff"菜单下"My Project"项打开所有你保存的项目，点击share可以允许你的mashup被其它Popfly用户来查看其构建，并可以让互联网上的任何人浏览。你也总是可以停止共享一个mashup，这样做将使其不再是公开的。

示例4：配置一个Mashup

配置一个mashup允许你改变任何块的输入而不必进入Mashup编辑器，点击每个块的扳手按钮，并指定新值。这是试验mashup行为的一种很好的方式。按以下步骤配置一个mashup。

进入你的项目页（My Stuff -> Project）

点击

来修改mashup的行为。

给LocalMovies块指定一个不同的邮政编码作为其输入。

点击

运行！查看mashup使用你刚指定的输入参数运行的结果。



如果你喜欢这些结果，你可以点击保存按钮并使用你的新值来保存这些mashup。

示例5：分享一个Mashup

你同样可以与其他Popfly用户分享mashup。按以下步骤进行：

进入你的项目页(My Stuff -> Projects)。

点击

，使用Share工具条指定怎样分享你的mashup。选项包括另存为一个Windows Gadget，嵌入Facebook，与Digg或Reddit(SNS)分享，或通过email。点击Link获得一个可以复制粘贴的mashup的URL。点击Embed获得一段可以在一个网站或博客中复制粘贴的HTML代码。



示例6：打开其他用户（分享）的Mashup

当其他用户分享了他们的mashup，你可以打开它们，配置它们，或"分解"它们，以查看它们是怎样构建的。按以下步骤打开其他用户分享的mashup。

进入你的项目页(My Stuff -> Projects)。

通过在查找框（位于页面右上部分）输入名称（或Professorpopfly标签）来查找Professor Popfly的LocalMovies Carousel mashup。



点击标题链接来查找更多关于这个mashup的信息及其作者。

运行这个mashup，在下拉列表选择一个影院来看它的作用。

在Professor Popfly's LocalMoviesCarousel mashup中，当用户选择了一个附近的影院，LocalMoviesCarousel使用微软Live图片搜索来查找与这个电影相关的一幅图片，并以旋转木马的方式显示这幅图片及相应电影的标题。



点击Edit This附近的"齿轮"图标

来编辑这个Mashup（并查看它是怎样构造的），下图展示了LocalMoviesCarousel mashup的组成。



不要害怕刚刚在第一课中就遇到这个有7个块的mashup。这个例子的目的是给你一个mashup可以处理来自不同数据源的数据的认识。这个mashup做了4件事。

在一个下来列表中显示一个电影院名称的列表。

显示一个由用户在下拉列表中选择的影院正在播放的电影的列表。

找到影院中播放的电影的图片。

将那些图片显示在一个"旋转木马"中。

下面是mashup怎样提供这些软件的解决方案。

要在下拉列表中显示影院名称的列表。
这个mashup以LocalMovies块开始，这个块获取一个指定邮政编码周围地区影院正在上映的电影。输出结果被送到Bentley_TextTools。Bentley_TextTools块有一个RemoveDuplicates操作可以用来去除由LocalMovies块获取的影院名称中的重复项。（就像我们在示例1看到的，LocalMovies块的输出随着它找到的每个电影重复一遍影院的名称）。没有重复项的影院名称的列表连接到用户输入块，并显示在一个下拉列表中，这样用户可以在其中选择一个。

要显示一个用户由下拉列表中选择的影院正在上映的电影的列表：
下一步要搜索所有LocalMovies块给出的电影并过滤出那些只在选择的影院上映的电影。ConditionBuilder块创建了一个检查条件来比较一个电影院名称（来自LocalMovies块）是否等于用户由用户输入块选择的电影院的名称。过滤块接受所有的本地电影信息，并找出那些符合选择的电影院的名称即符合ConditionBuilder块中指定的条件的电影。

要找出在影院播放的电影的图片：
Mashup搜索与每一个电影相关的一副恰当的图片（使用Live Image Search）。它由Filter块获取每个电影的名称。

要在"旋转木马"中显示那些图片：
Live Image Search返回一个图像URL的列表，它被连接到Carousel块（伴随着来自Filter块的相应的电影的名称），来获得一个有趣的Silverlight的动画显示。

如果你对它们好奇，你可以点击所有这些块的扳手来查看它们的操作及其使用的默认值。

注意：你可能注意到有些时候电影的名称不能正确的对应那些显示在"旋转木马"的电影的图片。这是Popfly中的一个已知问题。原因是Popfly获取图片的过程是异步的，所以Popfly不等待所有的图片都被加载而是直接显示它们。有时，电影图片由Live Image Search返回时的顺序与它们被请求时的顺序不同，一些情况下这就会引起一个电影标题与图片不匹配的情况。