shiningthrough

My first post!

2007-04-18T15:56:00Z

My first blog post! and i am quite pleased with myself. I wrote this blog application from scratch using Ruby on Rails, its kind of an experiment, i get to try out new features, and generally use this site to mess around with.

In addition the XHTML and CSS that are used to make the layout are also a first for me. You'll notice that the grass always sticks to the bottom of the site, and the page grows from the middle instead of the bottom. This took some time to get working, and is still not 100%.

If you have any issues with the site not working 100% either graphically or functionally, i would really appreciate you letting me know.

Simple debugging in ruby on rails

2009-10-04T12:17:10Z

I often find while writing a ruby on rails applications that i need to display the contents of a variable quickly and easily, this is straight forward in a view, but not so easy in a controller or model. There are a couple of ways to do this:

logger.debug "variable"

will write to the development.log file, or if your using webrick as your development server, you can use:

STDERR.puts "variable"

and it will show up on the console output where your running your server.

Select helper methods in Ruby on Rails

2009-10-03T20:08:34Z

It can get quite confusing when it comes to using the different select helpers, select, select_tag and collection_select and in my opinion there is a lack of adequate documentation.
For my own use if nothing more, i have done my best to compare the different form helper methods available, and when and how to use them.

First we will look at the html for a basic selection box:

<select name="payment">
 <option value="1">VISA</option>
 <option value="2">MasterCard</option>
 <option value="3">Switch</option>
</select>

The selection box has some key parts, the name, which is required, and used by the browser when submitting the <select> choices to the server.

The option tags, each of which are made up from a "value" and "text" pair, the "value" to identify the select item in the server, and the "text" which will be displayed to the user.

There are three different select form helpers in ruby on rails, "Select", "select_tag" and "collection_select". We will have a closer look at each of them now.

select

select(object, method, choices, options = {}, html_options = {})
Defined in ActionView::Helpers::FormOptionsHelper

Use select when you require a basic drop-down selection box populated with data not sourced from a database.

The object is the name of an instance variable. This is typically a model object (singular name of the table whose data your displaying, or in other words, the table record).
The method is the attribute of that instance variable. This is typically a field/column of the table whose data your displaying (really an ActiveRecord method).
Together the object and method specify the name of the select statement in the generated html
choices can be any enumerable object e.g arrays and hashes and results of database queries, and contains the option tags for the select box.
The optional options argument takes various "options" some of which are listed below in the examples.
The optional html_options argument allows css to be used for styling the select box.
If one of the option tags in choices matches @object.method, that option tag will be selected

In this example a hash is being used to populate the option tags.

<%= select( "payment", "id", { "Visa" => "1", "Mastercard" => "2"}) %>

Select can be used in conjunction with a model object as seen in this example, an instance variable is passed into choices, but is being converted into an array of arrays.

<%= select ("selected_payment", "id", @payments.map {|u| [u.name,u.id]}) %>

The controller may look something like this:

@payments = Payment.find(:all)
@selected_payment = @payments[2]

This will cause the third option_tag to be selected by default in the select box, but collection_select is preferable in this scenario.

select_tag

select_tag(name, option_tags = nil, options = {})
Defined in ActionView::Helpers::FormTagHelper

Use select_tag when you require a drop-down selection box populated with data not sourced from a database, and are happy to hard code the default selected option tag. Select_tag should also be used when you want to process your form as a GET, rather than a POST, see here for more details. Also note that select_tag does not have a html_options parameter

The name specifies the name of the select statement in the generated html, and is used by the controller to access the selected items.
The optional option_tags argument is a string containing the option tags for the select box.
The optional options argument takes various "options" some of which are listed below in the examples.

Simple use of the select_tag helper:

<%= select_tag "payment", "<option>VISA</option>" %>

In this example, we are using "options_for_select" which accepts any container and returns a string of option tags, but we have defined an array. Note how the optional second parameter specifies the selected item in the list.

<%= select_tag "payment", options_for_select([ "VISA", "MasterCard", "Switch" ], "MasterCard") %>

Another option is this

<%= select_tag "payment", options_for_select(%w{ VISA Mastercard Switch }) %>

where %w is the shortcut notation for an array of strings that are space separated.

You can also do multi-select boxes:

 select_tag 'payment[]', options_for_select(@payments), :multiple => true, :size => 3 %>

Note that the "name" in this case is an array, and @payments is a hash defined in the controller:

@payments = {'Visa' => 1, 'Mastercard' => 2, 'Switch' => 3}

We can access the selected payment methods in the controller, using the array:

params[:payment]

select_tag does not support the :prompt option, which may not seem like an issue as we have already shown above how you can select a default option tag. But what if you want your form to GET, not POST, your only option is then to use select_tag, even if your data source is a database.

<%= select_tag(:payment, "<option>-Select a payment method</option>" + options_from_collection_for_select(@payments, :name, :name)) %>

As select_tag takes a string, we can concatenate an additional string onto the beginning of the parameter, this allows us to add our default option_tag. We use options_from_collection_for_select which takes a value_method, and text_method (see collection_select for their definition) and an optional selected_value, and a collection, which can be defined in your controller like this:

@payments = Payment.find(:all, :order=>"name")

collection_select

collection_select(object, method, collection, value_method, text_method, options = {}, html_options = {})
Defined in ActionView::Helpers::FormOptionsHelper

Use collection_select when you require a drop-down selection box, whose source is a model/object

The object is the singular name of the table whose data your displaying (the table record).
The method is the field/column of the the relevant data (really an ActiveRecord method).
Together the object and method specify the name of the select statement in the generated html
collection takes the option tags for the select box, this can be a hash or array.
value_method is the field/column to use for the value of the option tags in your html.
text_method is the field/column to use for the visible text of the option tags in your html.
The optional options argument takes various "options" some of which are listed below in the examples.
The optional html_options argument allows css to be used for styling the select box.
If one of the option tags in collection matches @object.method, that option tag will be selected

In this example the payment methods are being added to the select box via a model object, notice how we use the option, :prompt to add an additional option tag to the select box, which will be selected by default. Note that if @object.method matches one of the option tags, this will be selected by default, and :prompt wont appear in the list.

<%= collection_select(:payment, :id, @payments, :id, :name, options ={:prompt => "-Select a payment"}, :class =>"payment") %>

The selected item can be accessed in the controller, by using:

selected_payment = params[payment][id]

A final Note to say that the parameters used in all the helpers may be strings or symbols, symbols may be a better choice in some situations, but thats another article.

GET and POST in Ruby on Rails

2009-10-05T12:55:59Z

Lets start with the basics.....

What are GET and POST?

GET and POST specify the two main ways by which the browser sends a form's data to the server for processing.

The Get method contacts the server, and sends the forms data in a single transmission step. The browser appends the data to the forms action URL, separated by the question mark character.

With the POST method, the browser sends the data in two steps. The browser first contacts the server specified in the action attribute, when contact is made the data is sent to the server in a separate transparent transmission.

How does this fit in with Ruby on Rails? a rails form will process its data by default as a POST unless you specify otherwise:

<%= form_tag({:action => 'find_holidays_by_country'}, {:method => 'get'}) %>
<%= end_form_tag %>

Why would you want your form to be a GET? there are many reasons, imagine that a form is used for navigation. After the user has selected their required country, and performed a search, they may want to bookmark the resulting page, this is only possible by use of GET. The following code illustrates this:

<%= form_tag({:action => 'list_holidays_by_country'}, {:method => 'get'}) %>
  <%= select_tag(:country, options_from_collection_for_select(@countries, :name, :name)) %>
    <%= submit_tag 'Search', :name => nil %>
<%= end_form_tag %>

Note that select_tag is used as the helper as it is compatible with a GET request, select, and collection_select are not.
Also note that the name of the country is returned in the URL (more meaningful than an id), as well as being used as the text in the select box. See here for more details.
The submit tag is set to nil, so the button does not show up in the URL.

For a discussion on which method is most appropriate for a given problem, this is a very useful article When To Use GET

Lastly a warning when using GET requests. If an action changes the state of something on the server make sure the request is either a POST, or if GET must be used, make sure some kind of human intervention immediately follows.
Search engine spiders, and web accelerators follow links, and can cause these actions to trigger unintentionally.

Safari 3 bugs

2007-06-22T10:11:00Z

Like over a million others (at time of writing) i have upgraded to Safari 3. There are some great new features which are covered in other blog posts, but i am also encountering a few problems...

Apple's new browser crashes on me at least once today, but it is still only a beta, but one problem i found was its lack of support for the pseudo-class, :last-child.

First Child Second Child

The above example when viewed in firefox displays the text "Second Child" in Red, but not in Safari 3 beta.
Perhaps its this bug that's causing apple.com's cinema screen page to render incorrectly:

Has anyone else noticed any css related deficiencies?

Reindex spotlight in OS X Leopard

2007-12-15T11:19:00Z

I recently upgraded to OS x Leopard, and afterwards noticed that spotlight was failing to find certain applications. It was necessary to delete the index database in order to force reindexing. This is done using the mdutil application.

You can find out what it does by opening a terminal window, and typing:

man mdutil

But, if you just want to straight ahead and remove the index database, open a terminal window, and type the following:

sudo mdutil -E /

Use Photoshop to remove Mac OS X Leopard window shadows from screenshots

2008-12-02T21:42:00Z

Whilst i was writing a recent article it was necessary for me to take some dialog screenshots from OS X Leopard. There are several ways of doing this:

Using the grab utility that comes with OS X.
Holding Apple, ctrl, shift and 4, release, then press space.
Entering "screencapture -ic" on the command line, then press space. (This appears to be the same capture as above)
Use one of the many third party applications available, including InstantShot, SnapzProX, Jing and SnapNDrag

The problem i have with all these is that either they capture the window along with the large drop shadow that Leopard uses, or they capture the window without the drop shadow, but the rounded corners look poor and the edge border is missing

I have come up with a few Photoshop steps that reconstruct the dialog corners and edges, and also allow you, should you wish, to add a smaller drop shadow back in.

Take a screen shot, using Apple, ctrl, shift and 4, then pressing space to capture a window.
Create a new Photoshop document based on the clipboard, and set the background colour to be white.
Paste the screenshot in, it should look something like the dialog above, but with a black background.
Using the magic wand tool, with anti-alias switched off, and a tolerance set to 100, select the black region of the image where the shadow would be.
Click the "Add layer mask" button to create a mask based on that selection.
Adjust the mask as necessary, to make sure only the window is masked.
Inverse the mask by pressing Apple and i, to make the shadow masked.
Add a layer style to the masked window, select stroke with the following settings: and set the gradient from #7f7f7f to #000000
Select Inner Shadow with the following settings:
And if so desired, select Drop Shadow with the following settings:
I have placed these styles in a downloadable layer style here.

Install ImageScience on OS X Leopard

2009-02-15T10:01:00Z

I couldn’t find a tutorial that took me through this process successfully, in the end I combined information from several other articles to provide these simple steps.

Prerequisites

I used a clean fresh Install of Leopard to begin with.

Make sure you have installed Xcode from the Leopard disk.

Install ruby_inline

Open a terminal, and enter:

sudo gem install RubyInline

Install FreeImage

Download FreeImage (http://freeimage.sourceforge.net/download.html)

Using your editor of choice (I am using Vi), edit Makefile.osx

vi ~/Downloads/FreeImage/Makefile.osx

to make sure that the following lines read as: (correct for FreeImage 3.11.0)

INCLUDE_PPC = -isysroot /Developer/SDKs/MacOSX10.5.sdk
INCLUDE_I386 = -isysroot /Developer/SDKs/MacOSX10.5.sdk
...
LIBRARIES_PPC = -Wl,-syslibroot /Developer/SDKs/MacOSX10.5.sdk
LIBRARIES_I386 = -Wl,-syslibroot /Developer/SDKs/MacOSX10.5.sdk

then, in a terminal:

cd FreeImage
make
sudo make install

Install ImageScience

sudo gem install image_science

Test it all worked

irb
require 'image_science'

It will return true if you have been successful.

With thanks too

http://www.ruby-forum.com/topic/141754
http://resettodefault.com/2007/11/05/imagescience_on_leopard
http://seattlerb.rubyforge.org/ImageScience.html

Install RMagick and ImageMagick on Leopard OS X, quickly and simply

2009-10-04T19:16:22Z

RMagick is a Ruby interface that allows access to the ImageMagick image processing library. When I started out developing in Ruby on Rails, installing RMagick was quite an endeavour, which was one of the reasons I used ImageSciene in preference. The installation has now become very simple indeed.

Go to the RMagick download page, and download the rmagick-osx-installer (at the time of writing, this was rm_install-1.2.1.zip)

Open a terminal window, and enter the following command (Leopard will download RMagick to the Downloads directory, and automatically unzip it there)

sudo ruby ~/Downloads/rm_install-1/rm_install.rb

And thats it! I was very impressed with its simplicity this time round.

AuthLogic

2009-10-05T11:24:56Z

I know that it is rather old news by now, but I just discovered the wonders of Authlogic. If you have any sort of private interface to your app, whether it is adding products to your store or just adding comments to a forum, you may want some sort of authentication to keep the Viagra-toting spam-hordes at bay.

The great thing about Authlogic is that it is very light and adaptable, especially as opposed to that bastion of yore, Restful Authentication. You can use Authlogic by itself, and have a perfectly secure application, or you can use it with any number of plugins, from openid to facebook, so that the wonders of having just one password/login combination can be yours.

As usual, Ryan Bates has a wonderful railscast on the matter, that gives a very thorough introduction to Authlogic. Check it out: http://railscasts.com/episodes/160-authlogic

Dynamic multiple image uploads with Ruby on Rails

2010-02-25T19:09:45Z

This tutorial explains how to create a simple web application that allows a user to upload one, or multiple images. It makes use of the paperclip plugin, Ajax using RJS and new multi-model form functionality that has arrived with Rails 2.3.3 in the form of accepts_nested_attributes_for.

Make sure your up to date with Rails, you will need at least 2.3.3

Lets start by making a new rails application

rails shop

Lets add some scaffolding to our new application ...

script/generate scaffold product name:string price:decimal

Next we create a model class that will hold our photos:

script/generate model photo

Now we need to install the paperclip plugin, you need to have git installed for this:

script/plugin install git://github.com/thoughtbot/paperclip.git

Run the Paperclip generator, this will create the appropriate migrations.

script/generate paperclip photo data

Then we just run the migrations:

rake db:migrate

Right, thats everything setup, now its time to delve into the code. First thing to do is setup the models. The photo model should look like this:

class Photo < ActiveRecord::Base
  belongs_to :product
  has_attached_file :data  
end

The first line sets up half the relationship between Photo and Product. The second line adds the paperclip attachment to our Photo model, there are lot of optional settings that can be made here, but are beyond the scope of this tutorial, see the tutorial in the references for more information on paperclip. For now lets keep things simple.

The product model should look like this:

class Product < ActiveRecord::Base
  has_many :photos
  accepts_nested_attributes_for :photos, :allow_destroy => true
end

The first line specifies that we want one or more photos to be associated with our product. The second line is where the magic happens, this is new in rails 2.3.3, this specifies that photos is a nested attribute, this allows you to save attributes on associated 'Photo' records through the parent, 'Product'.

The View Code

That's the hard part done, all we have to do now is write the view code. In most scenarios, the number of images you want to add will be variable, therefore we will allow the user to dynamically add as many images as required. This kind of functionality means javascript, so lets add in the prototype libraries in products.html.erb.

<head>
  ....
  <%= javascript_include_tag :defaults %>
</head>

Firstly lets add the view code necessary to create a new photo, add the following to your new.html.erb file, within the form_for:

<%= add_photo(f) %>

And also add file upload support to the form, by adding :multipart => true to the form_for, as shown here:

<% form_for(@product, :html => {:multipart => true}) do |f| %>

Next we will add the implementation for the add_photo function. Go to products_helper.rb, and add the following funtion:

def add_photo(form_builder)
  link_to_function "add", :id  => "add_photo" do |page|
    form_builder.fields_for :photos, Photo.new, :child_index => 'NEW_RECORD' do |photo_form|
      html = render(:partial => 'photo', :locals => { :f => photo_form })
      page << "$('add_photo').insert({ before: '#{escape_javascript(html)}'.replace(/NEW_RECORD/g, new Date().getTime()) });"
    end
  end
end

This is a little bit complex, so lets go through it.

link_to_funtion is a helper found in the ActionView library, you provide it with some link text, and some JavaScript to execute when the link is clicked, it is important for this example that the link is given an id, you will see why shortly. We must build up a string to be executed within our link_to_funtion block, so we create a model scope for our new photo using form_for. Within this new scope we evaluate a partial(we have not written this yet) and store it locally, we then pass this evaluated partial into some prototype javascript that will insert the rendered HTML into the page. The point at which it is inserted is specified above as inserting 'before' the element with id add_photo, that is why the link was given an id, so that the HTML could be inserted before it.

The last thing that needs adding is the partial that was mentioned above. Create a new file in your app/views/products directory called _photo.html.erb (the underscore prefix is a Rails convention that specifies it as a partial), and paste in the following code:

<fieldset>
    <% if !f.object.new_record? %>
        <%= image_tag f.object.data.url %>
    <% end %>
    
    <%= f.file_field :data %>
    <%= delete_photo(f) %>
</fieldset>

We use a fieldset tag so we can group related items together, in this case its an image, a file upload input tag, and a delete link that runs some javascript. The fieldset allows that delete link to target the element that encompasses it. Next, we check if the object we are displaying is a new record, if its not, then we have an existing photo, so lets display it with an image_tag. The final two lines here provide a file upload input tag, and a call to a helper method that will create the delete link, lets have a look at that helper now.

def delete_photo(form_builder)
  if form_builder.object.new_record?
    link_to_function("Remove this Photo", "this.up('fieldset').remove()")
  else
    form_builder.hidden_field(:_delete) +
    link_to_function("Remove this Photo", "this.up('fieldset').hide(); $(this).previous().value = '1'")
  end
end

The first thing we do in delete_photo is to check if we are dealing with a new record or not, if it is, then we can simply delete the fieldset element we marked up previously. If, however, we have an actual photo, then it needs to be deleted from the database. Because we set :allow_destroy => true for accepts_nested_attributes_for, we can use the virtual attribute _delete in order to delete the child record.

And that wraps it up, try it out, you are now able to add and remove multiple images dynamically!

References:

http://jimneath.org/2008/04/17/paperclip-attaching-files-in-rails/
http://railsforum.com/viewtopic.php?id=28447
http://infrastacks.com/?p=57