`

(转)在 Rails 上使用 Flickr

RailsRubyNetbeans应用服务器浏览器 
阅读更多
在 Rails 上使用 Flickr
Putting Flickr on Rails
 
在 Rails 上使用 Flickr
撰稿人：Brian Leonard
2007 年 6 月 [修订号：V6.0-3]
 
 
 
本教程介绍如何创建用于搜索 Flickr 数据库的 Ruby on Rails 应用程序。本教程用于支持 Ruby 的 NetBeans IDE 6.0 (M10)。
注意：本教程要求直接连接 Internet，如果使用代理，则无法正常工作。
内容
- 
- 
- 
- 
- 
- 
- 
本教程要求拥有以下资源：
l          标准开发包 (JDK) 6.0 版
您必须拥有 API 密钥才能使用 Flickr API。
  1. 使用浏览器访问 http://www.flickr.com/services/api/misc.api_keys.html。
  2. 单击 立即在线申请密钥。
  3. 遵循获取 Flickr 密钥的步骤。
  4. 复制 Flickr 生成的 API 密钥并保存在文本文件中或者其他方便的位置。
  1. 从 Tools 菜单中选择 Ruby Gems。
  2. 在Ruby Gems对话框中，单击 New Gems 选项卡。
  3. 在 Search 字段中键入flickr，然后按Enter。
  4. 选择 flickr，然后单击安装。在Gem Installation Settings对话框中单击OK。
  5. 确保获得安装成功的消息，然后关闭该对话框。
在此步骤中，您将了解如何创建 Ruby on Rails 应用程序以及一个用于搜索 Flickr 数据库的页面。
  1. 选择File > New Project。
  2. 在 Categories 字段中选择Ruby，在 Projects 字段中选择Ruby on Rails Application，然后单击 Next。
3.       在Project Name字段中键入Flickr，然后单击Finish。
在 Flickr 库中，应该将 Flickr API 密钥直接添加到脚本中。您可以通过下面的步骤中介绍的方法使用 Flickr 库，而不必直接对其进行操作。
4.       在Projects窗口中，展开Configuration节点，然后打开environment.rb。
5.       在environment.rb文件底部添加下面的代码。确保在MY_KEY变量中输入您的Flicker API 密钥。访问 Flickr API 时需要使用该密钥。
代码示例 1：添加 Flickr API 密钥
 
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
 
6.       展开Views节点，右键单击layouts节点，然后选择New->RHTML 文件。将文件命名为application，然后单击 Finish。
7.       在application.rhtml中添加下面的 <head> 标记和 <% =yield %> 标记（粗体显示的部分）：
代码示例 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>
 
  1. 展开Public节点，右键单击样式表，选择New > Other。在New File对话框中，将 Categories 设置为Other，将文件类型设置为Empty File。单击 Next。
  2. 将文件命名为 flickr.css，然后单击 Finish。
10.   为flickr.css添加下面的样式：
代码示例 3：样式代码
 
body {
background-color: #888;
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。在Rails Generator对话框的Name字段中键入flickr，在Views字段中键入index，然后单击OK。
  2. 展开 Views>flickr，然后打开 index.rhtml。
13.   使用下面的代码替换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.       展开Controllers节点，然后打开flickr_controller.rb。
2.       编辑代码：删除index方法，将其替换为粗体显示的search方法。
代码示例 5：代码FlickrController类
 
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.       仅使用下面的这行代码替换该文件的内容：
<img class='photo' src="<%= photo.sizes[0]['source'] %>">
在此部分您可以了解如何对环境进行配置，以便运行项目并启动应用程序。
1.    如果 WEBrick 服务器正在运行，应通过单击Output窗口中的红色 X 图标停止该服务器，如下图所示：

图 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按钮时，操作在后台进行，不会显示任何反馈。此时您可以添加一个简单的动画帮助解决此问题，并更改加载图像时的效果。
  1. 在浏览器中将动画  添加到桌面上的一个文件中。然后，将该文件拖动到 NetBeans IDE 的 Projects 窗口中的Public > images节点下。
分享到：
| (转)在Ubuntu中启用root帐户
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

Magicbox
Global site tag (gtag.js) - Google Analytics