AkillesBlog

Introduction

Here I will set up a sample Ruby on Rails application with the ActiveScaffold scaffolding plugin. I will first give the basic instructions to a default setup (as found on ActiveScaffold’s site, only with my field names and values), and will then make some tweaks and override some of the default configuration. It’s all very basic, but it can be a help for those trying out ActiveScaffold for their first time.

The case we’re working on: create a list of Equipment, i.e. electronic gadgets you’re planning to buy. We want to register title, price, an url to the product page of a webstore, an image url, some description and whether it’s in the webstore’s stock. Aditionally, we would like to calculate the registered price into another currency. All of this is to be shown in a sortable, searchable list.

It will be looking like this when we’re done.

After some years developing and experimenting with PHP, I’ve become curious of Ruby on Rails and what it has to offer in ease and “speedy” development. I’m for the time being an absolute rookie in RoR, but I’ve had a look on some resources on the net and have tried making a few very basic “test” applications.

Having limited experience regarding web development frameworks, it takes a few scratches on the head to get the concept of MVC and knowing what does what (M=model, V=view, C=controller) and what calls what. Generating a scaffold and investigating the different files helps grasping the concept after a while.

The first time I saw the result of a scaffold-generation, I was convinced that this kind of development was something to look further into. However, after having seen samples of other scaffold generators, the default one seems a little static and cumersome to override: It seems like the default scaffolding generator is meant for running once, and then hardcode-editing the scaffold-generated code. Then, if you for some reason have to rescaffold, you must reimplement the changes. Also, the result is rather static without “fancy stuff” like Ajax.

Therefore, I had to test out the ActiveScaffold scaffolding plugin. It’s very easily installed, quickly up and running (a getting-started-tutorial on their site is estimated to 2 minutes from scratch), produces a smooth Ajax’ed design and is very easily to override and configure.

Remember, though, that I’m quite new to RoR, so I haven’t a broad basis of comparison, and there may be better practices for what I’m doing here. If so, please tell me!

Assumptions

I think the majority of the steps in this tutorial should work with most versions (except the scaffolding, which is different in rails v. >= 2), but here’s what I’ve used:

• Rails 1.2.6 (yes, I know, it’s time to upgrade…)
• Ruby 1.8.6
• ActiveScaffold rev. 739

I assume you have a working rails-application, set up with connection to an existing database and accessible through a web browser before starting off.

Basic setup

The first thing we’re gonna do, is create a new table in the database to which the application connects. I created a table called equipment like this in my MySql database:

CREATE TABLE equipment (
  id int(10) unsigned NOT NULL auto_increment,
  title varchar(255) NOT NULL,
  descr text NOT NULL,
  price float NOT NULL,
  updated timestamp NOT NULL
    default CURRENT_TIMESTAMP
    on update CURRENT_TIMESTAMP,
  url varchar(255) NOT NULL,
  imgurl varchar(255) NOT NULL,
  instock tinyint(1) NOT NULL default '1',
  PRIMARY KEY  (id)
) ;

Then, let the generator scripts make the appropriate files we’ll be working on. 4 types of files are created, but we’re only interested in 3 of these; the model, controller and helper files, not the view files. However, we’ll just delete the view files afterwards…
Open up a terminal window, and cd to your rails application root folder. Then run
./script/generate scaffold Equipment

Now, delete the unnecessary views files (not only unnecessary; they also override the ActiveScaffold which we’ll put to work later on, so follow this step!):
rm -R app/views/equipment/

Now it’s about time to install the ActiveScaffold plugin:
([Parts of] the following few steps are borrowed from ActiveScaffold’s website)
./script/plugin install http://activescaffold.googlecode.com/svn/tags/active_scaffold

When the plugin has been downloaded and installed, you need to update a few of your files.
Add this to the head-section of your app/views/layouts/equipment.rhtml file:

  <%= javascript_include_tag :defaults %>
  <%= active_scaffold_includes %>

It should then look something like this:

<!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>as test</title>
  <%= javascript_include_tag :defaults %>
  <%= active_scaffold_includes %>
</head>
<body>

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

<%= yield  %>

</body>
</html>

Then, edit your app/controllers/equipment_controller.rb, so that it looks similar to this:

class EquipmentController < ApplicationController
  @equipment_pages, @equipment = paginate :equipment, :per_page => 10
  layout "equipment"
  active_scaffold :equipment
end

Also, quote from http://activescaffold.com/tutorials/getting-started:

3a. Make sure that you don’t have AjaxScaffold installed in your project. Since ActiveScaffold evolved out of AjaxScaffold they share some common method names and are incompatible with each other.

Then you’re done with basic setup. Now browse to http://your-rails-app-root/Equipment, and hopefully you’ll see the magnificent Ajax’ed layout created by ActiveScaffold. Isn’t it wonderful?

If you, like me, are running Rails on Apache/FastCGI, you may have to restart your Apache httpd-server every now and then (I don’t know of any other methods of killing/restarting the rails fastCGI-scripts being run by apache. If you know; please tell me!). When testing new stuff and/or when getting errors, I always restart apache to see if the problem still persists.

Up to now, we’ve basically dealt with initial setup covered by ActiveScaffold’s own Getting Started-tutorial. Now it’s time to tweak the config to our needs.

Tweaking and overriding default ActiveScaffold config

I’m over all very satisfied with the looks and functionality of the initial output, especially when considering it almost takes no time at all. However, since ActiveScaffold can’t know how I plan to view my data, there are some overrides to be done. Datafields are overridden very smoothly by creating small methods with designated names in the right classes.

Anyways, here’s what I’m gonna do:

• Show the image pointed to by imgurl instead of the url itself.
• Put the image inside an <a href…>-tag, so that the image links to the url in the url-field.
• Create/include a virtual column that shows the price in a foreign currency as well as in USD.
• Format the two price-columns with sprintf
• Reorder the columns
• Exclude the descr-column from list view
• Tweak the output of the boolean field instock
• Apply a default sorting of the rows in the list view

This may sound as a lot of work, but fact is it’s quite easily implemented.

First a note on the two price-columns: I live in Norway, and am sometimes interested in monitoring prices in some US webshops. Therefore, I register the USD price in the price-field in the database, while I calculate what this will cost me in NOK (Norwegian kroner) based on the current exchange rate. Since most of you probably are not from Norway, I called NOK the foreign currency.

First, place a floating point number (for instance 4.99 - the actual rate on 2008-Apr-15, the lowest rate in 25 years!) as the only line in a file placed here (though customized for your rails-path!):
/usr/local/www/rails/as/myincludes/nok_usd_rate.txt

We want a global variable (yeah, I know everyone’s not found of that) to hold the exchange rate, read from a file in the event of page loading. I do this so that I won’t have to read the file over for each record.

Edit the app/controllers/application.rb-file, so that it looks like this:

# Filters added to this controller apply to all controllers in the application.
# Likewise, all the methods added will be available for all controllers.

class ApplicationController < ActionController::Base
  def setmyglobalvar
    # reads exchange rate from file: UPDATE TO YOUR PATH!
    contents = File.read('/usr/local/www/rails/as/myincludes/nok_usd_rate.txt')
    # converts to NOK and includes 25% "mva" (=Norwegian VAT). Stores in global var:
    $myglobalvar= contents.to_f * 1.25
  end

  # Pick a unique cookie name to distinguish our session data from others'
  session :session_key => '_testapp_session_id'

  before_filter :setmyglobalvar
end

Here, we have defined a method, and calls this by the before_filter-statement.

Next, we must extend our record-model so that it includes the field to be used as a virtual column. Edit app/models/equipment.rb to look like this:

class Equipment < ActiveRecord::Base
  def price_nok
    # $myglobalvar is set in controllers/application_controller,
    # and contains exchange rate incl VAT:
    # self.price references the price-
    # field from current database record.
    self.price * $myglobalvar
  end
end

Then we must tell the controller to include this new field as a (virtual) column.
At the same time, we reorder the columns and apply a default sorting for the list view.
Note that we only alter the columns of the list action and not of any other actions (list is an action, so is new, edit, show etc). Altering the columns of edit or new can result in an error on record edit or creation attempts.
Note also that only the columns listed in config.list.columns will be shown in the list view.
Here it goes - app/controllers/equipment_controller.rb:

class EquipmentController < ApplicationController
  @equipment_pages, @equipment = paginate :equipment, :per_page => 10
  layout "equipment"

  active_scaffold :equipment do |config|
    list.sorting = {:price => 'DESC'}
    config.list.columns = [:imgurl, :instock, :price, :price_nok, :title, :updated]
  end
end

Then, at last, we alter the way some of the columns are shown. This is done in app/helpers/equipment_helper.rb, by creating methods with name columnname_column. All output within the method will be printed in the respective table cell (td) for each record of that column. Here is the contents of that file:

module EquipmentHelper
  def imgurl_column(record)
    '<a href="'+record.url+'">' + image_tag(record.imgurl, :alt => "Image") + '</a>'
  end
  def url_column(record)
    '<b><a href="'+record.url+'">[ link ]</a></b>'
  end
  def instock_column(record)
    if record.instock
      image_tag("/img/yes.png", :alt => "yes!")
    else
      image_tag("/img/no.png", :alt => "no, sadly!")
    end
  end
  def price_column(record)
    # http://railsmanual.org/module/ActionView::Helpers::NumberHelper
    number_to_currency(record.price)
  end
  def price_nok_column(record)
    number_to_currency(record.price_nok, :unit => "NOK ", :delimiter => " ", :separator => ",")
  end
  def descr_column(record)
    # for the show action, where we want to show the description as well.
    record.descr.gsub("\n", "<br />")
  end
end

Custom stylesheet

If you want to apply your own css-formatting, don’t edit the default stylesheets, because they may be overwritten. Instead, include this as the very last line in the head-section of app/views/layouts/equipment.rhtml:

  <%= stylesheet_link_tag 'active_scaffold_overrides' %>

Then, add your css rules in the stylesheet public/stylesheets/active_scaffold_overrides.css! For instance:

.price_nok-column
{
        font-weight: bold;
}

---

Links

• MVC-concept @ betterexplained.com

chia3 programming ActiveScaffold, programming, rails, scaffolding, tutorial