quinta-feira, 9 de outubro de 2014

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

Nenhum comentário:

Postar um comentário

Admin: Bruno

Olá Galera! muito grato por estarem acessando nosso blog. Espero que seja possível transmitir de forma compreensível um pouco de meus conhecimentos em programação, para esta comunidade de desenvolvedores que cresce cada vez mais! Espero que Gostem! Abraço! E meu enorme obrigado à Renato Simões, Átila Soares,Wanderson Quinto, Emerson e a toda galera que sempre ajudou meu sincero obrigado....
Especialmente a Natalia Failache e Rita de Cassia que sempre apoiaram este sonho....

De seu amigo Bruno Rafael.