Bart G. Dev...

I've been busy this summer working on a few commercial projects, and a few research related projects at Ryerson University, the dept. of Computer Science, so my posts have been a bit rushed. By rushed I mean not at all, or consisted of a place holder from xkcd.com

I wrapped up a video project for Athletes Video. A golf swing analysis application From the success of the site, I see golfers REALLY like that sort of thing. Check it out here (login: 'demo'). I'm working on a second one which is looking to be a first of it's kind (as far as I can see).

The Computational Intelligence Initiative lab at Ryerson has been keeping me pretty busy. That's what happens when you like what you do and the people you work with. It's hard to leave work behind. There's several things on the go, so here's a list of just a few:

ryePod - an Automated Mulit-Agent and Information Syndication
I mentioned this in more detail before, but now I have this fancy pic and poster.

3D Node Simulator (snappier name pending)
This application visually represents the current state of a network or a multi-agent system, tracks and records the progressive stages:

Ryerson's Women In Engineering (WIE)
The latest project to wrap up is part of WIE, where we had the opportunity to mentor three very talented and intelligent engineers-to-be from grade 11. We worked on several projects, one of which is presented here, and won 3rd place in the competition which followed the 6 week program. Nika, Nilanthy, and Susan did a great job, and were a pleasure to work with.

An honorable mention of a project which completed this summer that is not my own. Jeff Hardy and Cloves Carneiro Jr., with Hampton Catlin, published a Rails book, Beginning Rails: From Novice to Professional from Apress. From reading the TOC the book sounds well through out, but I'll picking a copy up for the lab. With the increase in web development our students our asking for, and the great implementation Rails has done implementing MVC, this will be a great addition to our texts for students. And Jeff is a great developer, who will teach me a thing or two.

One last thing. Apparently my nerd score is 89/100... a bit higher then I thought it would be, but oh well... life goes on.

One thing I’ve been struggling with the last day was how to incorporate Prototypes Effects into an HTML table. I need a well formatted list of records, something easily done with a <table>, but something that will take advantage of AJAXian effects. Here's the final product. Read on to see how I got it.

The problem is that IE doesn’t remove a table’s elements out of the DOM, and as of recently, Firefox doesn’t either, unless you walk through the DOM. There’s a great description of how to delete records through the DOM using JavaScript here. So to avoid tables, and for example use Effect.Fade to remove a record on deletion, I’d have to use pure CSS and struggle with the cross-browser inconsistencies. Searching the web, I found some great techniques for dealing with these issues, but not being a CSS god, I needed a simpler solution. Another great tool for record handling is SortTables from script.aculo.us. It allows you to move the records around. But still, not what I’m looking for.

So to only use Prototype (actually Effect.Fade is script.aculo.us, which is built on top of Prototype), I found that a combination of CSS and tables does the trick. What you need is a CSS Record id, and a CSS Column class element. Then create a table for each row in your database, assigning the entire table to your CSS Record id. You can equally wrap the entire table into a div. Next, set each <td>’s class to your Column Class. The key is to set the columns width: property in order to have a uniform layout. If each column’s width is the same, you only need one of these defined in CSS. For my example below, each column is different, so I defined 4 different column classes.

Here, I list User objects, with the option to Delete each record. I use link_to_remote with Effect.Fade to delete the record from the database, then fade the record out from the DOM.

CSS content

File: scaffold.css

#cssRecord{
  width: 700px;
  border-top:   1px solid #000000;
  border-left:  1px solid #000000;
  border-right: 1px solid #000000;
  background:   #ffffff;
}

#cssRecord th { 
  background: #dddddd; 
  font-size: 14px; 
  vertical-align: top; 
  text-align: left; 
}

#cssRecord td { 
  background: #eeeeee; 
  font-size: 12px; 
  vertical-align: top; 
  text-align: left; 
}

/** you’ll need a new set of these for each table type  **/
#cssRecord .cssUserCol1 { width: 15%; }
#cssRecord .cssUserCol2 { width: 15%; }
#cssRecord .cssUserCol3 { width: 60%; }
#cssRecord .cssUserCol4 { width: 10%; text-align: center; }

RHMTL Content

File: list.rhmtl

<h1>Listing users</h1>
  <table id="cssRecord" cellpadding="2" cellspacing="2"><tr>
    <th class="cssUserCol1">Name</th>
    <th class="cssUserCol2">Date</th>
    <th class="cssUserCol3">Description</th>
    <th class="cssUserCol4"></th>
  </tr></table>

  <% for user in @users -%>
  <div id="userObject<%= user.id %>">
    <table id="cssRecord" cellpadding="2" cellspacing="2"><tr>
      <td class="cssUserCol1"><%= link_to h(split_str(user.name), 10), 
           :action => 'show', :id => user, :controller => 'admin' -%></td>
      <td class="cssUserCol2"><%=h split_str(user.created_on.strftime("%d %B %Y"), 10) 
           -%></td>
      <td class="cssUserCol3"><%=h split_str(user.description, 50) -%></td>

      <td class="cssUserCol4"><%= link_to_remote 'Delete', 
                       :complete => "new Effect.Fade('userObject#{user.id}')",
                       :url => {:action => 'fake_destroy',
                          		:controller => 'admin',
                          		:id => user}, 
                        :confirm => 'Are you sure?', :post => true  
                    -%>
      </td>
    </tr></table>
  </div>
  <% end -%>

If your field content doesn’t wrap within the length you chose, it will realign the columns for that row only, which is messy and defeats the purpose. To remedy this, I created a method to split longer strings. It’s not the best way I’m sure, but works quite well. Just put it into your *_helper.rb file, and pass the object to it. I used it for the cssUserCol2 and cssUserCol3.

File: *_helper.rb

def split_str(str=nil, len=10, char=" ")
 work_str = str.to_s.split(//) if str
  return_str = ""
  i = 0
  if work_str
    work_str.each do |s|
      if (s == char || i == len)
        return_str += char
        return_str += s if s != char
        i = 0
      else
        return_str += s
        i += 1
      end
    end
  end
  return_str
end

Firstly, you should check out the RubyOnRails guide to your first Rails app here.

Secondly, you should checkout Bluehost’s page on getting started with Rails on their server, here.

Thirdly, check out the Bluehost Forum for information. My experience has been that the posts here are a good start, but alone do not answer any questions in depth. There’s a lengthy post on Typo which is a good start.

Also, Paul Sturgess has a good artical on Rails, and as of this writing, hosts his site with Bluehost.

-- Installing Typo on Bluehost --

Typo is the 2nd Ruby On Rails app I’ve installed on Bluehost, but it’s the first which isn’t mine. The first was straight forward, I followed the Bluehost instructions found here

The second, is this version of typo you’re hopefully reading right now... hopefully… otherwise there’s a problem... So here’s how I got it done.

When I was initially installing Typo, neither Gems nor Rake worked for me, not sure why yet. I had to download and install Typo manually. This is easier to do with through the shell, but it's not necessary. If you want it, Bluehost requires that you provide some additional info to them in order to get shell access. Mind you that while it’s not absolutely necessary to have it, it is EXTREMELLY helpful. The following steps will allow you to install Typo, and other apps without the shell. Also, using the link command to redirect which folder a browser ends up might be a bit more difficult, although I heard it is possible through the cpanel.

Okay, so here’s how I did it…

-- Getting the code --

Gems complained with"ERROR: While executing gem ... (Errno::EACCES)". This was because mongrel needed to be installed , but couldn’t get done. I guess I didn’t have proper access to the ruby gems directory. At 2:00 am, it was time to hack my way through this install, instead of worrying what Bluehost had installed or not.

If you want to have typo on a subdomain (blog.mysite.com), create it using cpanel. It will exist with a folder in your public_html:
$ln -s ~/typo/public ~/public_html/blog

If you want to have typo right off of your domain (www.mysite.com), first create an addon domain using cpanel. Next, delete the addon folder in public_html that was just created, and link the same name to typo’s public folder:
$rm -rf ~/public_html/blog
$ln -s ~/typo/public ~/public_html/blog

Note:

• rm –rf removes folders even if there’s content in them
• ln –s creates a symbolic link. So when your browser opens up your site, the server directs it to your public_html/domain folder, which is “symbolically” pointed to typo/public

-- Create the necessary databases --

You can create the development database and use it by default, or you can jump right into production. You’ll need to update some files to point to production, as development is set by default. I list the changes a little further down.

Use phpMyAdmin to setup your dev or prod database, as per bluehost’s instructions here.

-- Creating Tables --

Rake did not work for me so I had to do the database set up manually. This just meant running the contents of the sql schema in /typo/db/schema.mysql.sql, via phpMyAdmin on the USERNAME_PRODDB database. Open the SQL tab, and copy/paste the contents of this file right in, and press “Go!”. It should have created all necessary tables.

In the shell you can execute this command from the typo directory:
$mysql USERNAME_PRODDB -DBUSER -PSW </db schema.mysql.sql

Next you’ll need to update the /typo/config/database.yml which tells typo what your database is, and what the login parameters are. This is standard for any Rails application.

Now there’s a catch here with the databases. phpMyAdmin did not synchronize with the /typo/config/database.yml file right away. I spent quite a while trying different configurations before realizing that the results were inconsistent and that something was simply not synchronizing. It would sometimes synch after several (approx 15) minutes, or not at all. I’ve been told it might be a version issue. Bluehost currently has the mysql 2.7 gem installed. The solution is to force the database to synch by re-adding your db user into the database. Recreate the same DB name and password you used originally, overwriting the one that’s there, without deleting the original (just override). This will force the databse to resynch and pick up your database.yml changes. The yml file should of course be in synch with your database.

-- Setting Typo to Production --

Add the following lines to these files:
typo/config/environment.rb
ENV['RAILS_ENV'] = 'production'

typo/public/.htaccess
SetEnv RAILS_ENV production

'Application error. Typo failed to start properly' This would occur periodically. It can be caused by many things, but because it occurred periodically, I thought it might be a performance issue due to the lack of FastCGI and paths. After making the following changes, I haven’t received the message.

Set dispatcher path in "typo/public/dispatch.rb" Old Line:
#require "dispatcher" New Line:
"/usr/local/lib/ruby/gems/1.8/gems/rails-1.1.4/lib/dispatcher"

-- FastCGI --

Bluehost has Fast CGI installed, you just need to point your app to it. typo/public/.htaccess Content (comments optional):
#*************************
# General Apache options
AddHandler fastcgi-script .fcgi
AddHandler cgi-script .cgi
#Options +FollowSymLinks +ExecCGI
#-----------------------------------
#*************************
SetEnv RAILS_ENV production
#-----------------------------------
#*************************
RewriteEngine On
#-----------------------------------
#*************************
RewriteRule ^$ index.html [QSA]
RewriteRule ^([^.]+)$ $1.html [QSA]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteRule ^(.*)$ dispatch.fcgi [QSA,L] #
#-----------------------------------
#*************************
ErrorDocument 500 "<h2>Application error</h2>Typo <br />failed to start properly"

-- CHMOD 755 --

One last thing!!! Remember to give everything in the typo/public/*.* folder CHMOD 755 access. Otherwise you won’t be able to access anything through a browser.

Some FTP applications set fields to 644 by default. Watch out for this when uploading quick changes and all of the sudden your app is not found at all.