Flickr在Rails中的应用
Contributedby Brian Leonard, maintained by Gail Chappell
October2007 [Revision number: V6.0-5]
本教程将描述如何创建一个搜索Flickr数据库的Rubyon Rails应用程序。
注意：本教程需要直接连接Internet，如果你正在用代理，则会看不到效果。
内容：
- 教程的先决条件
- 获取Flickr API的KEY
- 安装Flickr
- 新建Ruby on Rails项目
- 添加CSS到项目
- 创建控制器（Controller）
- 定义搜索方法
- 运行应用程序
- 加强用户体验
教程的先决条件
本教程使用了以下技术:
获取 FlickrAPI Key
你必须有一个APIKey来使用FlickrAPI。
1.打开浏览器，连接到http://www.flickr.com/services/api/misc.api_keys.html
2.点击Apply现在在线获取你的Key（译者注：前提是你要用Yahoo的帐号，如果没有就注册一个）。
3.按照以下步骤点击，获取一个Flickr Key。
4.复制Flickr生成的Key，并把它保存到一个正文文件或其他方便的地方。
安装Flickr库
1.从Tool菜单中选择Ruby Gems。
2.在RubyGems对话框中点击New Gems。
3.在Search域中输入flickr并按回车键。
4.选择flickr，然后点击Install。在Gem安装设置的对话框点击OK。
5.确认你收到成功的消息，然后关闭对话框
新建Ruby on Rails项目
1.选择File -> New Project。
2.在分类栏中选择Ruby，并在Projects栏中选择Ruby on Rails 应用程序，点击Next。
3.在Project Name栏中输入Flickr并点击Finish。
Flickr库需要你直接把FlickrAPI Key添加到它的脚本中。然而下面所描述的方法可以使你不用接触FlickrAPI Key就可以使用Flickr库。
4.在Project窗口展开Configuration节点，打开environment.rb文件。
5.把下面的代码添加到environment.rb文件的最底端。必须把你的Flickr API Key键入到MY_KEY变量中。你需要这个Key访问这些Flickr API。
代码示例1：加入你的Flickr API KEY
require 'rubygems'
require 'flickr'
MY_KEY='Enter your 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
增加样式到项目
1.展开Views节点，右击layouts节点，并选择New -> RHTML file。命名这个文件为application，然后点击Finish。
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节点，右击stylesheets，并选择New -> Other。在那New File的对话框中把这个Category设置到Other中，并把File Type设置到 Cascading Style Sheet(CSS)。点击Next。
4.命名这个文件为flickr，并点击Finish。
5.把下面的CSS添加到flickr.css中：
代码示例3：CSS代码
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;
}
创建控制器（Controller）
1.右击Controllers节点，并选择Generate。 在Rail Generator对话框中的Name域中，键入flickr，并在Views域中键入index，然后点击OK。
2.本行为创建flickr_controller.rb文件，并在编辑区域中打开此文件。
3.展开Views->flickr，并打开index.rhtml。
4.将下面的代码替换index.rhtml中已有的代码：
代码示例4：index.rhtml代码
<%= form_remote_tag :url => {:action => 'search'}, :update => 'photos' %>
<fieldset>
<label for="tags">Tags:</label>
<%= text_field_tag 'tags' %>
<%= submit_tag 'Find' %>
</fieldset>
<div id="photos"></div>
<%= end_form_tag %>
定义搜索方法
1.打开flickr_controller.rb。
2.通过删除index方法编辑这段代码，并用下面代码的粗体search方法代替它：
代码示例5：
class FlickrController < ApplicationController
def search
flickr = Flickr.new
render :partial => 'photo', :collection =>
flickr.photos(:tags => params[:tags], :per_page => '24')
end
end
3.在Views节点下，右击flickr节点并选择New ->RHTML。命名这个文件为_photo，点击Finish。
4.替换本文件的内容，以使本文件只含有下面那一行:
<imgclass='photo' src="<%= photo。sizes[0]['source']%>">
运行应用程序
在这里你将配置环境以使正在运行的这个项目开始本应用程序。
1.如果WEBrick服务器正在运行，点击Output窗口中红X(如图)来停止WEBrick服务器：
图 1:停止WEBrick服务器
2.展开Public节点，并删除index.html。
3.在Configuration节点下，打开routes.rb文件，并加入以下的代码倒文件底部的最后一个end语句之前：
map.connect "", :controller => 'flickr'
4.点击工具栏中的Run Main Project来启动WEBrick服务器，如下图所示。
图 2:Flickr 应用程序
5.输入一个查找字符串，如NetBeans，并点击Find。给这些图片几秒钟来载入。
图 3:载入的图片
加强用户的体验
当你点击Find按钮时，没有任何反馈来表明本操作在做一些事情。在这里你现加入一张简单的动画Gif到help来解决这个问题，并改变载入图片的效果。
1.在你的浏览器上保存此Gif动画文件到你桌面的一个文件中。然后把它拖到NetBeans IDE的Project窗口中的Public>images节点。
2.展开Views >flickr> index.rhtml。删除原有的代码， 并替换成下面示例中的代码：
3.在主菜单中，选择File -> Save All。刷新你的浏览器，并输入另一个查找字符串，如JRuby。
图 4:加入动画
现在你看到一个简单的动画，它使你了解到本服务器正在按你的要求工作。当这些图片出现时，它们就像一组盲人一样顺着向下移动。
下几步
[
本帖最后由 maninred 于 2007-11-8 05:26 编辑 ]
