FlairLoc – Automatic Flex Localization

FlairLoc is an Adobe® AIR™ application to localize Adobe® Flex® applications.
The software is currently in public beta so please use at your own risk.

Features

  • Change resources in a user interface with search capability
  • Extract resource keys from source code and synchronizes it with all locale sets
  • Automatic translation into 42 languages with the Google Translate API
  • Add new automatic translated languages in only 4 CLICKS
  • Generation of locale compile statement and Ant parameters

Check the screenshots and screenvideo at the end of this page.

Install
FlairLoc uses a badge installer which means only click it, wait a few seconds and in the dialog select “Open” and confirm the rest:

Please upgrade your Flash Player This is the content that would be shown if the user does not have Flash Player 9.0.115 or higher installed.

Extracting resource keys from source
To automatically extract all resource keys from your source code browse your source directory and set the prefix which all your resource keys need to start with. To have something unique source code wide I recommend using something like $APP_NAME/. If you were successful you should see the number of parsed files (*.as, *.mxml), the lines of code (LOC) examined and the number of found keys which are also shown in the datagrid below.

Synchronizing your locales with the source code keys
You could either start from an already existing locale directory or simply create a new one.

Creating a new locale directory is the supposed usecase for this beta version.
In this beta version I expect that you to have used only one resource bundle across your Flex application. Multiple resource bundles will be supported soon:

  • Browse and create/select a new directory in the Localization panel
  • Browse your source directory in the Source panel
  • Click the “Sync From Source” button and you should see the generated en_US locale
  • Select the en_US locale in the datagrid and you see the resource in the Resources panel
  • Change the values to your needs and save it.

FlairLoc sets the default value for a key with the part after the last “/” in the key name. So if you have a key like: $FLAIRLOC/ResourceBundles FlairLoc will take the word “ResourceBundles” and add a space between the CamelCase so the result is “Resource Bundles”. So if your resource key naming fits this pattern you should already get a good result with the default values. You define a prefix to be added in the settings and other patterns are supposed to be supported in future version.
Let’s go a step further and add the language Hindi for demonstration purpose or because I know you always wanted to learn Hindi. No offense though, in fact I find it to be very beautiful.

  • Click the “+” button in the Localization Panel or right-click the datagrid and add Hindi
  • Select the created locale entry
  • Click “Auto Translate…” button
  • Click “Translate” (verify first en_US is set as From Language)
  • Wait a bit and enjoy coming in the translation. When ready save it and your app speaks Hindi!

Working with an already existing locale set

If you select an existing directory please carefully read this disclaimer!
The software is still in beta status and there might be bugs so there might be untested use case so be sure to work only on a backed up version of your project!

When you select your locale directory FlairLoc parses the directories and reads out all locales, resource bundles and keys. Currently FlairLoc has only been heavy tested with one resource bundle so if you have multiple you might want to wait for a later version of FlairLoc.
Otherwise you should be able to change the key values and also edit multiline values and see comments made to a single resource key.
If you want synchronize your locales with a source directory ALL UNUSED keys will be removed. Of course the file behind only gets changed when you explicitly save it.

Encoding
When you use Eclipse for Flex Development you should change the encoding for the resource bundle files from default ISO-8859-1 to UTF-8.

Flex Localization
If you are new to Flex Localization please check my blog post with a detailed description.
In short you have to do this:

  • Add locale dir and locales as compiler args: -source-path+=../locale/{locale} -locale en_US de_DE pt_BR
  • Create missing resource bundles with ./bin/copylocale en_US MISSING_LOCALE (called from Flex SDK directory)
  • Add metadata to let compiler include resource bundles:
    //MXML
    <mx:Metadata>[ResourceBundle("resourceBundleName")]</mx:Metadata>
    // Actionscript
    [ResourceBundle("resourceBundleName")]public class YourClass{...}
  • Localize with
    // MXML
    <mx:Label text="@Resource(bundle='resourceBundleName', key='$Foo/Hello')" />
    //Binding for runtime changing:
    <mx:Label text="{resourceManager.getString('resourceBundleName', '$Foo/Hello')}" />
    //with placeholder $Foo/Welcome=Welcome {0}!
    <mx:Label text="{resourceManager.getString('resourceBundleName', '$Foo/Welcome', [user.username])}" />
    // ActionScript
    ResourceManager.getInstance().getString("resourceBundleName", "$Foo/Hello");
    // Switch locale with fallback
    resourceManager.localeChain = ["de_DE", "en_US"];

Screenshots

Dreamweaver
Uploaded with plasq‘s Skitch!

Screenvideo