Products Docs & Support Community

>> More NetBeans Ruby Documentation

Putting Flickr on Rails

June [Revision number: V6.0-3]    

This tutorial describes how to create a Ruby on Rails application that searches the Flickr database. This tutorial runs with NetBeans IDE 6.0 (M10) with Ruby support.

Note: This tutorial requires direct connection to the Internet and does not work if you are working behind a proxy.

Contents

Tutorial Requirements
Obtaining a Flickr API Key
Installing the Flickr Library
Creating the Ruby on Rails Project
Defining the Search Method
Running the Application
Improving the User Experience

Tutorial Requirements

This tutorial requires the following resources:

Obtaining a Flickr API Key

You must have an API key to make use of the Flickr API.

  1. In your web browser
  2. Click Apply for your key online now.
  3. Follow the steps for obtaining a Flickr key.
  4. Copy the API key that Flickr generates and save it in a text file or other convenient location.

Installing the Flickr Library

  1. From the Tools menu, choose Ruby Gems.
  2. In the Ruby Gems dialog box, click the New Gems tab.
  3. Type flickr in the Search field and press Enter.
  4. Select flickr, and then click Install. Click OK in the Gem Installation Settings dialog box.
  5. Make sure you get a success message, and then close the dialog boxes.

Creating the Ruby on Rails Project

In this step, you create the Ruby on Rails application and a page for searching the Flickr database.
  1. Choose File > New Project.
  2. Select Ruby in the Categories field and Ruby on Rails Application in the Projects field and click Next.
  3. Type Flickr in the Project Name field and click Finish.

    The Flickr library expects you to add your Flickr API Key directly to its script. You could do that, however, the approach described in the following steps enables you to use the Flickr library without touching it.
  4. In the Projects window, expand the Configuration node, then open environment.rb.
  5. Add the following code at the bottom of the environment.rb file. Be sure to enter your Flicker API Key in the MY_KEY variable. You need the key to access the Flickr APIs.

    Code Sample 1: Adding Your 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="..."
        @activity_file='flickr_activity_cache.xml'
      end
    end

  6. Expand the Views node, right-click the layouts node, and choose New -> RHTML file. Name the file application and click Finish.
  7. Add the following <head> tag and <% =yield %> tag (shown in bold) to application.rhtml:

    Code Sample 2: Code for 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>

  8. Expand the Public node, right-click stylesheets and choose New > Other. In the New File dialog box, set the Category to Other and the File Type to Empty File. Click Next.
  9. Name the file flickr.css and click Finish.
  10. Add the following styles to flickr.css:

    Code Sample 3: Style Code
    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; }

  11. Right-click the Controllers node and choose Generate. In the Rails Generator dialog box, type flickr in the Name field and index in the Views field, and then click OK.
  12. Expand Views > flickr and open index.rhtml.
  13. Replace the existing code in index.rhtml with the following code:

    Code Sample 4: Code for 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 %>

Defining the Search Method

  1. Expand the Controllers node and open flickr_controller.rb.
  2. Edit the code by deleting the index method and replacing it with the search method shown in bold:

    Code Sample 5: Code FlickrController Class
    class FlickrController < ApplicationController
      def search
        flickr = Flickr.new
        render :partial => 'photo', :collection =>
          flickr.photos(:tags => params[:tags], :per_page => '24')
      end
      
    end

  3. Under the Views node, right-click the flickr node and choose New -> RHTML file. Name the file _photo and click Finish.

  4. Replace the contents of the file so that the file includes the following line only:

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

Running the Application

Here you configure the environment so that running the project launches the application.
  1. If the WEBrick server is running, stop the server by clicking the red X icon in the Output window, as shown in the following figure:


    Figure 1: Stopping the WEBrick Server

  2. Expand the Public node and delete index.html.
  3. Under the Configuration node, open routes.rb and add the following code to the bottom of the file before the final end statement:

    map.connect "", :controller => 'flickr'
  4. Click the Run Main Project button in the toolbar to start the WEBrick server and launch the browser, as shown in the following figure.


    Figure 2: Flickr Application

  5. Enter a search string, such as NetBeans, and click Find. Give the images a couple of seconds to load.


    Figure 3: Loading Images

Improving the User Experience

When you click the Find button, there's no feedback that something's happening behind the scenes. Here you add a simple animated gif to help address this problem as well as change the effect of the images as they load.
  1. Save this animated gif from your browser to a file on your desktop. Then drag the file under the Public > images node in the Project window in the NetBeans IDE.
  2. Open Views > flickr > index.rhtml. Delete the existing code, and replace it with the code shown in the following sample:

    Code Sample 6: Code for 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. Run the project, then return to your browser and try another search string, such as JRuby.


    Figure 4: Adding Animation

    Now you see a simple animation to let you know the server is working on your request. When the images appear, they drop down like a set of blinds.

See Also:


>> More NetBeans Ruby Documentation