Skip to content

5. Integration Instructions

berk edited this page Nov 14, 2011 · 1 revision

The following sections will give a quick overview for how to integrate and customize tr8n into your rails application.

Tr8n Helper Tags

For the purpose of this excercise we will assume that you have a global layout file defined in app/views/layouts/application.html.erb that, in its simplistic form, looks something like this:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
</head>
<body>
    <%= @content_for_layout %>
</body>
</html>

There are many different ways you could integrate the language selector and tools into your application. Tr8n comes with a number of tags that can help you integrate the various scripts.

Note: All of the Tr8n JavaScripts are framework independent and it shouldn’t matter what framework you use for your application.

tr8n_scripts_tag - embeds tr8n javascripts and stylesheets necessary for the inline translator to work. It also contains translation suggestions, virtual keyboard and shortucts scripts. This is the only required tag that must be included on all of the traslatable pages.

tr8n_language_selector_tag - embeds the standard Tr8n language selector with links to enable/disable inline translations, translators tools, adminstrations tools and help. This tag is usually used in the top right corner of the application.

tr8n_translator_login_tag - embeds translator login and language selector. This tag is only useful when the site does not have its own user registration mechanism.

tr8n_language_strip_tag - embeds language strip with the featured languages. Featured languages can be configured using the admin tool. This tag is usually used at the bottom of the application.

Once you add the above tags, your layout file will look something like this:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
    <%= tr8n_scripts_tag %>
</head>
<body>
    <div style="float:right">
       <%= tr8n_language_selector_tag %>
    </div>
    <%= @content_for_layout %>
    <%= tr8n_language_strip_tag %>
</body>
</html>

Now you are ready to add and translate your first label. Open up any view from any controller (make sure that the view’s layout has the tags from the examples above) and add the following line:

<%=tr("Hello World", "My first translatable greeting to the world!")%>

Now you are ready to try more advanced translation options.