The Model

For the purpose of this short example, I’ll consider a table with only one field other than ‘id’. Here is the migration for it:

class CreatePersons < ActiveRecord::Migration
  def self.up
    create_table :persons do |t|
     t.column :name, :string, :null=>false
    end
 end
 
 def self.down
  drop_table :persons
 end
end

The View

In the view on the ‘index’ page the table is rendered as:

<h1>List of Persons</h1>
<div id="error"  style="display:none;" >&nbsp;</div>
<div id="notice”  style="display:none;" >&amp;nbsp;</div>
<table id="person_list">
  <tr>
    <td width="300px"><strong>Name</strong></td>
  </tr>
  <%= render :partial => ‘person’, :collection=>@persons %>
</table>
<%=link_to_function 'New Person’, "Element.show('new_person')"%>
<div id="new_person" style="display:none;">
<% form_remote_tag(:url => {:action => 'create'},
:html => {:id => 'person_form'}) do %>
<strong>Name:</strong><br/><%= text_field "person", "name" %>
<%= submit_tag "Save"%>
<%end%>
</div>

The partial contains the following:

<tr>
  <td><%= person.name%></td>
</tr>

Basically the controller returns a list of all persons and this is looped and displayed through the partial. There is also a hidden form that submits a new name to be added to the database through Ajax. The form is made visible on clicking the “New Person” link and submits to the “create” method in the controller.

The Controller

The “create” method does the following:

1
2
3
4
5
6
7
8
9
10
11

def create
 @person = Person.new(params[:person])
 if @person.save
  flash[:notice] = 'A Person was added successfully to the database'
 else
  render :update do |page|
   page[:error].show
   page.insert_html :bottom, :error, error_messages_for(:person)
  end
 end
end

Here,  first the person object is created from the request parameters. Then the values are added to the database. If they are successfully added, then a message is added to the flash. If there are any errors, then we extract any errors and display them on the page. This is done via the really cool feature of Rails called RJS. RJS lets us generate JavaScript on the fly by only writing ruby code. In this example, line 7 selects the error div and makes it visible. Line 8 inserts the error messages into the error div. The resulting JavaScript is executed on the page. The end result – the errors are displayed in the error div in case of errors.

RJS Magic

Sweet? Well this only the tip of the iceberg. I’ll take things a wee bit further and show you what happens when we add a little RJS template called “create.rjs”. The code for this template is shown below:

# Hide Form & Error
page[:person_name].text=""
page[:new_person].hide
page[:error].hide
 
# Show Notice and add disappearing effect
page[:notice].show
page.insert_html :bottom, :notice, flash[:notice]
page.delay(5) {page[:notice].visual_effect :fade}
 
# Add row to table
page.insert_html :bottom, :person_list, :partial=>'person', :object=>@person

Well here is how it works. The first three lines basically set the text field on the form to blank, hide the form and any visible errors (You can even overwrite the error div contents so that they contain no errors on successful saves). Next we show the notice div and add the notice message to the div. Now here is the really cool part, the next line adds a Fade effect via the script.aculo.us animation framework and sets the delay to 5 seconds for this effect. This shows the notice message for 5 seconds after which the message fades out. What’s really cool about this, is that it’s just one line of Ruby code and no messy JavaScript in sight (Of course the last line updates the table with the newly added person entry).

I think this example goes a long way in showing how productive Rails is. And this is just a fraction of what you could do with RJS and Rails, while developing applications that use a lot of Ajax.

I have been working on this small Rails based dashboard (code named : Fx Dashboard) the past few months. The basic idea that I had was to create some kind of a dashboard where I could collate all relevant financial information and news. The application has turned out pretty well, and I finally managed to put it online yesterday. The application currently displays a 15 minute delayed feed of major market indices, delayed feeds of sub-indices on the BSE and the NSE, commodity prices from MCX, news feeds from IBN, Moneycontrol, BBC World and Reuters and the latest foreign exchange rates from FEDAI (see above screen shot). The only thing I haven’t been able to integrate as yet are the RBI rates.

Building this application was a very learning experience.I learnt how to use Flex and integrate it with Rails. Also learnt what “screen scraping” is, and how to do it using Rails. As of now, this application is for personal use (might change in the future). Basically I want to test run it on a live server, see bandwidth usage etc. Lets see how it turns out.

The very first project available for download is Loupe, the rails+flickr image gallery. This is the same gallery that I run my photography site on. So please visit the site, and download and try the scripts. Any feedback would of course be welcome.

What Loupe basically does is pick all the pictures from a user’s public photostream on flickr and display it on a website. All the flickr niceties like tags, sets etc can be accessed. In addition to this there is also a tag based search feature as well as nifty about page to put material on. ( Mine still needs some work, right now it’s just some random text I picked up from another photography site ).

Loupe uses the rflickr library to access the Flickr API. It is built using the excellent web framework for Ruby called Rails. It also uses the mootools and slim box javascript libraries for displaying images. Do give Loupe a look at my photography section and let me know how it is. I will also be writing a series of articles on rails and flickr integration in the coming weeks, so do watch this space for more.

Technorati Tags: Photography, Loupe, Rails, Flickr, Ruby, rflickr