Performing automated language translations with Flex and Google

VIEW THE DEMO

DOWNLOAD THE SOURCE CODE

From the Star Trek Universal Translator to the Babel Fish from The Hitchhiker's Guide to the Galaxy, instant language translation has been a popular concept. Today language translation can be performed by a number of web services, with Yahoo adopting the name Babel Fish for their translation web site.

Google provides a similar service under the much less imaginative name of Google Translate. Despite the dull name, Google Translate is a powerful language translation tool, and much of that functionality is exposed to developers via the Google AJAX Language API. This API is focused mainly on JavaScript developers, but fortunately Google offers a REST API for use with other languages, like ActionScript. This tutorial will step you through the process of interacting with this REST API from Flex.

Create a new Flex project, and add the following UI elements to the MXML Application element.

<mx:TextArea wordWrap="true" top="10" bottom="40" right="10" left="180" id="txtMainText"/>

<mx:List bottom="10" top="10" left="10" id="lstLangages" dataProvider="{languages}" width="162"></mx:List>

<mx:Button label="Translate" id="btnTranslate" bottom="10" right="10" click="btnTranslateClicked(event)"/>

This creates a TextArea to input the text to be translated, a List that will hold all the languages that are available for translation, and a Button that will trigger that actual translation.

Create an ArrayCollection using the code below. This is a list of the languages that Google Translate supports. Google Translate works with language codes (two to four character strings that identify the language), so the ArrayCollection holds objects with the name of the language in a label property (which is way gets displayed in the List), and the language code in the data property.

The id of the ArrayCollection is used in the dataProvider attribute for the List in step 1.

<mx:ArrayCollection id="languages">

<mx:source>

<mx:Object label='AFRIKAANS' data='af'/>

<mx:Object label='ALBANIAN' data='sq'/>

<mx:Object label='AMHARIC' data='am'/>

<mx:Object label='ARABIC' data='ar'/>

<mx:Object label='ARMENIAN' data='hy'/>

<mx:Object label='AZERBAIJANI' data='az'/>

<mx:Object label='BASQUE' data='eu'/>

<mx:Object label='BELARUSIAN' data='be'/>

<mx:Object label='BENGALI' data='bn'/>

<mx:Object label='BIHARI' data='bh'/>

<mx:Object label='BULGARIAN' data='bg'/>

<mx:Object label='BURMESE' data='my'/>

<mx:Object label='CATALAN' data='ca'/>

<mx:Object label='CHEROKEE' data='chr'/>

<mx:Object label='CHINESE' data='zh'/>

<mx:Object label='CHINESE_SIMPLIFIED' data='zh-CN'/>

<mx:Object label='CHINESE_TRADITIONAL' data='zh-TW'/>

<mx:Object label='CROATIAN' data='hr'/>

<mx:Object label='CZECH' data='cs'/>

<mx:Object label='DANISH' data='da'/>

<mx:Object label='DHIVEHI' data='dv'/>

<mx:Object label='DUTCH' data='nl'/>

<mx:Object label='ENGLISH' data='en'/>

<mx:Object label='ESPERANTO' data='eo'/>

<mx:Object label='ESTONIAN' data='et'/>

<mx:Object label='FILIPINO' data='tl'/>

<mx:Object label='FINNISH' data='fi'/>

<mx:Object label='FRENCH' data='fr'/>

<mx:Object label='GALICIAN' data='gl'/>

<mx:Object label='GEORGIAN' data='ka'/>

<mx:Object label='GERMAN' data='de'/>

<mx:Object label='GREEK' data='el'/>

<mx:Object label='GUARANI' data='gn'/>

<mx:Object label='GUJARATI' data='gu'/>

<mx:Object label='HEBREW' data='iw'/>

<mx:Object label='HINDI' data='hi'/>

<mx:Object label='HUNGARIAN' data='hu'/>

<mx:Object label='ICELANDIC' data='is'/>

<mx:Object label='INDONESIAN' data='id'/>

<mx:Object label='INUKTITUT' data='iu'/>

<mx:Object label='IRISH' data='ga'/>

<mx:Object label='ITALIAN' data='it'/>

<mx:Object label='JAPANESE' data='ja'/>

<mx:Object label='KANNADA' data='kn'/>

<mx:Object label='KAZAKH' data='kk'/>

<mx:Object label='KHMER' data='km'/>

<mx:Object label='KOREAN' data='ko'/>

<mx:Object label='KURDISH' data='ku'/>

<mx:Object label='KYRGYZ' data='ky'/>

<mx:Object label='LAOTHIAN' data='lo'/>

<mx:Object label='LATVIAN' data='lv'/>

<mx:Object label='LITHUANIAN' data='lt'/>

<mx:Object label='MACEDONIAN' data='mk'/>

<mx:Object label='MALAY' data='ms'/>

<mx:Object label='MALAYALAM' data='ml'/>

<mx:Object label='MALTESE' data='mt'/>

<mx:Object label='MARATHI' data='mr'/>

<mx:Object label='MONGOLIAN' data='mn'/>

<mx:Object label='NEPALI' data='ne'/>

<mx:Object label='NORWEGIAN' data='no'/>

<mx:Object label='ORIYA' data='or'/>

<mx:Object label='PASHTO' data='ps'/>

<mx:Object label='PERSIAN' data='fa'/>

<mx:Object label='POLISH' data='pl'/>

<mx:Object label='PORTUGUESE' data='pt-PT'/>

<mx:Object label='PUNJABI' data='pa'/>

<mx:Object label='ROMANIAN' data='ro'/>

<mx:Object label='RUSSIAN' data='ru'/>

<mx:Object label='SANSKRIT' data='sa'/>

<mx:Object label='SERBIAN' data='sr'/>

<mx:Object label='SINDHI' data='sd'/>

<mx:Object label='SINHALESE' data='si'/>

<mx:Object label='SLOVAK' data='sk'/>

<mx:Object label='SLOVENIAN' data='sl'/>

<mx:Object label='SPANISH' data='es'/>

<mx:Object label='SWAHILI' data='sw'/>

<mx:Object label='SWEDISH' data='sv'/>

<mx:Object label='TAJIK' data='tg'/>

<mx:Object label='TAMIL' data='ta'/>

<mx:Object label='TAGALOG' data='tl'/>

<mx:Object label='TELUGU' data='te'/>

<mx:Object label='THAI' data='th'/>

<mx:Object label='TIBETAN' data='bo'/>

<mx:Object label='TURKISH' data='tr'/>

<mx:Object label='UKRAINIAN' data='uk'/>

<mx:Object label='URDU' data='ur'/>

<mx:Object label='UZBEK' data='uz'/>

<mx:Object label='UIGHUR' data='ug'/>

<mx:Object label='VIETNAMESE' data='vi'/>

<mx:Object label='WELSH' data='cy'/>

<mx:Object label='YIDDISH' data='yi'/>

</mx:source>

</mx:ArrayCollection>