Ext JS Translation using PHP (Zend Framework)

Question

Translation Tip 1:

I had a problem where I needed to make my application translatable for clients in other countries. All my custom strings in the application weren't covered by Ext JS's locale files so I had to come up with my own way of translating these.

Answer 1

You might want to consider using a gettext javascript plugin for the frontend, such as Jed. http://slexaxton.github.io/Jed/. That would mean you can keep using gettext dictionaries for your entire app.

I ended up creating a core.po dictionary, which contains all the backend strings, and a frontend.po dictionary which is dedicated to the frontend.

You can generate an output that is suitable for jed plugin by using a simple conteoller. I open sourced some sections of the work I did while implementing it. see https://github.com/aporat/zend-translate-skelton/blob/master/library/TranslateGettext/BackendProxyController.php

The controller generates a Jed gettext dictionary, and this javascript is included in the layout.phtml

<script src="/language?language=en"></script>

Controller:

<?php

  class TranslateGettext_BackendProxyController extends Zend_Controller_Action
  {

    /**
     * See http://slexaxton.github.com/Jed/
     * This is a json proxy for the frontend i18n
     */
    public function indexAction()
    {

        $localeCode = $this->_getParam('locale');
        $locale = new Zend_Locale($localeCode);

        $translate = Zend_Registry::get('Zend_Translate');

        if ($translate->isAvailable($locale->getLanguage())) {
            $entries = Gettext\Extractors\Po::extract(APPLICATION_PATH . '/../languages/' . $locale->getLanguage() . '/LC_MESSAGES/frontend.po');
        } else {
            $entries = Gettext\Extractors\Po::extract(APPLICATION_PATH . '/../languages/en/LC_MESSAGES/frontend.po');
        }

        echo 'var i18n = new Jed({locale_data : ';
        echo Gettext\Generators\Jed::generate($entries, true);
        echo '});';

        exit;
    }

}

Answer 2

In my application, I use mo/po files to handle the translations on the server side. Since I wanted to keep all my language strings in one central place (my .po file), I used a "Language.js" file rather than "English.js" and "French.js". The content of the file looks something like this:

window.applanguage = {
    /*General form elements*/
    login : <?=$this->translate("Login")?>,
    OK: <?=$this->translate("OK")?>,
    changepassword: <?=$this->translate("Change password")?>,
    currentpassword: <?=$this->translate("Current password")?>,
    sam: <?=$this->translate("System Access Manager")?>,
    userid: <?=$this->translate("User ID")?>,
    adminid: <?=$this->translate("Admin ID")?>,
    email: <?=$this->translate("Email")?>,
    password: <?=$this->translate("Password")?>,
    newpassword: <?=$this->translate("New password")?>,
    confirmpassword: <?=$this->translate("Confirm password")?>,
    confirm: <?=$this->translate("Confirm")?>,
    confirmation: <?=$this->translate("Confirmation")?>,
    wentwrong: <?=$this->translate("Something went wrong")?>,
    username: <?=$this->translate("Username")?>,
    passvalidity: <?=$this->translate("Password Validity (days)")?>,
    product: <?=$this->translate("Product")?>,
    accesslevel: <?=$this->translate("Access Level")?>,
    timeoutmins: <?=$this->translate("Timeout (mins)")?>,
    cancel: <?=$this->translate("Cancel")?>,
    save: <?=$this->translate("Save")?>,
    reset: <?=$this->translate("Reset")?>,
    passwordutility: <?=$this->translate("Change password utility")?>,
    expireform: <?=$this->translate("Session expired, please log in to continue.")?>,
    adduser: <?=$this->translate("Add user")?>,
    edituser: <?=$this->translate("Edit user")?>,
    removeuser: <?=$this->translate("Remove user")?>,
    resetuser: <?=$this->translate("Reset user")?>,
    add: <?=$this->translate("Add")?>
};

This way, I keep all my translations at the same place and poedit can process the file to suggest the strings that need to be translated.

Answer 3

I decided to create an "English.js" file in a folder called "resources" (though you can call it "locale" or whatever you want). In this file I created an object containing all my custom strings that would need to be translated which looked a little something like below:

window.applanguage = {
    /*General form elements*/
    login : "Login",
    OK: "OK",
    changepassword: "Change password",
    currentpassword: "Current password",
    sam: "System Access Manager",
    userid: "User ID",
    adminid: "Admin ID",
    email: "Email",
    password: "Password",
    newpassword: "New password",
    confirmpassword: "Confirm password",
    confirm: "Confirm",
    confirmation: "Confirmation",
    wentwrong: "Something went wrong",
    username: "Username",
    passvalidity: "Password Validity (days)",
    product: "Product",
    accesslevel: "Access Level",
    timeoutmins: "Timeout (mins)",
    cancel: "Cancel",
    save: "Save",
    reset: "Reset",
    passwordutility: "Change password utility",
    expireform: "Session expired, please log in to continue.",
    adduser: "Add user",
    edituser: "Edit user",
    removeuser: "Remove user",
    resetuser: "Reset user",
    add: "Add"
};

Wherever I needed my custom string translated I just replaced it with window.applanguage.string_to_translate. I.E:

Ext.Msg.show({
    closable: false,
    title: window.applanguage.info,
    msg: window.applanguage.selectuserfirst,
    buttons: Ext.Msg.OK,
    icon: Ext.Msg.INFO
});

Now if you wanted your application in French (although tedious to do) you can copy the "English.js" file and name is "French,js" and change all the string to french.

NB: Don't forget to include your language file in the <header> of your web file. You can dynamically change this by having a global in PHP (I set mine in the ZF application.ini file) with the language to you want to display and then in your header you can then have the line:

<script type="text/javascript" src="../extjs/resources/<?php echo $languageFile; ?>.js"></script>

Translation Tip 2:

If you needed to translate all the Ext JS components to language other than English you can include the EXT JS locale file in your header. For example if you want French: <script type="text/javascript" src="../ext-4.2.0/locale/ext-lang-fr.js"></script>

Using the dynamic PHP option it would look something like this (This is for ZF but you could just use a global variable in your app):

// get params from application.ini
$config = new Zend_Config_Ini('../application/configs/application.ini', 'development');
$langFile = $config->tranlation->language->file;
$extLang = null;
switch($langFile){
    case 'English':
        $extLang= "ext-lang-en_GB";
        break;
    case 'French':
        $extLang= "ext-lang-fr";
        break;
    case 'Spanish':
        $extLang= "ext-lang-es";
        break;
    case 'German':
        $extLang= "ext-lang-de";
        break;
    case 'Chinese (Simplified)':
        $extLang= "ext-lang-zh_CN";
        break;
    case 'Chinese (Traditional)':
        $extLang= "ext-lang-zh_TW";
        break;
}

and then in your <header> place this: <script type="text/javascript" src="../ext-4.2.0/locale/<?php echo $extLang; ?>.js"></script>