Getting Started with Pivotal Spring 3

This guide provides a step by step tutorial on how to integrate the Translation Exchange SDK with your Java based web applications using Pivotal Spring 3 and allow you to translate your site into multiple languages.

Before Getting Started

Make sure you have a Translation Exchange account, and have created a project in your dashboard.

1. Install the SDK

To download and install the SDK you currently have the following options.

Plain-old JAR

Download the following JARs and put them on your test classpath:

Maven

Add dependencies to com.translationexchange:tml-spring3, com.translationexchange:tml-memcached in the preferred scope. (Note: 0.2.2 is the latest stable version for tml.)

<dependency>  
  <groupId>com.translationexchange</groupId>
  <artifactId>tml-spring3</artifactId>
  <version>0.2.2</version>
</dependency>  
<dependency>  
  <groupId>com.translationexchange</groupId>
  <artifactId>tml-memcached</artifactId>
  <version>0.2.3</version>
</dependency>  

2. Configure the SDK

For the best performance, translations should be cached in your application. Multiple cache adapters are supported.

Configure the SDK in your application in the main file where your setup your Spring application:

@SpringBootApplication
public class Application extends SpringBootServletInitializer {

   @Override
   protected SpringApplicationBuilder   configure(SpringApplicationBuilder application) {
        return application.sources(Application.class);
   }

   public static void main(String[] args) throws Exception {
       Tml.getConfig().setApplication(Utils.buildMap(
      "key", YOUR_APPLICATION_KEY,  
      "host", "",
          "cdn_host", "https://trex-snapshots-dev.s3-us-west-1.amazonaws.com"));

       Tml.getConfig().setAgent(Utils.buildMap(
           "host", "http://localhost:8282/dist/agent.js"
       ));

       Tml.getConfig().setCache(Utils.buildMap(
          "enabled", true,    
      "class",  "com.translationexchange.cache.Memcached",
      "host", "localhost:11211",
      "namespace",  "df43596aab7bf9a9981289d2ded0732ad2bd358e2f79af65239b2280d52f0566",
      "version_check_interval", 10));   
      SpringApplication.run(Application.class, args);
    }

}

To learn more about configuring the SDK, go to the Java Configuration section of the docs.

3. Add the Translation Exchange Script

On top of your jsp file load tag library with prefix tml:

<%@ page contentType="text/html; charset=UTF-8" %>  
...
<%@ taglib prefix="tml" uri="http://www.translationexchange.com/tml" %>  

Copy and paste the following code between the <head> and </head> tags of your layout file(s).

<tml:scripts/>  

Use the following code anywhere on your page to add a language selector. Optionally, you can pass the type of selector you want.

<tml:language_selector type="sideflags" />  

There are a few language selectors to choose from. You can view all the available selectors or learn how to create your own in the Language Selectors section of the docs.

4. Mark Up Your Content

<tml:tr label="Hello World"/>  
# Hello World

<tml:tr label="You have {count || message}" count="5" />  
# You have 5 messages

<tml:tr label="{user} sent {target} [bold: {count || gift}]" token.user="${current_user}" token.target="${users.anna}" token.count="1" />  
# Michael sent Anna 1 gift

<tml:tr label="{user} uploaded [bold: {count || photo}] to {actor | his, her} album." user="${current_user}" actor="${users.sam}" count="4" />  
# Michael uploaded 4 photos to his album.

Learn more about marking up your content in the Translation Markup section of the docs

5. Activate Translation Mode

Once the script has been added to your layout you can start using translation mode. To activate translation mode, press CTRL+Shift+i on your keyboard.

Once translation mode has been activated, the content of your application will be synchronized with Translation Exchange and your strings will appear in your Dashboard.

Make sure to browse your entire application while in translation mode to ensure that all your content gets sent to the Translation Exchange service.

Now that your strings have been synchronized, you can start translating. Go to the Translation Options section of the docs to learn more about the different ways your content can be translated.

Make sure to Publish your translations so that they can be seen by your users.


6. Sample Applications

The best way to start using the SDK is to run a sample application that comes bundled with this SDK.

If you are using Maven, use the following procedures:

$ git clone https://github.com/translationexchange/tml-java-j2ee-spring3-samples-foody.git

Import the project into Eclipse using the Maven plugin:

  • Import Project as existing Maven Project
  • Browse to folder where you cloned the project and select presented pom.xml project file

Configure Tomcat server in Eclipse:

  • Select Server Tag and create new server
  • Select your prefered Tomcat server, click next
    • (optional) You can change Server name or leave it default,
  • All all Resources from Available tab to Configured within Resources window and click finish
  • By default Path is /tml-spring3-samples-foody, same as name of the applicaiton and artifactId
    • you can change it to anything you prefer under server Web Module settings

How to start sample app without Eclipse:

  • Download Tomcat and extract it to any folder
  • copy .war file from /Git Cloned Directory/target/tml-spring3-samples-foody-0.2.1.war to /Tomcat Path/webapps
  • start Tomcat: bash $ bin/startup.sh
  • by default .war get extracted under webapps and availble at http://localhost:8080/tml-spring3-samples-foody-0.2.1

Before Running the Sample Application

Make sure you have Maven, Apache, Eclipse for J2EE installed.