quinta-feira, 16 de junho de 2011

Flex com Multilinguagem (internacionalização)

Olá!!


Hoje vou mostrar como fazer um sistema Multilinguagem (alterando locales) no Flex. Conforme o exemplo:

*Para ver o fonte, clique com o botão direito do mouse e ViewSource.

Para isso você precisa ter os locales das linguagens. Os locales podem ser baixados nesses links:
Estes locales devem ser colocados no diretório: "{instalaçãodoflex}/sdks/{versaodosdk}/frameworks/locale/".

Configurando o projeto
Clique com o botão direito do mouse no projeto, vá em "properties" depois em "Flex Compiler", em "Additional compiler arguments:" coloque o seguinte:
  -locale en_US pt_BR -source-path+=../locale/{locale}


Ficando assim:


Após configurar o locale do seu projeto, você deve criar as pastas "{projeto}/locale/en_US" e "{projeto}/locale/pt_BR" e adicionar o arquivo "localization.properties" dentro de cada pasta.

en_US
label_selecione_linguagem=Select your language
label_nome=Name
label_sobrenome=Last Name
send_btn=Send

pt_BR
label_selecione_linguagem=Selecione a linguagem
label_nome=Nome
label_sobrenome=Sobrenome
send_btn=Enviar


Para ler estes arquivos faz assim:
<?xml version="1.0" encoding="utf-8"?>
<s:Application viewSourceURL="srcview/index.html"
               xmlns:fx="http://ns.adobe.com/mxml/2009"
               xmlns:mx="library://ns.adobe.com/flex/mx"
               xmlns:s="library://ns.adobe.com/flex/spark">
    <s:layout>
        <s:VerticalLayout/>
    </s:layout>

    <fx:Script>
        <![CDATA[
            import mx.resources.ResourceBundle;
            
            [Bindable]
            private var locales:Array = ['pt_BR', 'en_US'];
            
            private static const LOCALIZATION:String = 'localization';
            
            private function changeLanguage():void {
                this.resourceManager.localeChain = [cbxLanguage.selectedItem];
            }
        ]]>
    </fx:Script>

    <fx:Metadata>
  [ResourceBundle('localization')]
 </fx:Metadata>

    <mx:Form>
        <mx:FormItem label="{resourceManager.getString( LOCALIZATION , 'label_selecione_linguagem' )}:">
            <mx:ComboBox id="cbxLanguage"
                         change="changeLanguage()"
                         dataProvider="{locales}"/>
        </mx:FormItem>

        <mx:FormItem label="{resourceManager.getString( LOCALIZATION , 'label_nome' )}:">
            <s:TextInput/>
        </mx:FormItem>

        <mx:FormItem label="{resourceManager.getString( LOCALIZATION , 'label_sobrenome' )}:">
            <s:TextInput/>
        </mx:FormItem>

        <s:Button label="{resourceManager.getString( LOCALIZATION , 'send_btn' )}"/>
    </mx:Form>
</s:Application>


sendo a variável LOCALIZATION o nome do arquivo criado (pode ter vários).
para ler cada linha do arquivo utiliza-se:
resourceManager.getString(LOCALIZATION, 'string')


Por hoje é isso!!

Comente!


Um comentário:

  1. Realmente para quem trabalha com desenvolvimento off-shore (para 'fora' do BR), o Locale ajuda muito na hora de internacionalizar a app. Minha única restrição com esse método é q os locales precisam ser compilados juntos com o SWF e se vc precisar corrigir alguma tradução, precisará recompilar a app. Eu prefiro trabalhar com arquivos XML/.properties q podem ser carregados em runtime (via URLLoader) e entao anexados ao ResourceManager via método addResourceBundle().

    Mas o exemplo tá legal, parabéns.

    ResponderExcluir