JSF 2.0: Componentes PrimeFaces 2.2.1 - Parte 5
Autor: andii.brunetta | Publicado: 2011-06-07T19:32:00-04:00


Depois de vermos sobre menus do PrimeFaces, nessa postagem vamos ver alguns outros componentes.&nbsp;Vamos precisar de algumas umas imagens e algumas bibliotecas extras, baixe por aqui.



Estrutura do projeto



Caso não saiba como montar a estrutura do projeto&nbsp;veja aqui.




Depois de pronto o projeto fica com essa estrutura:










O primeiro componente que veremos hoje é o dataExporter&nbsp;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:
public class Carro {

    private String marca;
    private int ano;
    private String placa;
    private String cor;
    private String modelo;

    public Carro(String marca, int ano, String placa, String cor, String modelo) {
        this.marca = marca;
        this.ano = ano;
        this.placa = placa;
        this.cor = cor;
        this.modelo = modelo;
    }

   //GETTERS e SETTERS
}


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 &nbsp;uma nova classe Java com o nome de CarroBean:
@Named
@RequestScoped
public class CarroBean {

    private List&lt;Carro&gt; carros;

    public CarroBean() {
        listarCarros();
    }

    private void listarCarros() {
        carros = new ArrayList&lt;Carro&gt;();
        carros.add(new Carro("Fiat", 2011, "DFV 3455", "Verde", "Novo Uno"));
        carros.add(new Carro("Toyota", 2009, "ADV 3245", "Prata", "Prado"));
        carros.add(new Carro("Volks", 2010, "AAC 2351", "Vermelho", "Gol"));
        carros.add(new Carro("Volks", 2011, "EGF 1245", "Preto", "Cross Fox"));
    }

    //Gerar GET e SET
}

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.&nbsp;Agora vamos para a página index:
&lt;h:form&gt;
    &lt;p:dataTable id="tabelaCarros" value="#{carroBean.carros}" var="c"&gt;
        &lt;p:column&gt;
            &lt;f:facet name="header"&gt;Marca&lt;/f:facet&gt;
            &lt;h:outputText value="#{c.marca}" /&gt;
        &lt;/p:column&gt;
        &lt;p:column&gt;
            &lt;f:facet name="header"&gt;Modelo&lt;/f:facet&gt;
            &lt;h:outputText value="#{c.modelo}" /&gt;
        &lt;/p:column&gt;
        &lt;p:column&gt;
            &lt;f:facet name="header"&gt;Ano&lt;/f:facet&gt;
            &lt;h:outputText value="#{c.ano}" /&gt;
        &lt;/p:column&gt;
        &lt;p:column&gt;
            &lt;f:facet name="header"&gt;Cor&lt;/f:facet&gt;
            &lt;h:outputText value="#{c.cor}" /&gt;
        &lt;/p:column&gt;
        &lt;p:column&gt;
            &lt;f:facet name="header"&gt;Placa&lt;/f:facet&gt;
            &lt;h:outputText value="#{c.placa}" /&gt;
        &lt;/p:column&gt;
    &lt;/p:dataTable&gt;

    &lt;h:commandLink&gt;
        &lt;p:graphicImage value="/imagens/xls.png" /&gt;
        &lt;p:dataExporter type="xls" target="tabelaCarros" fileName="carros" /&gt;
    &lt;/h:commandLink&gt;
    &lt;h:commandLink&gt;
        &lt;p:graphicImage value="/imagens/pdf.png" /&gt;
        &lt;p:dataExporter type="pdf" target="tabelaCarros" fileName="carros"/&gt;
    &lt;/h:commandLink&gt;
&lt;/h:form&gt;

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.

Nosso segundo componente é o pickList:






Vamos direto ao código, então dentro do pacote controle (criado anteriormente) vamos criar uma classe com o nome de PicklistBean:
@Named
@RequestScoped
public class PicklistBean {

    private DualListModel&lt;String&gt; cores;

    public PicklistBean() {
        listarCores();
    }

    private void listarCores() {
        List&lt;String&gt; lista = new ArrayList&lt;String&gt;();
        List&lt;String&gt; selecionados = new ArrayList&lt;String&gt;();

        lista.add("Azul");
        lista.add("Amarelo");
        lista.add("Vermelho");
        lista.add("Verde");
        lista.add("Roxo");

        cores = new DualListModel&lt;String&gt;(lista, selecionados);
    }

    public void mostrarCoresSelecionadas() {
        for (String cor : cores.getTarget()) {
            System.out.println("Esta cor é: " + cor);
        }
    }

    //Gerar GET e SET
}

Veja que usamos um DualListModel (do próprio PrimeFaces), para inicializar ele eu preciso informar duas listas, uma é dos os objetos a serem selecionados (chamada de source) e a outra representará o objetos selecionados(target), o método mostrarCoresSelecionadas() percorre a lista de cores selecionadas, repare que ele dá um getTarget() ... para pegar a lista original é só dar um getSource().
&lt;h:form&gt;
    &lt;p:pickList value="#{picklistBean.cores}" var="cor" iconOnly="true" itemLabel="#{cor}" itemValue="#{cor}"&gt;
        &lt;f:facet name="sourceCaption"&gt;Lista&lt;/f:facet&gt;
        &lt;f:facet name="targetCaption"&gt;Selecionadas&lt;/f:facet&gt;
    &lt;/p:pickList&gt;
    &lt;p:commandButton value="Ver cores selecionadas" actionListener="#{picklistBean.mostrarCoresSelecionadas}" /&gt;
&lt;/h:form&gt;

Ao final do código eu coloquei um commandButton que chama o método para listar as cores selecionadas.

O nosso próximo componente é o printer, ele é um componente que chama a função de impressão do navegador, com a diferença que o programador define qual a parte da página será impressa, para usar ele eu vou precisar da imagem printer.png&nbsp;(no arquivo que eu passei), coloque-o dentro do diretório imagens. Vou mostra-lo junto com o próximo componente, mas antes segue o código:
&lt;h:outputLink id="lnk" value="#"&gt;
    &lt;p:printer target="quebraCabeca" /&gt;
    &lt;p:graphicImage value="/imagens/print.png" /&gt;
&lt;/h:outputLink&gt;

Repare que o target se refere a um elemento quebraCabeca, ele corresponde a uma parte da página que eu quero que seja impresso, nesse caso este quebraCabeca será o próximo elemento a ser feito.

Para finalizar vamos ver o componente dashboard, que em um sistema comercial eu não vi muita utilidade, então para este exemplo eu resolvi criar um quebra cabeça meio desengonçado com ele!






Quanto a impressora que aparece acima na imagem, esta corresponde ao componente printer. Vamos começar então com o nosso quebra-cabeça, primeiramente precisamos pegar as imagens que eu passei lá no inicio e coloca-las no projeto. Primeiro dentro do diretório imagens crie um novo diretório com o nome de jogo: dentro dele coloque as imagens a.jpg, b.jpg até a imagem i.jpg... Abaixo segue a classe Java QuebraCabecaBean que deve ser criado dentro do pacote controle:
@Named
@RequestScoped
public class QuebraCabecaBean {

    private DashboardModel pecas;

    public QuebraCabecaBean() {
        listarPecas();
    }

    private void listarPecas() {
        pecas = new DefaultDashboardModel();
        DashboardColumn coluna1 = new DefaultDashboardColumn();
        DashboardColumn coluna2 = new DefaultDashboardColumn();
        DashboardColumn coluna3 = new DefaultDashboardColumn();

        coluna1.addWidget("f");
        coluna1.addWidget("c");
        coluna1.addWidget("g");

        coluna2.addWidget("h");
        coluna2.addWidget("a");
        coluna2.addWidget("d");

        coluna3.addWidget("i");
        coluna3.addWidget("e");
        coluna3.addWidget("b");

        pecas.addColumn(coluna1);
        pecas.addColumn(coluna2);
        pecas.addColumn(coluna3);
    }

    //Gerar GET e SET
}

Veja que eu incluo as letras embaralhadas dentro do DashboardColumn, realmente para iniciarem embaralhadas, só temos um detalhe: para cada letra que eu coloquei nessa lista eu preciso de um componente com o id do mesmo nome dentro do componente dashboard, apenas colocar os painéis no xhtml com as imagens não é suficiente eu preciso ter esse espelho entre o bean e a página:
&lt;h:form id="quebraCabeca"&gt;
    &lt;p:dashboard model="#{quebraCabecaBean.pecas}"&gt;
        &lt;p:panel id="f"&gt;
            &lt;p:graphicImage url="/imagens/jogo/f.jpg" /&gt;
        &lt;/p:panel&gt;
        &lt;p:panel id="c"&gt;
            &lt;p:graphicImage url="/imagens/jogo/c.jpg" /&gt;
        &lt;/p:panel&gt;
        &lt;p:panel id="g"&gt;
            &lt;p:graphicImage url="/imagens/jogo/g.jpg" /&gt;
        &lt;/p:panel&gt;

        &lt;p:panel id="h"&gt;
            &lt;p:graphicImage url="/imagens/jogo/h.jpg" /&gt;
        &lt;/p:panel&gt;
        &lt;p:panel id="a"&gt;
            &lt;p:graphicImage url="/imagens/jogo/a.jpg" /&gt;
        &lt;/p:panel&gt;
        &lt;p:panel id="d"&gt;
            &lt;p:graphicImage url="/imagens/jogo/d.jpg" /&gt;
        &lt;/p:panel&gt;

        &lt;p:panel id="i"&gt;
            &lt;p:graphicImage url="/imagens/jogo/i.jpg" /&gt;
        &lt;/p:panel&gt;
        &lt;p:panel id="e"&gt;
            &lt;p:graphicImage url="/imagens/jogo/e.jpg" /&gt;
        &lt;/p:panel&gt;
        &lt;p:panel id="b"&gt;
            &lt;p:graphicImage url="/imagens/jogo/b.jpg" /&gt;
        &lt;/p:panel&gt;
    &lt;/p:dashboard&gt;
&lt;/h:form&gt;


A solução do quebra cabeça é este:




OBS: Quanto ao quebra cabeça este foi improvisado, já que a postagem original era para ser falado sobre os gráficos do PrimeFaces, mas que infelizmente não consegui fazer funcionar.
Mas pensem comigo, antes isso do que nada né!? :P