Fork me on GitHub

Using Prototype and JQuery with Rails3 (UJS)

by Phil

I've been looking for some information on the unobtrusive javascript features in Rails 3, and it turns out that there's not much out there! Either that, or I'm looking in the wrong places.

So here is my attempt to explain some of the features. I'll create two sample blog apps, one using Prototype and the other using JQuery (the code is available on github).

Install Rails 3

If you haven't already, get Rails 3 installed. Everything you need to know is here.

What is UJS?

In older versions of Rails there was a DSL called RJS. This basically allowed the user to write Javascript using Ruby. However, RJS was tightly coupled to the Prototype JS framework... so if you wanted to use JQuery or MooTools you would need to do make your own solution.

This preference for Prototype lead people to want a more loosely coupled approach, which didn't discriminate against other JS frameworks. Enter UJS...

How it works

Rails 3 makes use of HTML5 data-* tags to store pertinent data along with the element in question. This removes the need for inline javascript to be stored in the element, as it was with delete links in the past. The main player in this is data-remote="true", which is used to tell the form or link that it should perform an asynchronous request to the server.

Javascript Drivers

The above is achieved with some help from a javascript driver file that uses Prototype by default but can easily be changed to a JQuery driver. The file is called rails.js and is located in the "javascripts" folder. Here are some of the drivers available:-

To use another driver simply swap the rails.js with the one you want to use and include the appropriate javascript library.

Let's give it a go!

I'm not going to take you through the whole process of creating the Rails app. What I will show you is the parts that relate to UJS requests.

As I said this is a sample Blog app, so we have a Posts - Comments relationship set up. In the show.html.erb view we have a form for creating new comments:-

The main thing to notice about the form_for block is the :remote => true parameter. This will take care of the data-remote=true HTML5 attribute, that we discussed earlier. So when we submit this form it will send an ajax request to the "create" action in the comments controller:-

Notice that the controller responds to the :js format. So the controller will pass control to the create.js.erb view:-

This displays the new comment at the bottom of the list and highlights it, then finally it clears the form text area.

I've used the :remote => true option for deleting posts as well. Take a look at the demo code to see how this works. It's very similar to the example above.

That's pretty much it. Here's the prototype and jquery demos on github.



Posted on Thu 11 Feb 2010 | Comments

Sorting an EmbeddedDocument with MongoMapper

by Phil

I had this issue recently when trying to sort items in an EmbeddedDocument. Say you have a "Post" Document and a "Comment" EmbeddedDocument. If you want to sort the comments by the created_at field (which is pretty likely), it isn't as easy as you would think, using MongoMapper (at the moment anyway).

However, there is a nice clean alternative that can be used to achieve the same results. Simply use the "sort_by" method like so, passing in a symbol of the field to sort as a proc:-

...and for descending order:-

Here is the original google group thread.



Posted on Wed 20 Jan 2010 | Comments

A look at themes with Compass (Part 1)

by Phil

As you may of heard, I'm working on a new project (meetee), which will allow a more collaborative approach to meetings.

Over the last few days I've concentrating my efforts on getting the website design implemented using the following technologies:-

I've written about Compass before, and in this article (and the next) I want to concentrate on how I dealt with setting up themes.

Compass wouldn't be possible without Sass, the underlying language. Sass allows you to define variables (among other things), and this becomes particularly useful when defining base colours for your website theme(s). For instance, I defined the following base colours for my "Roast" theme. In the below example, see how you can perform operations on hex colours to make a lighter or darker shade. This is important! When you change the base colours, the correct shades will be applied to the derived colours.

The Roast Theme

Roast Theme

Once I had this theme set-up, I used the defined variables throughout my Sass code in Compass. This allowed me to create more "theme" sass files with different colours defined:-

The Raindrop Theme

Raindrop Theme

And since I'm using Ruby on Rails I thought this would be fitting...

The Ruby Theme

Ruby Theme

Pretty damn cool! As you can see, it will be very easy to integrate different themes at any time. I'm really loving Compass and Sass!

In the next post I'll show how I structured the files and how I plan to load the appropriate CSS file dynamically.

If you haven't checked out Compass, do it now - It's the future!



Posted on Thu 26 Nov 2009 | Comments

Sunspot Full-text Search for Rails/Ruby

by Phil McClure

Sunspot

I had the recent pleasure of using Sunspot, which is powered by Apache Solr, to provide full-text search functionality for a Ruby on Rails recent project.

Installation/Configuration

Installing Sunspot is reasonably simple. I installed the Sunspot gems along with the related Sunspot Rails Plugin, with the following commands:-

Sunspot gems

sudo gem install outoftime-sunspot outoftime-sunspot_rails --source=http://gems.github.com

Sunspot Rails Plugin

script/plugin install git://github.com/outoftime/sunspot_rails.git

Note that you will need to require the relevant library in the Rakefile which is in the base directory in your Rails app:-

require 'sunspot/rails/tasks'

Now you can generate the sunspot yaml configuration file with the built in generator:-

script/generate sunspot

This creates a sunspot.yml file in the rails config directory (more on this later).

Indexing Fields in your Models

Sunspot, in comparison to the alternatives, has really clean and clear syntax for defining indexed fields in the model. Here's an example:-

Here we can index string and text fields, or integer foreign keys or even foreign keys of a joining table. Full-text searching is performed against the text fields and filtering can be performed against the other fields, in the controller, like this:-

Then rendered in the view, like this:-

Development Server

You can start the sunspot/solr server in a development environment by using a built-in rake task, just key the following command:-

rake sunspot:solr:start

Production Server

While the rake task is great for development, it is not recommended for a production environment. To start the sunspot/solr server in production use this command:-

sunspot-solr start -- -p 8983 -d data/solr/myapp

This starts a daemon process on the server. You can check that the process is running by going to http://hostname:8983/data/solr/myapp.

You may be wondering how your Rails app knows to look in this location. Remember the sunspot.yml file in the config directory?... That's where!

Pitfalls

Links



Posted on Sat 24 Oct 2009 | Comments

Sass and the Compass Framework

by Phil McClure

My Experience with Compass

So, as you may have noticed, I have given the site a bit of a make over... and I thought it may be nice to make my first post be about the tools that I used to create the new look. In particular I want to talk about the wonderful Compass CSS framework.

Compass

Compass is what I would call a "real" CSS framework. Tools like Blueprint and 960 Grid have been classed as frameworks but really, they are just grid systems. If we think of other types of frameworks like .NET, Cake, Rails, they all provide an abstraction of the given language in order to save us from having to re-implement common functionality. With the help of Sass, this is exactly what Compass does.

Sass

It's worth saying a few word about Sass. Sass is an intermediate language which allows you to do a lot more than you can with standard CSS, the best of which are:-

In addition to this the syntax is much more concise. With these great features Sass looks like it might outshine it's sister project haml.

Back to my experience with Compass

I used Compass along with Rails to create this site and it really has been the most pleasurable experience I've had when styling a site.

When dealing with styling on past sites, I frequently ended up with one CSS file which included all the styling for the entire site. This is not a good way to approach styling for a few reasons. First of all, it makes it harder to create reusable pieces of code. Second, having all the code packed into one file results in unreadable unstructured code.

Compass and Sass changes all of this and more! Compass provides some common functionality via mixins plus I can create reusable blocks of code using Sass. Further to this, Compass includes wrappers for grid sytems, such as Blueprint, so you can leverage off them. It doesn't end here - Compass Sass allows you to define "partials" similar to that of Rails. These are great for separating your code to make things more modular... and if you're thinking that these extra files will result in more http requests to the server, you'd be wrong. As I said, Sass is an intermediate language meaning it ultimately needs to be compiled into CSS - so you can potentially end up with one CSS file and you can even compile it in compressed mode!

I can't recommend this approach enough. So, for you next project, give it a go.

Installing Sass

http://sass-lang.com/download.html

Installing Compass

http://wiki.github.com/chriseppstein/compass/getting-started



Posted on Wed 14 Oct 2009 | Comments
© 2009 Phil McClure This site was developed using Compass, Blueprint and Ruby on Rails - Much thanks to these guys!