Se esta querendo aprender ou iniciar novos projetos em Flex, clique aqui

Bom galera, aplicações multi-idiomas, parece difícil a primeira vista, porém é fácil desenvolver, O único detalhe é que qualquer texto que aparecerá ao usuário deverá estar no XML, e este XML deverá ser traduzido para todos os idiomas que o sistema será apresentado.

Para que o sistema funcione em multi-idiomas, criei uma classe que carrega o XML e passe todo seu conteúdo para uma variável.

Arquivo Lang.as
public class Lang
{
    private static var _instance:Lang
    public static function getInstance():Lang
    {
        if(_instance == null)
            _instance = new Lang
        return _instance
    }

    [Bindable]
    public var xml:XML;

    public function getLang(idioma:String):void
    {
        var request:URLLoader = new URLLoader();
        request.addEventListener(Event.COMPLETE, setLang);
        request.load(new URLRequest("lang/" + idioma + ".xml"));
    }

    public function setLang(e:Event):void
    {
        xml = new XML(e.target.data);
    }
}

Veja que a variável XML eu declarei como [Bindable], isto fará que todas as variáveis que possuem referência a ela sejam atualizadas, toda vês que ela for. Esta função recebe inicialmente uma String com valor “pt-BR“, e com isso, carregará o XML em lang/pt-BR.xml. Ao completar o carregamento a função setLang() será invocada, que passará o conteúdo do XML para a variável xml.

No createComplete da aplicação, chamamos o método init() que carrega inicialmente a linguagem pt-BR.

Arquivo main.mxml
private function init():void
{
    // inicia em português brasil
    Lang.getInstance().getLang('pt-BR');
}

Em outros módulos, quando precisamos do arquivo de traduções, apenas o chamamos

Arquivo Sobre.mxml
<mx:Label x="10"
          y="22"
          text="Eduardo Kraus me"
          fontSize="15"
          fontWeight="bold"
          width="390"
          textAlign="center"/>
<mx:Label x="10"
          y="45"
          text="{Lang.getInstance().xml.sobre.versao}"
          width="390"
          textAlign="center"/>
<mx:Label x="10"
          y="101"
          text="{Lang.getInstance().xml.sobre.desenvolvido}"
          width="390"/>
<mx:LinkButton x="141.5"
               y="71"
               label="flex.eduardokraus.com"
               click="navigateToURL(new URLRequest(''))"/>

Veja agora a estrutura do XML da linguagem português.

Arquivo pt-BR.xml
<?xml version="1.0"?>
<lang>
    <menu>
        <menuitem label="Arquivo" >
            <menuitem label="Abrir"  data="abrir" />
            <menuitem label="Salvar" data="salvar" />
        </menuitem>
        <menuitem label="Ajuda">
            <menuitem label="Sobre" data="sobre" />
        </menuitem>
    </menu>
    <idiomas>
        <idioma>es-ES</idioma>
        <idioma>en-US</idioma>
    </idiomas>
    <botao>
        <texto>Botão</texto>
        <alerta>Este é um alerta em Português</alerta>
    </botao>
    <texto>Texto Simples</texto>
    <sobre>
        <titulo>Sobre o sistema do Alemão</titulo>
        <versao>Versão 1.0</versao>
        <desenvolvido>Desenvolvido por Eduardo Kraus. Todos os direitos Reservados.</desenvolvido>
    </sobre>
</lang>

Menu

Um detalhe interessante que criei neste exemplo foi o menu. Fiz ele totalmente no XML. Na estrutura do XML do menu, tem que seguir a mesma estrutura exigida no livedocs.

Arquivo main.mxml
<mx:MenuBar labelField="@label" itemClick="menuPrincipalClicado(event);"
            dataProvider="{Lang.getInstance().xml.menu.menuitem}"/>

PS: o atributo data não deve ser traduzido, somente deve traduzir o atributo label.

Botões para trocar as linguagens

Ao invés de definir um Buttoon e atribuir uma Icon a ele, eu defini uma Image e defini-o como Button. Veja abaixo, definindo buttonMode como “true” ele a imagem se transforma em um botão e definindo useHandCursor como “true”, terá o cursor Hand.

Arquivo main.mxml
<mx:Image height="30"
          click="Lang.getInstance().getLang(String(event.currentTarget.getRepeaterItem()))"
          source="lang/img/{ rp.currentItem }.png"
          buttonMode="true"/>

Para mostrar todas as imagens que estão definidos no XML, estou utilizando a classe Repeater, Esta classe repete enquanto há itens vindo do XML. Utilizei mesmo nome para a imagem e a linguagem para facilitar as chamadas.

Veja agora como ficou:

Veja aqui o código fonte completo.

Gostou? Não esqueça de curtir!

Ou compartilhe o link com seus amigos

9 comentários

Deixe uma resposta

  1. Eduardo, estou querendo usar a implementação multi-idioma que vc fez acima em um sistema flex/java que estou desenvolvendo. Está funcionando ok, mas eu preciso que o idioma venha da janela de login, que é uma pop-up que abre no "creationComplete" do Application. O que ocorre é que não consigo carregar a linguagem a partir desse pop-up externo. Tens alguma idéia de como eu poderia proceder? Obrigado.

     
  2. Tenta baixa-lo novamente. O que publiquei esta funcionando em meu ambiente.

     
  3. Alemão, no meu código quando vou chamar a classe Lang, da erro, dizendo que não existe.
    O que eu faço?

     
  4. ola Vítor

    Esta pode não ser a melhor, mais é concerteza a mais fácil.

     
  5. Olá, este é o melhor jeito de se trabalhar com multi-idiomas em flex?

     
  6. É normal mesmo. Este tempo é o tempo do carregamento dos dados do Servidor.

    Para evitar este tempo, podes compilar o SWF com o XML, e assim não haverá este tempo.

     
  7. Gostei do tutorial, excelente, só achei muito devagar a troca do idioma, é normal isso?

     
  8. Gostei do tutorial.