使用 Rails 构建 Flickr 应用
源地址：http://tech.ddvip.com/2008-12/1230185531102848.html
教程需求
本教程需要使用如下技术：
带有 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</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 应用程序
使用 Rails 构建 Flickr 应用
输入搜索字符串，例如 NetBeans，然后点击“Find”。加载图片需要几秒钟。
图 2：加载图片
使用 Rails 构建 Flickr 应用
改进用户体验
当您点击“Find”按钮时，操作是在后台执行，不会出现任何反馈。此步将添加一个简单的动画 gif 帮助解决该问题，并更改图片加载时的显示效果。
将此动画 gif 使用 Rails 构建 Flickr 应用 从浏览器保存到桌面文件。然后拖曳文件到 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 %>
从主菜单中，选择“文件”>“全部保存”。刷新浏览器，然后尝试其他的搜索字符串，例如 JRuby。
图 3：添加动画
使用 Rails 构建 Flickr 应用
现在您可以看到一个简单的动画，让您了解服务器正在处理您的请求。而当图片出现时，好像拉下一组百叶窗扇的感觉。
教程需求
本教程需要使用如下技术：
带有 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</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 应用程序
使用 Rails 构建 Flickr 应用
输入搜索字符串，例如 NetBeans，然后点击“Find”。加载图片需要几秒钟。
图 2：加载图片
使用 Rails 构建 Flickr 应用
改进用户体验
当您点击“Find”按钮时，操作是在后台执行，不会出现任何反馈。此步将添加一个简单的动画 gif 帮助解决该问题，并更改图片加载时的显示效果。
将此动画 gif 使用 Rails 构建 Flickr 应用 从浏览器保存到桌面文件。然后拖曳文件到 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 %>
从主菜单中，选择“文件”>“全部保存”。刷新浏览器，然后尝试其他的搜索字符串，例如 JRuby。
图 3：添加动画
使用 Rails 构建 Flickr 应用
现在您可以看到一个简单的动画，让您了解服务器正在处理您的请求。而当图片出现时，好像拉下一组百叶窗扇的感觉。