Home arrow Ruby-on-Rails arrow Page 4 - Going Global with Multiple Language Support

Going Global with Multiple Language Support

In this second part of a four-part article series on adding support for multiple languages to a Ruby-on-Rails ecomerce application, you will learn how to use Globalize to add this important capability. This article is excerpted from chapter 10 of the book Practical Rails Projects, written by Eldon Alameda (Apress; ISBN: 1590597818).

Author Info:
By: Apress Publishing
Rating: 5 stars5 stars5 stars5 stars5 stars / 3
June 30, 2010
  1. · Going Global with Multiple Language Support
  2. · Setting Up Globalize
  3. · Implementing the Change Locale User Story
  4. · Implementing the Translation User Stories

print this article

Going Global with Multiple Language Support - Implementing the Translation User Stories
(Page 4 of 4 )

Jill, Emporium’s best customer, has been recruited by George to translate and localize Emporium to Swedish, and later to Chinese and other languages. Jill should be able to access a page that lists all text that can be translated. Text that hasn’t been translated should be highlighted, so she can see it clearly without using a magnifying glass. The page should allow her to add text and the translations for it directly. She will also need to be able to manage existing translations.

These requirements are covered by the List Translations, Add Translation, Edit Translation, and Delete Translation user stories. These user stories make up the administration interface that can be used to manage the view and model translations. We’ll start by implementing the List Translations user story.

Implementing the List Translations User Story

This translation list page should show all translations available in the database. First, use the generate script to create the controller and one view:

$ script/generate controller 'admin/translate' index

  exists  app/controllers/admin
  exists  app/helpers/admin
  create  app/views/admin/translate
  exists  test/functional/admin
  create app/controllers/admin/translate_controller.rb
  create test/functional/admin/translate_controller_test.rb
  create app/helpers/admin/translate_helper.rb
  create app/views/admin/translate/index.rhtml

Note that we don’t tell the generate script to create actions for the other user stories, because these user stories don’t need a dedicated view.

Next, change app/controllers/admin/translate_controller.rb as follows:

class Admin::TranslateController < ApplicationController
  def index
    @page_title = ?
"Translating from #{Locale.base_language} to #{Locale.language.english_name}"
    @view_translations = ViewTranslation.find(:all,
      :conditions => [ 'language_id = ?', Locale.language.id ], :order => 'id desc') 

The index action uses the ViewTranslation model, which is provided by Globalize, to retrieve all translations from the database. The list is filtered so that only the current locale is shown. The list is also sorted, so that the latest inserted translations are shown first. We set the page title to show the base language and the language to which we are translating, such as “Translating from English to Swedish.”

Note  The code described here is originally from the Globalize wiki, but has been modified and improved.

Next, create the index action’s view, which displays the translations in a table and uses an Ajax-enabled in-place editor to allow the user to edit the translation, by saving the code shown in Listing 10-2 in app/views/admin/translate/index.rhtml .

Listing 10-2. The Translation View

<%= form_tag :action => 'create' %>
<p><label for="text">Text</label><br />
<%= text_field 'view', 'text' %></p>
<p><label for="translation">Singular form</label><br />
<%= text_field 'view', 'singular_form' %>
<p><label for="translation">Plural form (optional)</label><br />
<%= text_field 'view', 'plural_form' %></p>
<%= submit_tag "Add translation" %>
<%= end_form_tag %>

<table style="width: 100%;">
  <% @view_translations.each do |tr| %>
  <tr id="row_<%= tr.id %>">
    <td><%= tr.id %></td>
    <td><%= tr.tr_key %></td>
    <td><%= tr.pluralization_index %></td>
    <span id="tr_<%= tr.id %>" <%= 'class="translate"' if tr.text.nil? %>>
      <%= tr.text || 'Click here to translate' %>
   <%= link_to_remote "Delete",
      :url => { :action => "destroy", :id => tr },
      :confirm => "Are you sure you want to delete '#{tr.id}'?",
      :post => true

<%= in_place_editor "tr_#{tr.id}",
        :url => { :action => :set_translation_text, :id => tr },
        :load_text_url => ?
url_for({ :action => :get_translation_text, :id => tr }) %>
  <% end %>

The first part of the view contains a form for the Add Translation user story. This form can be used to add new translations directly to the database. The form has three fields: the text that should be translated, the singular form of the translated text, and the plural form of the translated text. The plural form is optional.

For example, suppose you entered the following in the form:

  1. Text: Displaying %d books 
  2. Singular form: Displaying one book 
  3. Plural form: Displaying %d books

Then you could use this code to print out the singular and plural form of the text using the irb command:

"Displaying %d books" / 1

--------------------------------------------"Displaying one book"

"Displaying %d books" / 2

"Displaying 2 books"

Next, the list displays the internal id , the base language text ( tr_key ), the pluralization index ( 1 for singular and 0 for plural form), and the translated text. Notice that there’s also a Delete link that can be used to delete translations from the list.

At the end of the view, there’s an in-place-editor that is created with the in_place_editor helper. This helper creates a form, which uses Ajax to update the edited field’s contents without refreshing the whole page.

To make it easier for Jill, the administrator, to notice text that hasn’t been translated yet, you should add the following new CSS class to public/stylesheets/style.css :

.translate {
  font-weight: bolder;
  color: red;

This will highlight text that hasn’t been translated in bold and red.

Now that you have set up the translation view, open http://localhost:3000/admin/translate?locale=sv in your browser. You should see a page similar to the one shown in Figure 10-3.

Figure 10-3.  The translation list page

The list already displays the default translations that Globalize inserted when you ran rake globalize:setup .

If you click the Add translation button, you should get an “Unknown action” error. This is because we haven’t implemented the Add Translation user story yet. We’ll do that next.

Please check back tomorrow for the third part in this series.

DISCLAIMER: The content provided in this article is not warranted or guaranteed by Developer Shed, Inc. The content provided is intended for entertainment and/or educational purposes in order to introduce to the reader key ideas, concepts, and/or product reviews. As such it is incumbent upon the reader to employ real-world tactics for security and implementation of best practices. We are not liable for any negative consequences that may result from implementing any information covered in our articles or tutorials. If this is a hardware review, it is not recommended to open and/or modify your hardware.

blog comments powered by Disqus

- Ruby-on-Rails Faces Second Security Flaw in ...
- Ruby 2.0 Prepped for February 2013 Release
- Why LinkedIn Switched from Ruby on Rails
- Adding Style with Action Pack
- Handling HTML in Templates with Action Pack
- Filters, Controllers and Helpers in Action P...
- Action Pack and Controller Filters
- Action Pack Categories and Events
- Logging Out, Events and Templates with Actio...
- Action Pack Sessions and Architecture
- More on Action Pack Partial Templates
- Action Pack Partial Templates
- Displaying Error Messages with the Action Pa...
- Action Pack Request Parameters
- Creating an Action Pack Registration Form

Watch our Tech Videos 
Dev Articles Forums 
 RSS  Articles
 RSS  Forums
 RSS  All Feeds
Write For Us 
Weekly Newsletter
Developer Updates  
Free Website Content 
Contact Us 
Site Map 
Privacy Policy 

Developer Shed Affiliates


© 2003-2019 by Developer Shed. All rights reserved. DS Cluster - Follow our Sitemap
Popular Web Development Topics
All Web Development Tutorials