Skip to main content

Building a Ruby Sample for NetBeans

Posted by bleonard on March 26, 2007 at 3:26 PM PDT

We're in the process of creating some sample applications to ship with the NetBeans Ruby module, one of which will be based on the screencast, Putting Flickr on Rails. You can just download and run the sample project (you'll have to set your Flickr API Key), or build it from scratch as documented here.

Setting Things Up

  1. Download and install NetBeans 6.0 M7 or greater.
  2. Install the Ruby module from the update center (found in the Features folder. Many dependant modules will come along). The Ruby module requires a restart of the IDE.
  3. Apply for a Flickr API Key which you'll need to access the Flickr APIs.
  4. Get the Flickr library. Unless you've added gem to your path, browse to its location in your user directory and run gem install -r flickr.




Create the Search Dialog

In this step will create the Ruby on Rails application and a page for searching the Flickr database by tag.

  1. Create a new Ruby on Rails application named Flickr.
  2. The Flickr library expects you to add your Flickr API Key directly to its script. You could do that, however the approach here allows us to use the Flickr library without touching it. Open environment.rb and add the following to the bottom. Remember to enter your Flicker 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
  3. Right-click the Views -> layouts folder and select New -> Empty RHTML (Embedded Ruby) file. Name the file application.
  4. Add the following HTML:



    <html>
        <head>
            <title>Flickr</title>
            <%= javascript_include_tag :defaults %>
            <%= stylesheet_link_tag 'flickr' %>
        </head>
        <body>
            <%= yield %>
        </body>
    </html>
  5. Right-click the Public -> stylesheets folder and select New -> File/Folder. Then select XML -> Cascading Style Sheet. Name if flickr. Add the following styles:



    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;
    }
  6. Right-click the Controllers node and select Generate. Set the name to flickr and the Views to index. Put the following in 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 %

Pause to Test

Here we will configure the environment so that running the project launches our application:

  1. Stop the WEBrick server by clicking the red in the Output window:




  2. Delete index.html from Public.
  3. Open routes.rb and add the following to the bottom of the file:



    map.connect "", :controller => 'flickr'
  4. Press F6 to start WEBRick and launch the application.




Define the Search Method

  1.  Switch to the FlickrController class and add the following:



    class FlickrController < ApplicationController
      def search
        flickr = Flickr.new
        render :partial => 'photo', :collection =>
          flickr.photos(:tags => params[:tags], :per_page => '24')
      end
    end
  2. Right-click the Views -> flickr folder and select New -> Empty RHTML (Embedded Ruby) file. Name the file _photo and replace its contents with the following:



    <img class='photo' src="<%= photo.sizes[0]['source'] %>">
  3. Return to your browser and enter a search string (give the images a couple of seconds to load):



Improve The User Experience

When you click find, there's no feedback that something's happening behind the scenes. We'll add a simple animated gif to help address this as well as change the effect of the images loading.

  1. Drag this animated gif to your Public -> images folder.
  2. Modify index.rhtml as follows (the parts in bold were added)



    <%= 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. Return to your browser and try another search string.







    Now you get a simple animation to let you know the server is working on your request and when the images do appear, they drop down like a set of blinds.
Related Topics >>