HOME / Docs & Support / NetBeans 6.5

使用 Rails 构建 Flickr 应用

贡献者：Brian Leonard
2007 年 12 月 [修订号：V6.0-6]

翻译：Dave（NetBeans 中文社区成员）

本教程介绍如何创建一个搜索 Flickr 数据库的 Ruby on Rails 应用程序。

注意： 本教程需要直接连接Internet，如果您正在使用代理，则不会正常工作。

-	教程需求
-	获取 Flickr API Key
-	安装 Flickr 库
-	创建 Ruby on Rails 项目
-	在项目中添加样式
-	创建控制器
-	定义搜索方法
-	运行应用程序
-	改进用户体验

教程需求

本教程需要使用如下技术：

带有 Ruby 支持的 NetBeans IDE 6.0

获取 Flickr API Key

您必须有 API Key 才能使用 Flickr API。

打开 web 浏览器，访问 http://www.flickr.com/services/api/misc.api_keys.html。
点击“Apply for your key online now”。
按照步骤获取 Flickr Key。
复制 Flickr 生成的 API Key，并将其保存在文本文件中或其他方便的位置。

安装 Flickr 库

在“工具”菜单中选择“Ruby Gems”。
在“Ruby Gems”对话框中点击“New Gems”选项卡。
在“Search”字段中键入 flickr，然后按 Enter 键。
选择 flickr，然后点击“Install”。在“Installation Settings”对话框中点击“OK”。
确认收到成功的消息，然后关闭对话框。

创建 Ruby on Rails 项目

选择“文件”>“新建项目”。
在“类别”框中选择 Ruby，在“项目”框中选择 Ruby on Rails 应用程序，点击“下一步”。
在“项目名称”字段中键入 flickr，然后单击“完成”。
Flickr 库要求将 Flickr API Key 直接添加至其脚本中。您可以这样做，但下面介绍的方法让您不必如此亦可使用 Flickr 库。
在“项目”窗口中，展开“Configuration”节点，然后打开 environment.rb 文件。

将下列代码添加至 environment.rb 文件最后。确保将您的 Flickr API Key 输入到 MY_KEY 变量中。访问 Flickr API 时需要该 Key。

代码示例 1：添加 Flickr API Key

require 'rubygems'
require 'flickr'
MY_KEY='输入您的 Flicker API Key'
class Flickr
  alias old_initialize initialize
  def initialize(api_key=MY_KEY, email=nil, password=nil)
    puts "new_initialize " + MY_KEY
    old_initialize(api_key, email, password)
    @host="http://api.flickr.com"

    @activity_file='flickr_activity_cache.xml'
  end
end

从主菜单中，选择“文件”>“全部保存”。

在项目中添加样式

在“项目”窗口中，展开“Views”节点，右键点击“layouts”节点，然后选择“新建”->“RHTML File”。将文件命名为 application 并点击“完成”。

将 application.rhtml 中的代码替换成如下代码：

代码示例 2：application.rhtml 所需代码

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">

<html>
    <head>
    <title>Flickr</title>
      <%= javascript_include_tag :defaults %>
      <%= stylesheet_link_tag 'flickr' %>
    </head>

<body>
      <%= yield %>
</body>
</html>

展开“Public”节点，右键点击“sylesheets”，然后选择“新建”>“其他”。
在“新建文件”对话框中，设置“类别”为“其他”，“文件类型”为“层叠样式表”。点击“下一步”。
将文件命名为 flickr 并点击“完成”。
文件 flickr.css 会在编辑区打开。

将如下样式添加到 flickr.css 中：

代码示例 3：样式代码

body {
    background-color: #888;
    font-family: Lucida Grande;
    font-size: 11px;
    margin: 25px;
}

form {
    margin: 0;
    margin-bottom: 10px;
    background-color: rgb(222,231,236);
    border: 5px solid #333;
    padding: 25px;
}


fieldset {
    border: none;
}
 
#spinner {
    float: right;
    margin: 10px;
}

#photos img {
    border: 1px solid #000;
    width: 75px;
    height: 75px;
    margin: 5px;
}

创建控制器

右键点击“Controllers”节点，然后选择“Generate”。
在“Rails Generator”对话框中，“Name”字段输入 flickr，“Views”字段输入 index，然后点击“OK”。
该操作会生成文件 flickr_controller.rb，并将其在编辑区打开。
展开“Views”>“flickr”，然后打开 index.rhtml。

将 index.rhtml 中的代码替换成如下代码：

代码示例 4：index.rhtml 所需代码

<% form_remote_tag :url => {:action => 'search'}, :update => 'photos' do %>
    <fieldset>
        <label for="tags">Tags:</label>

        <%= text_field_tag 'tags' %>
        <%= submit_tag 'Find' %>
    </fieldset>

    <div id="photos"></div>
<% end %>

定义搜索方法

打开 flickr_controller.rb。

编缉代码，删除 index 方法，并将其替换成 search 方法，如下面粗体所示：

代码示例 5：代码 FlickrController 类

class FlickrController < ApplicationController

  def search
    flickr = Flickr.new

    if params[:tags].empty?
      render :text => '<h2>Please enter a search string&lt/h2>'
    else
      begin
        photos = flickr.photos(:tags => params[:tags], :per_page => '24')
        render :partial => 'photo', :collection => photos      
      rescue NoMethodError
        render :text => '<h2>No matching photos found</h2>'
      end
    end
  end

end

在“Views”节点中，右键点击“flickr”节点，然后选择“新建”->“RHTML File”。将文件命名为 _photo 并单击“完成”。

替换文件内容，使其仅包含如下一行：

<img class='photo' src="<%= photo.sizes[0]['source'] %>">

运行应用程序

此步配置环境使运行项目即启动应用程序。

在“Public”节点中，删除 index.html。
在“Configuration”节点中，打开 routes.rb。查找行：
```
# map.connect '', :controller => "welcome"
```
编缉该行，删除注释符号(#)，并将 welcome 改为 flickr。
点击工具栏中的“运行主项目”按钮启动 WEBrick 服务器，并打开浏览器，如下图所示。

图 1：flickr 应用程序
输入搜索字符串，例如 NetBeans，然后点击“Find”。加载图片需要几秒钟。

图 2：加载图片

改进用户体验

当您点击“Find”按钮时，操作是在后台执行，不会出现任何反馈。此步将添加一个简单的动画 gif 帮助解决该问题，并更改图片加载时的显示效果。

将此动画 gif 从浏览器保存到桌面文件。然后拖曳文件到 NetBeans IDE“项目”窗口中的“Public”>“images”节点下。

打开“Views”>“flickr”> index.rhtml。删除已有代码，并使用下面示例中给出的代码将其替换：

代码示例 6：index.rhtml 所需代码

<% form_remote_tag :url => {:action => 'search'}, :update => 'photos', 
    :complete => visual_effect(:blind_down, 'photos'),
    :before   => %(Element.show('spinner')),
    :success  => %(Element.hide('spinner')) do %>

    <%= image_tag 'spinner.gif', :id => 'spinner', :style => 'display: none' %>
    <fieldset>
        <label for="tags">Tags:</label>

        <%= text_field_tag 'tags' %>

        <%= submit_tag 'Find' %>
    </fieldset>
	
    <div id="photos" style="display: none"></div>

	
<% end %>