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
É isso ai :p
Comentários
Postar um comentário