In the Ember JS MVC tutorials we created a purely browser based application with no persistence between sessions and hard coded fixtures for data. In this article we will create a server side app to handle data persistence, we will also use it to serve our Ember application. We will use Ruby on Rails. The code is available here in zip form or if you want to fork etc on github try here. Start by creating a new rails application

rails new blog

Wait for the app to be created, go in to the blog directory and remove public/index.html. You can use ember-rails to create the ember client side skeleton code but we will do it by hand using the classes and templates we created during the MVC tutorials. I find it is helps you to understand how the application works if you use as little auto-generated code as possible. However, we will use some rails scaffold to get us started.

rails generate scaffold Post title:string content:text
rails generate scaffold Comment text:string post_id:integer

This creates the controllers, views, model, helper, db migrations etc. Then we can create the database.

rake db:migrate
rake db:create

As we defined in the MVC tutorial a Post can have many Comments so add the relationships to the rails models, in blog/app/models.

add belongs_to :post to comment model
add has_many :comments to post model

In routes we have resource for posts and comments, add a root

root :to => 'welcome#index'

We therefore need something for this route to render. Create a welcome_controller.rb in app/controllers with an index method and a index view for it in app/views/welcome/index.html.erb. The view will be empty, it is just a placeholder for our rails app to boot the root ie /. Ember will be doing all the rendering.

class WelcomeController < ApplicationController
  # GET / 
  def index 
    respond_to do |format| 
      format.html # index.html.erb 
    end 
  end 
end

Add the Ember application

Just like in a rails app we can make our ember application easier to manage by creating an ember app structure in app/assets/javascripts. ember-rails would do this for you.

/controllers 
/templates 
/models 
/views 
/helpers

Using the code from app.js and index.html from part 3 of the tutorial create the following files

controllers/commentsNewController.js

App.CommentsNewController=Ember.ObjectController.extend({
  needs: 'post',
  text: null,
  save: function() {
    var post = this.get('controllers.post.content');
    App.Comment.createRecord({ post: post, text: this.get('text') }); 
    this.get('target').transitionTo('post.index');
   }
});

models/post.js

App.Post=DS.Model.extend({
  comments: DS.hasMany('App.Comment'),
  title: DS.attr('string')
});

models/comment.js

App.Comment = DS.Model.extend({
  post: DS.belongsTo('App.Post'),
  text: DS.attr('string')
});

The templates directory structure mimics the data-template-name from index.html

/templates
/templates/comments
/templates/comments/new.hbs
/templates/post
/templates/post/comment.hbs
/templates/post/index.hbs
/templates/application.hbs
/templates/comments.hbs
/templates/index.hbs
/templates/post.hbs
/templates/posts.hbs

Copy the contents of the script tags in index.html from part 3 of the MVC tutorial to the appropriate template, you do not need the enclosing script tag itself. We also need to add a router.js to the app/assets/javascript directory, use the code from app.js we created in part 3.

App.Router.map(function() {
  this.resource('posts');
  this.resource('post', { path: '/posts/:post_id' }, function() {
    this.resource('comments', function() {
      this.route('new');
    });
  this.route('comment', { path: 'comments/:comment_id'});
  });
});

App.PostsRoute=Ember.Route.extend({
  model: function(){
    return App.Post.find();
  }
});

App.PostIndexRoute=Ember.Route.extend({
  model: function(params) {
    return this.modelFor('post');
  }
});

App.CommentsNewRoute=Ember.Route.extend({
  setupController: function(controller, model) {
    controller.set('text', null);
  }
});

Our store.js no longer uses the fixture adapter but uses the rest adapter. Add store.js to app/assets/javascripts and put the following code in it.

App.Store = DS.Store.extend({
  revision: 12,
  adapter: DS.RESTAdapter.create({
    bulkCommit: false
  })
});

Serve the javascript from rails

It is advisable to use the latest stable version of ember and ember-data. Download ember-latest.js & ember-data-latest.js from http://builds.emberjs.com/ and put in vendor/assets/javascripts Add the handlebars_assets gem to the Gemfile so that we load handlebars.js and get the assets pipeline to compile our handlebars templates. You may have noticed that we append .hbs to them since this is what the gem looks for rather than .handlebars. We also need to load our ember application javascript files, create a blog.js file

//= require ./store
//= require_tree ./models
//= require_tree ./controllers
//= require_tree ./views
//= require_tree ./helpers
//= require_tree ./templates
//= require ./router
//= require_self

Then add blog, handlebars, ember and ember-data to application.js. Also create our ember app instance inside there.

//= require jquery
//= require jquery_ujs
//= require handlebars
//= require ember-latest
//= require ember-data-latest
//= require_self
//= require blog

window.App = Ember.Application.create({
  LOG_TRANSITIONS: true
});

Start a rails server with rails s and go to localhost:3000 in a browser. You should see the Blog index page with a link to ‘Posts’. Open up the debugger to look at the network traffic. Click on the Posts link and you will see a request to localhost:3000/posts. The response is empty but the application transitions to posts.

Add some data and respond with JSON

We will now add some data for the server to send to the browser. Add some db seeds to db/seeds.rb

post = Post.create( :title => 'First post', :content => 'Text for first post' )
Comment.create(:text => 'Post one comment one', :post_id => post.id)
Comment.create(:text => 'Post one comment two', :post_id => post.id)
post = Post.create( :title => 'Second post', :content => 'Text for second post' )
Comment.create(:text => 'Post two comment one', :post_id => post.id)
Comment.create(:text => 'Post two comment two', :post_id => post.id)
post = Post.create( :title => 'Third post', :content => 'Text for third post' )
Comment.create(:text => 'Post three comment one', :post_id => post.id)
Comment.create(:text => 'Post three comment two', :post_id => post.id)

Use rake db:seed to add the posts and comments. We also need to make sure that our rails application serves JSON in the correct format. We need to add the correct JSON serialiser to the post model to include the comments as comment_ids array. Ember needs the JSON response in the format "posts" : [{...},{...}]

def as_json(options={})
  { :id => self.id, :title => self.title, :content => self.content, :comment_ids =>self.comments.collect{|comment| comment.id} }
end

We then need to change the posts controller index method to render json using this method

format.json { render :json => { :posts => @posts.as_json } }

as well as in the show method

format.json { render :json => { :post => @post.as_json } }

We also need to change the JSON response in the comments controller show method to

format.json { render :json => { :comment => @comment } }

so that the json is returned as "comment" : {....}

(see http://jonathanjulian.com/2010/04/rails-to_json-or-as_json/)

When fetching the comments ember will request it as /comments?ids[]=1&ids[]=2 ie as an array of ids, change the comments_controller index method to handle that

if params[:ids]
  @comments = []
  params[:ids].each do |id|
    @comments.push(Comment.find(id))
  end
  else
   @comments = Comment.all
end
respond_to do |format|
  format.html # index.html.erb
  format.json { render :json => { :comments => @comments } }
end

Save new comments to the server

We need to change the CommentsNewController save method so that it sends a POST request to /comments with the new comment in JSON. Change it to:

var post = this.get('controllers.post.content');
var comment = App.Comment.createRecord({ post: post, text: this.get('text') });
comment.get("store").commit(); //this is the new bit, after creating a comment we need to commit it
this.get('target').transitionTo('post.index');

comment.get("store").commit() tells the comment to commit itself.
Go to /posts/1/comments/new, enter a comment and hit save. You will see some network traffic heading to /comments on the server. Refresh /posts/1 and you will see that it has the new comment. You can use the rails console to convince yourself. Comment.all will have the new one at the end. We can use exactly the same principles to create new posts, why not add it to your app?

this.resource('post', { path: '/posts/:post_id' }, function() {
  this.resource('comments');
});

This means we will now have a /posts/:post_id/comments route.

Open the index.html page in a browser and examine the routes in the console. Remember our old friend Router.router.recognizer.names? (btw. I noticed in Firefox you may need to use App.Router.router.recognizer.names). You will see that comments route has been added. Lets add a comments model and fixtures. Add the following to app.js

App.Comment = DS.Model.extend({
  post: DS.belongsTo('App.Post'),
  text: DS.attr('string')
});

and add the following within the App.Post model making sure that you have a comma between any lines

comments: DS.hasMany('App.Comment')

Each Post can now have many Comment(s). Add some comment fixtures to app.js:

App.Comment.FIXTURES = [{id:"1", text: "First Comment"}, {id:"2", text: "Second Comment"}, {id:"3", text: "Third Comment"}, {id:"4", text: "Fourth Comment"}, {id:"5", text: "Fifth Comment"}, {id:"6", text: "Sixth Comment"}, {id:"7", text: "Seventh Comment"}, {id:"8", text: "Eighth Comment"}, {id:"9", text: "Ninth Comment"}];

We also need to change the Post fixtures to tell them that they have some comments:

App.Post.FIXTURES=[{ id: "1", title: "First Post", comments: [1, 2, 3] }, { id: "2", title: "Second Post", comments: [4, 5, 6] }, { id: "3", title: "Third Post", comments: [7, 8, 9] }];

Note that we have added a ‘comments’ attribute in each Post fixture with an array of the Comments they have. [1, 2, 3] means that this Post has the Comments with ids 1, 2 & 3. Go to /posts/1/comments/1 to check that they render correctly.

Change the post/index template to the following so that we can see the comments:

<script type="text/x-handlebars" data-template-name="post/index">
  {{title}}
  <ul>
    {{#each comment in comments}}
      <li>{{comment.text}}</li>
    {{/each}}
  </ul>
</script>

Go to /posts/1 and you should see the text for each Comment appearing under the Post title.

We can now add a link to each comment but before this we need to tell the router how to route to them. We want the route to look like /posts/:post_id/comments/:comment_id
To achieve this we need to add the following to the posts resource router definition

this.route('comment', { path: 'comments/:comment_id'});

We will also need a post.comment template in index.html

<script type="text/x-handlebars" data-template-name="post/comment">
  {{text}}
</script>

What if we wanted to add a new comment to a post? We will add a posts/:post_id/comments/new route and templates. Change the comments resource under the post resource in the router to

this.resource('comments', function() {
  this.route('new');
});

Then add a comments outlet template and a ‘new’ one

<script type="text/x-handlebars" data-template-name="comments">
  {{outlet}}
</script>

<script type="text/x-handlebars" data-template-name="comments/new">
  Comments New
</script>

 

If you refresh and look at the available routes we now have comments.new. Go to /posts/1 and click on the New Comment link and you should see the “Comments New” text. Not much use though, we need a text box for the comment and a button to submit. Add the following to the comments/new handlebars template

<form {{action save on='submit'}}>
  {{view Ember.TextArea valueBinding="text" placeholder="Enter comment here"}}
  <button type="submit">Create Comment</button>
</form>

Here we tell the template that when the forms “Create Comment” button is clicked, ie on submit, it should call the “save” action in the CommentsNewController. We need to create that controller. In the TextArea we have bound the “text” value to the controller. Add the following to app.js

App.CommentsNewController=Ember.ObjectController.extend({
  needs: 'post',
  text: null,
  save: function() {
    var post = this.get('controllers.post.content');
    App.Comment.createRecord({ post: post, text: this.get('text') });
    this.get('target').transitionTo('post.index');
  }
});

Firstly we tell this controller that it needs to know about the PostController so that it can tell what post the comment is for. We do this through needs: 'post'. The text: null bit is the value we have bound to the TextArea in the template. The save function is what happens when we click the button. Firstly it finds the post through controllers.post.content (facilitated via the ‘needs’ syntax), the we create a new Comment with the text value. Finally we transition back to the post. this.get('target') gives us an instance of the router. Try adding a new comment and see what happens. Note that since we are using the FixturesAdapter the ids may look a little bit odd.

One final thing we should do is reset the comments TextArea box in the comments/new template when we transition to the route. If we don’t then it will contain the last thing we entered in to it. Add this to app.js

App.CommentsNewRoute=Ember.Route.extend({
  setupController: function(controller, model) {
    controller.set('text', null);
  }
});

setupController is a hook that all routes have and allows you to set the model or modify the controller.

To recap, we created a comments nested resource for post and added the route ‘new’ to it. We added a Comment model and fixtures and linked them to the Post model via hasMany and belongsTo. We added the comments to the post.index template and added a route with a path for each post.comment so we could link to them. We created the comments.new template with a form that we could submit and the CommentsNewController with a save action to create the new comment.

Go back to index.html and add the following:

<script type="text/x-handlebars" data-template-name="index">
  {{#linkTo 'posts'}}Posts{{/linkTo}}
</script>

<script type="text/x-handlebars" data-template-name="posts">
  Posts
</script>

Refresh the page and you should see a link to ‘Posts’ under the title, clicking on it will take you to a page with the title and the word ‘Posts’. Looking at the console you can see that we transitioned from index to posts. Both of these templates were rendered in the main application template in the {{outlet}} block. Next we can add a link to individual Posts inside the Posts template and create a template for these individual Posts.

Change the ‘posts’ template to the following

<script type="text/x-handlebars" data-template-name="posts">
  <ul>
    {{#each model}}
      <li>{{#linkTo post this}}{{title}}{{/linkTo}}</li>
    {{/each}}
  </ul>
</script>

However, if you refresh the ‘/posts’ page you will no longer see anything. That is because we have no models and we definitely have no data. To remedy this we will add some. We start by creating a store. Go to app.js and add the following

App.Store = DS.Store.extend({
  revision: 12,
  adapter: 'DS.FixtureAdapter'
});

If you refresh the page you will probably see an error along the lines of ‘Undefined variable: DS’. This is because we need to add the ember-data library. To get it you can either clone the ember-data repository and run rake dist (https://github.com/emberjs/data#getting-ember-data) or download the latest build from http://builds.emberjs.com). In the future ember-data may be bundled along with ember but until then this is the way to get it.

So, download ember-data, add a <script> tag to index.html to load it, placing it after ember but before app.js, and refresh again. Now, the revision: 12 part is to check that it is compatible with the emberjs you are using, if not it will be reported in the console. The adapter part is optional but we are telling it to load data from fixtures that we will specify in javascript. Reload and all should be ok. We will now define a post model and some fixtures. Add the following to app.js

App.Post=DS.Model.extend({
  title: DS.attr('string')
});

App.Post.FIXTURES=[{ id: "1", title: "First Post" }, { id: "2", title: "Second Post" }, { id: "3", title: "Third Post" }];

Refresh the page and…..nothing. We have to tell ember what to do when it gets to the posts route. Add the following to app.js, after the main routes definition.

App.PostsRoute=Ember.Route.extend({
  model: function(){
    return App.Post.find();
  }
});

Here we tell ember that when we transition to ‘posts’ we need to find all the Post models that exist, in this case we return all the fixtures we have created. Refresh and all the posts should be shown using the title as a link. If you look at the definition for the posts template we created earlier you can see that we iterate over each of the models that the PostsRoute returns and add a link for each with the title as the text. {{title}} is a handlebars helper which tells it to get the attribute title from the current model in scope. Refresh the page and you should see links to 3 posts, hover over them to see the urls they link to. They should be linking to /posts/1 etc. Click on one of the links and you will see that we transition into post.index but there is nothing shown. Surprise, surprise we need a to define a template. Add the following to index.html after the currently defined templates:

<script type="text/x-handlebars" data-template-name="post/index">
  {{title}}
</script>

Refresh the page and you will see this warning in the console:

WARNING: the immediate parent route ('a') did not render into the main outlet and the default 'into' option ('p') may not be expected

Rember earlier we defined the {{outlet}} in the application template, ember expects every parent template to have an {{outlet}} into which it can render its children. In this case it is saying that it wants to render post.index into post but it can’t find it. We need to define a post template with the following in index.html

<script type="text/x-handlebars" data-template-name="post">
  Post
  {{outlet}}
</script>

Don’t forget to add the ‘Post’ text in the template, you will see why in a second. Refresh and you will see the ‘Post’ text but no title for the post. Well, it turns out there is a ‘feature’ (polite term for a bug) which means that in the current version the ‘default’ behaviour for a parameterised route does not work out of the box. Ember should know that because we defined the route with /posts/:post_id that it should return the model with id equal to :post_id when we transition to post.index with posts/1 etc but for the moment we have to tell it. We need to define a PostIndexController to get things back on track. Add the following code to app.js so we can see what is happening:

App.PostIndexRoute=Ember.Route.extend({
  model: function(params) {
    return App.Post.find(params.post_id);
  }
});

Refresh and….still nothing. Ok, I knew that was going to happen, unfortunately the bug means that empty params are passed to a nested route. Use your debugger and examine the params object yourself. All is not lost however, change the model hook to

model:function(params) {
  return this.modelFor('post');
}

Refresh. Yes, you should now see the text ‘Post First Post’. You can remove the unneeded ‘Post’ text from the post template and refresh again. Try going to posts/2 and posts/3 to convince yourself that it is all working.

So to recap. We have created an ember application which logs transitions between routes. It has 3 routes: index, posts and post.index. We have 5 templates: the main application one with {{outlet}}. The index template ie ‘/’. The posts template. A post template with an outlet for its nested routes and a post.index template to ‘show’ each post. In part 3 we will look at nested routes.

For me it was easier to think of an ember app in terms of a rails one so where better to start than with the routes. Our simple application will consist of posts which can have many comments. In Rails (3.x) your routes file would consist of a root and some resources corresponding to the models. So lets say you use some scaffolding to get started

rails new blog
rails generate scaffold Post name:string title:string content:text

This gives us the following in config/routes.rb

resources :posts

We would also normally add a root after deleting public/index.html

root :to => 'welcome#index'

rake routes shows:

posts GET /posts(.:format) posts#index
POST /posts(.:format) posts#create
new_post GET /posts/new(.:format) posts#new
edit_post GET /posts/:id/edit(.:format) posts#edit
post GET /posts/:id(.:format) posts#show
PUT /posts/:id(.:format) posts#update
DELETE /posts/:id(.:format) posts#destroy
root / welcome#index

We want to create a similar route structure in ember.

To begin with we will keep all the html and UI bits in index.html and all the application logic in app.js (look inside the js directory to find it). The ember starter pack has an example index.html, open it in your browser and you will see that it renders a simple page with 3 colours listed. Have a look at it in an editor and you can see the script blocks within the html that define the templates. There is one with an {{outlet}} and an index template. If you look at js/app.js you will see that the IndexRoute returns an array of strings which are rendered into the index template. The templates use handlebars which is similar to erb in rails but is contained within javscript <script> blocks with a type of “text/x-handlebars”. Unfortunately we don’t have the benefit of rails logging what is happening when we go to a url in our application but we can ask ember to tell us what route it is rendering, to do this we will change the main ember application javascript. Open up js/app.js in an editor and change App=Ember.Application.create() to

App=Ember.Application.create({
  LOG_TRANSITIONS: true
});

Log transitions will help us to see what the router is doing when we move from page to page. If you open up a browser console and reload the index page you will see that it says “Transitioned into ‘index’”

We will now add our own bits to the starter app. Start by removing the existing handlebars templates from index.html and add the one shown below. Remember to place it within the html <body> tag.

 

<script type="text/x-handlebars">
  <body>
    <header>
      <h1>Blog</h1>
    </header>
    <div>
      {{outlet}}
    </div>
    <footer>
      &copy;2013 Me.
    </footer>
  </body>
</script>

 

Within this script block we have defined a template which has type text/x-handlebars, this is the basic application template into which other templates will be rendered, as you saw with the index route earlier. Anything wrapped in {{ }} tells handlebars to do something. The {{outlet}} is similar to <%= yield %> in rails, the placeholder where other templates are rendered.
We also need to create our application inside app.js. Remove the section with App.IndexRoute, leaving only the App definition with the LOG_TRANSITIONS we added

App=Ember.Application.create({
  LOG_TRANSITIONS: true
)};

We will start by defining a simple router, add the following to app.js

App.Router.map(function() {
});

and then populate it with a route

App.Router.map(function() {
  this.resource('posts');
});

Refresh the page and you will see that we have transitioned into index but there is nothing there except the header and footer text we specified. That is expected since we removed the index template, we will add them back during part 2. We can use App.Router.router.recognizer.names in the web console to see all the routes. It returns a js object within which all the current routes are show. Use it and you will see that we have the routes index and posts. Seems that it does not behave like you think it would in rails and only creates 2 named routes ‘index’ and ‘posts’ ie ‘/’ and ‘/posts’. What we also need is /posts/:id. To do this we have to create a route for instances of a post.

App.Router.map(function() {
  this.resource('posts');
  this.resource('post', { path: '/posts/:post_id' } );
});

Again this doesn’t quite get us what we want and only gives us the ‘index’, ‘posts’ and ‘post’ routes which will work fine but we want member routes under ‘post’ so that we can show, edit, delete etc. To begin with what we actually want is ‘index’, ‘posts’ and ‘post.index’. ‘post.index’ is ‘/posts/:post_id’ which in ember terms is the equivalent of rails route ‘show’. We want a page which shows all posts and one which shows a single post. We need to add some more to the router for this.

App.Router.map(function() {
  this.resource('posts');
  this.resource('post', { path: '/posts/:post_id' }, function() {
  });
});

We have defined an inner function of the ‘post’ resource where the member routes will be defined. You get ‘post.index’ for free. To look at all the routes you have defined again use App.Router.router.recognizer.names in a browser console. We now have ‘index’, ‘posts’ and ‘post.index’. We have some basic routes defined, now we need some UI magic. In part 2 we will look at templates and handlebars along with the models, store and routes to hook them together.

Scotland:

“COUNCIL_AREA”,”NAME”,”ONS_CODE”

“01″,”Aberdeen City”,”QA”

England/Wales:

COUNTY_CODE_2001 DISTRICT_CODE_2001 DISTRICT_NAME_2001

00 AA City of London

Northern Ireland:

District,District Labels

95AA,Antrim

So, we have two in csv, one in tab, one which uses quotes around fields and headers, one which joins the codes into a 4 letter string and different orders in each file. How much time could we all save if the creators of such data talked to one another.

So, having tried various solutions involving fastcgi and url rewrite which I could not get to work on IIS 7.5 under Windows 7 I found http://www.helicontech.com/zoo . I’ve seen the people behind it on various other posts on msdn etc so there is some history of them working on IIS, fastcgi and url rewrite. In fact I think they have had a url rewrite product available for a number of years.

* Install Rails

1) Install the Web Platform Installer from http://www.microsoft.com/web/downloads/platform.aspx
2) Add http://www.helicontech.com/zoo/feed as a new feed
3) From the zoo tab select Blank Ruby on Rails Rails project and Ruby1.8 and click the install button. It will also install other dependencies.
4) When installing the blank project it will pop up and ask you where to put it along with other required details like the name. Make a note of where the project lives since we need a couple of files from it.
5) From the blank rails project we need the web.config files in the projects root and public directories.  Place these in the same place in your rails project directories.  To use Ruby1.9 we need to replace ruby.1.9.pipe in the web.config in the projects root directory with ruby.1.8.pipe. You may also have to add the path to ruby’s bin directory to your environment variables – C:\Ruby18\bin or C:\Ruby19\bin
6) Ensure that the projects directories are writeable by the IIS_IUSRS user.
7) Add the project to IIS with the project path pointing to the rails projects root directory (not public like you would with a rails project under apache).

* Install Git

This is used for version control and can be found on http://git-scm.com/ Install the version marked ‘Full installer for official Git for Windows 1.7.8′ or similar (version name might be different).

* Install required gems (libxml and imagemagick specific instructions)

There are various 3rd party dependencies that the gems that MethodBox requires including imagemagick (ie. rmagick) and libxml-ruby. On windows this requires a little bit of user intervention during the install process. Go to http://www.imagemagick.org/script/binary-releases.php?ImageMagick=uteqfietdab37ghqrvfuvoul55#windows and download http://www.imagemagick.org/download/binaries/ImageMagick-6.7.3-7-Q16-windows-dll.exe
Double click and go through the installer, selecting to install C and C++ header files and libraries from the additional options page
add environment variable CPATH=\path\to\imagemagick\include and LIBRARY_PATH=\path\to\imagemagick\lib

There is a high chance that the libxml-2.2.dll needed for libxml-ruby is not present in the lib folder and will pop up an error.  The dll can be found in C:\Ruby18\lib\ruby\gems\1.8\gems\libxml-ruby-2.2.0-x86-mingw32\lib\libs\  Copy the libxml, iconv and zlib dlls and put in the C:\Ruby18\bin folder.

Note: If you are not using mysql then comment any mysql gem out of the Gemfile. Otherwise the system may complain about libmysql.dll missing.  If you are using mysql you need to copy the dll from the mysql/bin folder to the ruby lib folder.

* SQL server and rails

1) Find out your SQL server details. If your SQL server instance has not been allowed through the firewall then you need to find out its details: open up the sqlserver management console (which you can install along with sqlserver express via the Web Platform Installer – I recommend this way, downloading on its own and installing does not work correctly) and look at your db details.
2) Set up a Data Source Name (DSN) for your ODBC connection.  This is not that well documented so you need to find the C:\Windows\sysWOW64 directory and start the odbcad32 programme.  Then you add a system DSN for your instance of sqlserver.
3) Set up your rails projects database.yml as normal with the following records:

adapter: sqlserver
mode: odbc
dsn: sqlserverapp-dsn (the one you created earlier)
username: user
password: secret
host: localhost (or whatever)

Double click and go through the installer, selecting to install C and C++ header files and libraries from the additional options page (this is very important)

Then add environmant variable CPATH=\path\to\imagemagick\include and LIBRARY_PATH=\path\to\imagemagick\lib

You can then ‘gem install rmagick’ and it will build it using the native image magick libraries.

sudo add-apt-repository "deb http://archive.canonical.com/ lucid partner"

Then update the packages available:

sudo apt-get update

Then you can install Sun’s (Oracles?) Java

sudo apt-get install sun-java6-jdk sun-java6-jre sun-java6-plugin

You can see the complete file here but below is a quick synopsis of the changes:

added a boolean to keep track of whether you want a different tooltip than the tab title:

this.differentTooltip = true;

if this isn’t the behaviour you wanted then that’s ok:

if (!this.differentTooltip) {
t.headingText = t.div.title;
}


however, if the tooltip is to be different then make sure the
link for the tab is correct:

if (this.differentTooltip) {
DOM_a.title = t.tooltipText;
} else {
DOM_a.title = t.headingText;
}