使用Flash Builder 4和Flex 4 SDK构建Flickr浏览器

tech2023-12-14 80

Flex 4 introduces a boatload of new features, and today we’ll take a look at some of the latest architectural changes that make component development and skinning much easier. To start with, you’ll need to download the Flash Builder Trial. This will give you the Flex 4 SDK as well. Flash Builder, while still in beta, has a number of powerful features for developers and is already a step forward from Flex Builder.

Flex 4引入了许多新功能，今天，我们将看一些使组件开发和蒙皮变得更加容易的最新体系结构更改。首先，您需要下载Flash Builder试用版。这也将为您提供Flex 4 SDK。 Flash Builder仍处于测试阶段，它为开发人员提供了许多强大的功能，并且已经是Flex Builder的一大进步。

You’ll also need Flash Player 10, and for development purposes it should be the debugging version. To use the Flickr API you’ll want an API key, which you can then import into Flash Builder.

您还需要Flash Player 10 ，并且出于开发目的，它应该是调试版本。要使用Flickr API，您需要一个API密钥，然后可以将其导入Flash Builder。

This article will assume some familiarity with Flex and ActionScript in general, but it’s unnecessary to be particularly advanced to benefit from it. By the end, you’ll be able to make Flex talk to Flickr’s API, download and display images, and do some basic skinning in Flex 4. You can download all the finished code for this project as a Flash Builder project archive, which you can then import into Flash Builder.

总体上，本文将假定您对Flex和ActionScript有所了解，但是不必特别先进就可以从中受益。到最后，您将能够使Flex与Flickr的API对话，下载并显示图像，并在Flex 4中进行一些基本的外观设计。您可以将该项目的所有完成的代码作为Flash Builder项目档案下载，然后可以导入Flash Builder。

And make sure to take the quiz at the end to test your developer credentials.

并确保在最后进行测验以测试您的开发人员凭据。

AS3库设置 (AS3 Library Setup)

The granddaddy of all image-sharing services on the Internet is Flickr, and making mashups using its public API has become like a rite of passage. In this article we’ll plumb the depths of Flickr’s enormous library of images, which are licensed under the Creative Commons 2.0 license, allowing you to use them freely provided you attribute them. This makes Flickr a fabulous resource for web developers and designers in particular, so our project will be a tool to help find and browse these images.

互联网上所有图像共享服务的祖父都是Flickr，使用其公共API进行混搭已成为一种习惯。在本文中，我们将深入研究Flickr庞大的图像库的深度，该库已根据Creative Commons 2.0许可获得许可，允许您自由使用它们(前提是您赋予了这些属性)。这使得Flickr尤其是Web开发人员和设计师的宝贵资源，因此我们的项目将成为帮助查找和浏览这些图像的工具。

We begin with the ActionScript 3 Flickr API library, written by the engineers at Adobe. It’s freely available, as is the AS3 Core Library upon which it depends. We’ll use both in this project, so download them once you’ve installed Flash Builder.

我们从由Adobe的工程师编写的ActionScript 3 Flickr API库开始。它是免费的，它所依赖的AS3核心库也是免费的。我们将在本项目中同时使用这两种工具，因此，在安装Flash Builder之后，请下载它们。

Open the archive containing the AS3 Core Library, and inside the lib directory you’ll find as3corelib.swc. Copy this file to the libs directory of your Flash Builder project, and Flash Builder will do the rest.

打开包含AS3 Core Library的档案，在lib目录中您将找到as3corelib.swc 。将此文件复制到Flash Builder项目的libs目录中，其余时间由Flash Builder完成。

Next open the archive for the Flickr library. There is an swc file contained within, but as of our last check it was compiled for Flex 2, so we’ll instead drop the source code into our project. Open the src directory from the archive and copy the com directory you find inside. Drop it into the src directory of your Flash Builder project, then click the Project menu in Flash Builder and choose Clean…. This will ensure that the new code and libraries are picked up by the compiler.

接下来，打开Flickr库的存档。其中包含一个swc文件，但是截至上次检查时，它已针对Flex 2进行了编译，因此我们将源代码放入我们的项目中。从档案中打开src目录，然后复制您在其中找到的com目录。将其放入Flash Builder项目的src目录中，然后单击Flash Builder中的“ 项目”菜单，然后选择“ 清理…” 。这将确保编译器选择新的代码和库。

从Flickr API检索数据 (Retrieving Data from the Flickr API)

Our first task is to load the Flickr API libraries and connect to the API itself. In your main MXML file, modify your <s:Application> tag to look like this:

我们的首要任务是加载Flickr API库并连接到API本身。在您的主要MXML文件中，将您的<s:Application>标记修改为如下所示：

<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" xmlns:mx="library://ns.adobe.com/flex/halo" minWidth="1024" minHeight="768" xmlns:flickr="com.adobe.webapis.flickr.*">

Below that, add a script block and enter the following statements:

在其下，添加一个script块并输入以下语句：

import com.adobe.webapis.flickr.events.FlickrResultEvent;import com.adobe.webapis.flickr.FlickrService;import com.adobe.webapis.flickr.PagedPhotoList;private static const FLICKR_API_KEY:String = "nnnnnnnnnnnnnnnnnnnnnnnnnnnnnn"; //Your Flickr API keyprivate static const COMMONS_LICENSE_ID:Number = 2;private static const MAX_RETURNED_RECORDS:Number = 50;public var flickrService:FlickrService = new FlickrService(FLICKR_API_KEY);

The above code contains import statements for the Flickr API classes we’ll need, a few constant definitions, and the instantiation of a new FlickrService object that we’ll use to make all our Flickr API connections. Now we’re ready to begin. Create the following function and set it to be called on the application creationComplete event:

上面的代码包含我们需要的Flickr API类的导入语句，一些常量定义，以及将用于建立所有Flickr API连接的新FlickrService对象的实例化。现在我们准备开始。创建以下函数并将其设置为在应用程序creationComplete事件上调用：

private function onComplete() : void { flickrService.addEventListener(FlickrResultEvent.PHOTOS_SEARCH, onSearchResult);} <s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" xmlns:mx="library://ns.adobe.com/flex/halo" minWidth="1024" minHeight="768" xmlns:flickr="com.adobe.webapis.flickr.*" creationComplete="onComplete()">

When we initialized the variable flickrService and instantiated the FlickrService object, we made a remote call to Flickr itself, passing in our API key to make an authenticated link. We can now use that service to make requests, but before we do we set up a listener in the onComplete function to act upon the results of a search.

当我们初始化变量flickrService并实例化FlickrService对象时，我们对Flickr本身进行了远程调用，传递了API密钥以建立经过身份验证的链接。现在，我们可以使用该服务发出请求，但是在执行此操作之前，我们先在onComplete函数中设置一个侦听器，以根据搜索结果进行操作。

Now that we have that in place we need the search itself. To allow the user to enter a search query, we’ll add a TextInput element and search button beneath our script block like so:

现在我们已经准备好了，我们需要搜索本身。为了允许用户输入搜索查询，我们将在脚本块下方添加一个TextInput元素和搜索按钮，如下所示：

<s:HGroup width="260" height="27" textAlign="center" x="68" y="89"> <s:Label text="Search" color="0xFFFFFF"/> <s:TextInput id="tags"/> <s:Button name="searchBtn" label="Search" click="searchBtnClick(event)"/></s:HGroup>

Note the <s:HGroup> tag. In Flex 3 and previous versions, we’d have used an <mx:HBox> tag, but now we can use the group tags instead, which have less overhead than the HBox and VBox containers. The search button also contains a call to a new function, searchBtnClick, which is where we’ll put the search code. Add this function to your script block:

注意<s:HGroup>标记。在Flex 3和早期版本中，我们使用了<mx:HBox>标记，但是现在我们可以使用group标记了，它们的开销比HBox和VBox容器少。搜索按钮还包含对新功能searchBtnClick ，这是我们放置搜索代码的地方。将此功能添加到脚本块：

private function searchBtnClick(event:MouseEvent) : void { flickrService.photos.search("", this.tags.text, "any", "", null, null, null, null, COMMONS_LICENSE_ID, "owner_name", MAX_RETURNED_RECORDS); }

For anyone who’s wondering, the odd layout to this piece of code, where it puts each parameter on a separate line, is simply for ease of reading and editing. The layout actually has no effect on the working of the code.

对于任何想知道的人来说，这段代码的奇怪布局(将每个参数放在单独的行中)只是为了易于阅读和编辑。布局实际上对代码的工作没有影响。

Okay, here we make the first real request to the Flickr API. Using the photos.search method, we send a number of values that essentially say “look for images under the Creative Commons 2.0 license whose tags match our search query.” The MAX_RETURNED_RECORDS parameter is used to limit the number of items returned in one hit. For more detailed information on the API and all its methods, please do check out the API Documentation.

好的，我们在这里向Flickr API发出第一个真正的请求。使用photos.search方法，我们发送了许多值，这些值实际上表示“在知识共享2.0许可下查找标签与我们的搜索查询匹配的图像”。 MAX_RETURNED_RECORDS参数用于限制MAX_RETURNED_RECORDS返回的项目数。有关API及其所有方法的详细信息，请查阅API文档。

For this to work we’ll need the receiving function. We previously set up an event listener to call this function whenever we have the results of a search query to act upon. Add the following to your code:

为此，我们需要接收功能。以前，我们设置了事件侦听器，以便在要执行搜索查询的结果时调用此函数。将以下内容添加到您的代码中：

private function onSearchResult(event:FlickrResultEvent) : void { if (event.success) { var resultsList:PagedPhotoList = event.data.photos; photos = new ArrayCollection( resultsList.photos ); } else { Alert.show("Flickr search error: " + event.data.error); } }

The FlickrResultEvent has everything we need tidily built into it, including a handy success property to indicate success, as you can see on the first line of the function. In our case, we check this property and simply show an error message, including the error information sent back from Flickr. If the transaction is a success, we create a PagedPhotoList object from the XML data we receive from Flickr, and use it to generate an ArrayCollection that we can bind to.

FlickrResultEvent包含了我们需要整齐地构建的所有内容，包括一个方便的成功属性以指示成功，如您在函数的第一行所看到的。在我们的例子中，我们检查此属性并仅显示错误消息，包括从Flickr发送回的错误信息。如果交易成功，我们将根据从Flickr接收的XML数据创建一个PagedPhotoList对象，并使用该对象生成一个我们可以绑定到的ArrayCollection 。

At this point, your application should compile and run with no errors. If you were to expose the contents of event.data.photos, you’d see an XML packet that looked similar to this (taken from the Flickr API documentation on flickr.photos.search):

在这一点上，您的应用程序应编译并运行没有错误。如果要公开event.data.photos的内容，则会看到一个与此类似的XML数据包(摘自flickr.photos.search上的Flickr API文档)：

We’ve also added an extra parameter to our search; sending "owner_name" tells the API to send the full name of the owner of the photograph, so we can use it for attribution.

我们还在搜索中添加了一个额外的参数；发送"owner_name"告诉API发送照片所有者的全名，因此我们可以将其用于归因。

显示清单 (Displaying Lists)

Now that we have some data coming back from the Flickr API, we need a way to display it. What we’re interested in are the photos themselves, so what better than to display a list of the thumbnails? In Flex 3 we might have used a TileList for this, but that class has been replaced with the very handy class named List; we can use List to recreate the TileList functionality, but with more options and better performance. Add a List to your code now, below the search button:

现在，我们有一些来自Flickr API的数据，我们需要一种显示它的方法。我们感兴趣的是照片本身，还有什么比显示缩略图列表更好的呢？在Flex 3中，我们可能为此使用了TileList ，但是该类已被名为List的非常方便的类替换；我们可以使用List重新创建TileList功能，但具有更多选项和更好的性能。现在，在搜索按钮下方，将List添加到您的代码中：

<s:List id="imageDisplay" dataProvider="{photos}" width="530" height="400" x="58" y="124"> <s:layout> <s:TileLayout requestedColumnCount="5" requestedRowCount="8" horizontalGap="2" verticalGap="2"/> </s:layout> <s:itemRenderer> <fx:Component> <mx:Image source="{'http://static.flickr.com/' + data.server + '/' + data.id + '_' + data.secret + '_t.jpg'}" height="100" width="100" /> </fx:Component> </s:itemRenderer> </s:List>

We achieve the old TileList functionality by specifying a special layout class TileLayout, and it’s to this class we give the parameters of the layout, such as the horizontal gap to keep between each item in the list.

我们通过指定特殊的布局类TileLayout来实现旧的TileList功能，并且为此类提供了布局的参数，例如要保留在列表中每个项目之间的水平间距。

We’re using an inline item renderer, which simply pulls the image thumbnail in and displays it. The string you see being assembled within the Image element’s source attribute is the proper URL for the given image in the list. The addition of _t.jpg means we link to the thumbnail from Flickr, instead of the full image.

我们使用的是嵌入式项目渲染器，它只是将图像缩略图拉入并显示出来。您看到在Image元素的source属性中组合的字符串是列表中给定图像的正确URL。 _t.jpg的添加意味着我们链接到Flickr的缩略图，而不是整个图像。

If you compile and run your app, enter a search term like monkey, and click the search button, you’ll see images appearing inside your List box. It may take a few seconds to make the transaction happen, but once it’s finished we see a list of images retrieved from Flickr that match our criteria: they use the tag monkey and only are licensed with a Creative Commons 2.0 license.

如果编译并运行您的应用程序，请输入诸如monkey的搜索词，然后单击搜索按钮，您会看到图像出现在“ List框中。进行交易可能需要几秒钟的时间，但是一旦完成，我们就会看到从Flickr检索到的符合我们条件的图像列表：它们使用标记monkey并且仅获得Creative Commons 2.0许可。

翻译自: https://www.sitepoint.com/flickr-browser-flex/

相关资源：jdk-8u281-windows-x64.exe

最新回复(0)