FeaturesPluginsDocs & SupportCommunityPartners

使用 Rails 构建 Flickr 应用

贡献者：Brian Leonard
2007 å¹´ 12 月 [修订å?·ï¼šV6.0-6]

本教程介ç»?如何创建一个æ?œç´¢ Flickr 数æ?®åº“çš„ Ruby on Rails 应用程åº?。

注æ„?： 本教程需è¦?直接连接Internet，如果您正在使用代ç?†ï¼Œåˆ™ä¸?会正常工作。

目录

-  教程需求
-  获å?– Flickr API Key
-  安装 Flickr 库
-  创建 Ruby on Rails 项目
-  在项目中添加样å¼?
-  创建控制器
-  定义æ?œç´¢æ–¹æ³•
-  è¿?行应用程åº?
-  改进用户体验
本页é?¢çš„内容适用于 NetBeans IDE 6.0

教程需求

本教程需è¦?使用如下技术：

获å?– Flickr API Key

您必须有 API Key æ‰?能使用 Flickr API。
  1. 打开 web æµ?览器，访问 http://www.flickr.com/services/api/misc.api_keys.html。
  2. 点击“Apply for your key online nowâ€?。
  3. 按照步骤获å?– Flickr Key。
  4. å¤?制 Flickr 生æˆ?的 API Key，并将其ä¿?存在文本文件中或其他方便的ä½?置。

安装 Flickr 库

  1. 在“工具â€?è?œå?•ä¸­é€‰æ‹©â€œRuby Gemsâ€?。
  2. 在“Ruby Gemsâ€?对è¯?框中点击“New Gemsâ€?选项å?¡ã€‚
  3. 在“Searchâ€?字段中键入 flickr，然å?ŽæŒ‰ Enter 键。
  4. 选择 flickr，然å?Žç‚¹å‡»â€œInstallâ€?。在“Installation Settingsâ€?对è¯?框中点击“OKâ€?。
  5. 确认收到æˆ?功的消æ?¯ï¼Œç„¶å?Žå…³é—­å¯¹è¯?框。

创建 Ruby on Rails 项目

  1. 选择“文件â€?>“新建项目â€?。
  2. 在“类别â€?框中选择 Ruby，在“项目â€?框中选择 Ruby on Rails 应用程åº?，点击“下一步â€?。

  3. 在“项目å??称â€?字段中键入 flickr，然å?Žå?•å‡»â€œå®Œæˆ?â€?。

    Flickr 库è¦?求将 Flickr API Key 直接添加至其脚本中。您å?¯ä»¥è¿™æ ·å?šï¼Œä½†ä¸‹é?¢ä»‹ç»?的方法让您ä¸?必如此亦å?¯ä½¿ç”¨ Flickr 库。
  4. 在“项目â€?窗å?£ä¸­ï¼Œå±•å¼€â€œConfigurationâ€?节点，然å?Žæ‰“å¼€ environment.rb 文件。

  5. 将下列代ç ?添加至 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

  6. 从主è?œå?•ä¸­ï¼Œé€‰æ‹©â€œæ–‡ä»¶â€?>“全部ä¿?存â€?。

在项目中添加样å¼?

  1. 在“项目â€?窗å?£ä¸­ï¼Œå±•å¼€â€œViewsâ€?节点，å?³é”®ç‚¹å‡»â€œlayoutsâ€?节点，然å?Žé€‰æ‹©â€œæ–°å»ºâ€?->“RHTML Fileâ€?。将文件命å??为 application 并点击“完æˆ?â€?。

  2. 将 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>

  3. 展开“Publicâ€?节点，å?³é”®ç‚¹å‡»â€œsylesheetsâ€?，然å?Žé€‰æ‹©â€œæ–°å»ºâ€?>“其他â€?。
  4. 在“新建文件â€?对è¯?框中，设置“类别â€?为“其他â€?，“文件类型â€?为“层å? æ ·å¼?表â€?。点击“下一步â€?。

  5. 将文件命å??为 flickr 并点击“完æˆ?â€?。

    文件 flickr.css 会在编辑区打开。

  6. 将如下样å¼?添加到 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;
}

创建控制器

  1. å?³é”®ç‚¹å‡»â€œControllersâ€?节点，然å?Žé€‰æ‹©â€œGenerateâ€?。

  2. 在“Rails Generatorâ€?对è¯?框中，“Nameâ€?字段输入 flickr，“Viewsâ€?字段输入 index，然å?Žç‚¹å‡»â€œOKâ€?。

    该æ“?作会生æˆ?文件 flickr_controller.rb，并将其在编辑区打开。
  3. 展开“Viewsâ€?>“flickrâ€?，然å?Žæ‰“å¼€ index.rhtml。

  4. 将 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 %>

定义æ?œç´¢æ–¹æ³•

  1. 打开 flickr_controller.rb。

  2. 编缉代ç ?，删除 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

  3. 在“Viewsâ€?节点中，å?³é”®ç‚¹å‡»â€œflickrâ€?节点，然å?Žé€‰æ‹©â€œæ–°å»ºâ€?->“RHTML Fileâ€?。将文件命å??为 _photo 并å?•å‡»â€œå®Œæˆ?â€?。

  4. 替æ?¢æ–‡ä»¶å†…容，使其仅包å?«å¦‚下一行：

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

è¿?行应用程åº?

此步é…?置环境使è¿?行项目å?³å?¯åŠ¨åº”用程åº?。
  1. 在“Publicâ€?节点中，删除 index.html。

  2. 在“Configurationâ€?节点中，打开 routes.rb。查找行：

    # map.connect '', :controller => "welcome"
  3. 编缉该行，删除注释符å?·(#)，并将 welcome 改为 flickr。

  4. 点击工具æ ?中的“è¿?行主项目â€?按钮å?¯åŠ¨ WEBrick æœ?务器，并打开æµ?览器，如下图所示。

    图 1：flickr 应用程åº?

    图 1：flickr 应用程åº?

  5. 输入æ?œç´¢å­—符串，例如 NetBeans，然å?Žç‚¹å‡»â€œFindâ€?。加载图片需è¦?几秒钟。

    图 2：加载图片

    图 2：加载图片

改进用户体验

当您点击“Findâ€?按钮时，æ“?作是在å?Žå?°æ‰§è¡Œï¼Œä¸?会出现任何å??馈。此步将添加一个简å?•çš„动画 gif 帮助解决该问题，并更改图片加载时的显示效果。
  1. 将此动画 gif 从æµ?览器ä¿?存到桌é?¢æ–‡ä»¶ã€‚然å?Žæ‹–曳文件到 NetBeans IDE“项目â€?窗å?£ä¸­çš„“Publicâ€?>“imagesâ€?节点下。

  2. 打开“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 %>

  3. 从主è?œå?•ä¸­ï¼Œé€‰æ‹©â€œæ–‡ä»¶â€?>“全部ä¿?存â€?。刷新æµ?览器，然å?Žå°?试其他的æ?œç´¢å­—符串，例如 JRuby。

    图 3：添加动画

    图 3：添加动画

    现在您å?¯ä»¥çœ‹åˆ°ä¸€ä¸ªç®€å?•çš„动画，让您了解æœ?务器正在处ç?†æ‚¨çš„请求。而当图片出现时，好åƒ?拉下一组百å?¶çª—扇的感觉。

更多内容



>> 更多 NetBeans Ruby 文档


Bookmark this page

del.icio.us furl simpy slashdot technorati digg
Companion
Projects: 		MySQL Database Server   Open JDK: an Open SourceJDK   GlassFish Community: an Open Source Application Server    Mobile & Embedded Community    Open Solaris   java.net - The Source for Java Technology Collaboration   Open ESB - The Open Enterprise Service Bus Powered by