Using Ruby on Rails to Create A Twitter-Like Message Form

ruby_on_rails_logo_3 This tutorial will show you how to create a twitter message form that counts down the 140 characters and also allows you to input a message within the URL of the webpage as well. What’s cool about Ruby on Rails is instead of writing javascript to recalculate the message length, we’ll use Rails to automatically generate the correct javascript so that each time the field changes, the count is recalculated all through the controller object. Download the project code here.

Firstly, I’ll assume you have ruby on rails installed and have create a new project. You’ll also need a basic knowledge of how Rails works, and how Rails utilizes the principle of Model-View-Controller (MVC). Having said that, create a new project and create a new controller file called message_controller.rb. We’ll first take care of an initial message specified in the URL of the page. Add this code to the file:

class MessageController < ApplicationController

  def index
    if params[:txt]
      @txt = params[:txt]
    else
      @txt = "";
    end
    @count = 140 - @txt.length()
  end

end

The index method first check to see if a message was specified in the URL. If the a message was specified, then it sets the @txt instance variable to the string. If not, then the variable is set to an empty string. The count is also calculated here for the initial web page view.

Now we need to set up the view for the message controller, create a message folder in the views folder and create a new file called index.rhtml in this new folder. Copy this code to the file:

<h1>Message</h1>

<% form_tag :action => 'stuff' do -%>
	<%= text_field_tag :message_field,value=@txt %>
<% end -%>

<div id='count'>
	<%= @count %>
</div>

<%= observe_field(
	:message_field,
	:url =>{:action =>"update_message_length"},
	:frequency=>1,
	:with => 'message',
	:update=>:count ) -%>

The parts to focus on here are the text_field_tag and the observe_filed method. The div count is where the remaining count will be displayed. Looking at the text_field_tag, :message_field is the id of the tag, and the value is set to the @txt that was declared in the Message Controller. The observe_field method will automatically generate the javascript ajax code that will update the count tag. The parameters follow as such:

:message_field – indicates which field is observed
:url – Decides which action is sent to the message controller. (More on that latter)
:frequency – Every time the field changes, make a AJAX request
:with – this will help us get the text in the field
:update – decides where the contents of the AJAX response goes

At this point we need to go ahead and add the “update_message_length” method in the message controller. This function will be called every time the filed value is change as specified by the observe_field method. Append the following function to the controller:

  def update_message_length
    pop = params[:message]
    count = 140 - pop.length()
    render :text =>  count
  end

This function gets the message include in the message parameter, and sends out the new count. One small, but vital part not to forget is to create a layout file that includes the needed javascript framework so this is included. Create a new file in the view/layouts folder called: message.html.erb. Add this code to the file:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
       "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
  <meta http-equiv="content-type" content="text/html;charset=UTF-8" />
  <title>Posts: <%= controller.action_name %></title>
  <%= stylesheet_link_tag 'scaffold' %>
  <%= javascript_include_tag :defaults %>
</head>
<body>

<p style="color: green"><%= flash[:notice] %></p>

<%= yield %>

</body>
</html>

Thats its! Now if you go to the URL http://localhost:3000/message, you’ll get a blank field, or you can include an initial message by http://localhost:3000/message?txt=message+here. Incase you have a flaw in your project, or are lazy, here is a copy of the working project.

Leave a Reply