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

Gerando Relatórios simples Com DataExporter Primefaces



Faaaaaaaaaaaaaaaaaaaaaaaala galera! hoje vamos ver um pouco sobre o componente DataExporter do Priiiiiiiiiiiiiiiiiiiiiime Faces! Com ele conseguimos fácilmente gerar relatórios e arquivos simples de nossa aplicação! Lets go!

O componente que veremos hoje é o dataExporter que serve para exportar os dados para arquivos PDF, XLS, XML ou CSV de uma determinada dataTable, então para isso eu preciso de uma dataTable:


Código-fonte:
Para este exemplo vamos precisar de uma classe Carro (pojo), então dentro de pacote de códigos fonte crie um novo pacote com o nome de model, e dentro dele crie uma nova classe Java com o nome de Carro:
01public class Carro {
02
03    private String marca;
04    private int ano;
05    private String placa;
06    private String cor;
07    private String modelo;
08
09    public Carro(String marca, int ano, String placa, String cor, String modelo) {
10        this.marca = marca;
11        this.ano = ano;
12        this.placa = placa;
13        this.cor = cor;
14        this.modelo = modelo;
15    }
16
17   //GETTERS e SETTERS
18}

Agora vamos criar o nosso bean que vai dar suporte à nossa dataTable, para isso crie um pacote com o nome de controle, dentro desse pacote crie  uma nova classe Java com o nome de CarroBean:

01@Named
02@RequestScoped
03public class CarroBean {
04
05    private List<Carro> carros;
06
07    public CarroBean() {
08        listarCarros();
09    }
10
11    private void listarCarros() {
12        carros = new ArrayList<Carro>();
13        carros.add(new Carro("Fiat"2011"DFV 3455""Verde""Novo Uno"));
14        carros.add(new Carro("Toyota"2009"ADV 3245""Prata""Prado"));
15        carros.add(new Carro("Volks"2010"AAC 2351""Vermelho""Gol"));
16        carros.add(new Carro("Volks"2011"EGF 1245""Preto""Cross Fox"));
17    }
18
19    //Gerar GET e SET
20}
Bom nem tem o que explicar o código acima... Para este exemplo vamos precisar das imagens (do link que disponibilizei lá no inicio), por enquanto só irei precisar de: xsl.png e pdf.png, dentro de páginas web, crie um novo diretório com o nome de imagens, e coloque as imagens dentro dela. Agora vamos para a página index:

01<h:form>
02    <p:dataTable id="tabelaCarros" value="#{carroBean.carros}" var="c">
03        <p:column>
04            <f:facet name="header">Marca</f:facet>
05            <h:outputText value="#{c.marca}" />
06        </p:column>
07        <p:column>
08            <f:facet name="header">Modelo</f:facet>
09            <h:outputText value="#{c.modelo}" />
10        </p:column>
11        <p:column>
12            <f:facet name="header">Ano</f:facet>
13            <h:outputText value="#{c.ano}" />
14        </p:column>
15        <p:column>
16            <f:facet name="header">Cor</f:facet>
17            <h:outputText value="#{c.cor}" />
18        </p:column>
19        <p:column>
20            <f:facet name="header">Placa</f:facet>
21            <h:outputText value="#{c.placa}" />
22        </p:column>
23    </p:dataTable>
24
25    <h:commandLink>
26        <p:graphicImage value="/imagens/xls.png" />
27        <p:dataExporter type="xls" target="tabelaCarros" fileName="carros" />
28    </h:commandLink>
29    <h:commandLink>
30        <p:graphicImage value="/imagens/pdf.png" />
31        <p:dataExporter type="pdf" target="tabelaCarros" fileName="carros"/>
32    </h:commandLink>
33</h:form>
No código acima eu tenho uma dataTable normal (vista em postagens anteriores) e logo abaixo dela eu tenho os dataExporter, o detalhe mais importante é quanto a propriedade target, veja que ela corresponde ao id da tabela.

E a bruxaria está pronta! Até a próxima cambada :)

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.