在 Rails 上使用 Flickr

最新推荐文章于 2024-07-27 06:13:26 发布

yanglilibaobao

最新推荐文章于 2024-07-27 06:13:26 发布

阅读量1.7k

点赞数

文章标签： rails netbeans ruby api search 服务器

本文链接：https://blog.csdn.net/yanglilibaobao/article/details/1699263

版权

Putting Flickr on Rails

http://www.netbeans.org/kb/60/flickr-on-rails.html

在 Rails 上使用 Flickr

撰稿人：Brian Leonard

2007 年 6 月 [修订号：V6.0-3]

本教程介绍如何创建用于搜索 Flickr 数据库的 Ruby on Rails 应用程序。本教程用于支持 Ruby 的 NetBeans IDE 6.0 (M10)。

注意：本教程要求直接连接 Internet，如果使用代理，则无法正常工作。

内容

-	教程要求
-	获取 Flickr API 密钥
-	安装 Flickr 库
-	创建 Ruby on Rails 项目
-	定义搜索方法
-	运行应用程序
-	改进用户体验

教程要求

本教程要求拥有以下资源：

l 标准开发包 (JDK) 6.0 版

l 支持 Ruby 的 NetBeans IDE 6.0 (M10)

获取 Flickr API 密钥

您必须拥有 API 密钥才能使用 Flickr API。

使用浏览器访问 http://www.flickr.com/services/api/misc.api_keys.html。
单击立即在线申请密钥。
遵循获取 Flickr 密钥的步骤。
复制 Flickr 生成的 API 密钥并保存在文本文件中或者其他方便的位置。

安装 Flickr 库

从 Tools 菜单中选择 Ruby Gems。
在 Ruby Gems 对话框中，单击 New Gems 选项卡。
在 Search 字段中键入 flickr，然后按 Enter。
选择 flickr，然后单击安装。在Gem Installation Settings 对话框中单击OK。
确保获得安装成功的消息，然后关闭该对话框。

创建 Ruby on Rails 项目

在此步骤中，您将了解如何创建 Ruby on Rails 应用程序以及一个用于搜索 Flickr 数据库的页面。

选择File > New Project。
在 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>

展开Public 节点，右键单击样式表，选择New > Other。在New File 对话框中，将 Categories 设置为 Other，将文件类型设置为 Empty File。单击 Next。
将文件命名为 flickr.css，然后单击 Finish。

10. 为 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。
展开 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 按钮时，操作在后台进行，不会显示任何反馈。此时您可以添加一个简单的动画帮助解决此问题，并更改加载图像时的效果。

在浏览器中将动画添加到桌面上的一个文件中。然后，将该文件拖动到 NetBeans IDE 的 Projects 窗口中的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')) %>

<%= 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_form_tag %>

3. 运行该项目，然后返回浏览器并尝试其他搜索字符串，例如 JRuby。

图 4：添加动画

现在您就可以看到一个简单的动画，让您知道服务器正在处理您的请求。图像显示时，它们会像风车一样旋转。

其他参考资料：

l 10 分钟创建 Ruby Weblog

l NetBeans Ruby 编辑

yanglilibaobao

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
在 Rails 上使用 Flickr

Putting Flickr on Railshttp://www.netbeans.org/kb/60/flickr-on-rails.html 在 Rails 上使用 Flickr撰稿人：Brian Leonard 2007 年 6 月 [修订号：V6.0-3]
复制链接

扫一扫