Aplicação Flex MULTI linguagem com XML

E ai galera! Seguinte, apareceu uma demanda na empresa qual trabalho para internacionaizar a aplicação flex através de XML. Dei umas estudadas e efetuei alguns testes de como fazer, com isso cheguei em um resultado positivo que passo agora um exemplo à vocês !

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="teste"
               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>teste Bruno. </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.

É isso ai :p