JSF 2.0: Componentes PrimeFaces 2.2.1 - Parte 5

Depois de vermos sobre menus do PrimeFaces, nessa postagem vamos ver alguns outros componentes. 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 veja aqui.

Depois de pronto o projeto fica com essa estrutura:

O primeiro 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:

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  uma nova classe Java com o nome de CarroBean:

@Named
@RequestScoped
public class CarroBean {

    private List<Carro> carros;

    public CarroBean() {
        listarCarros();
    }

    private void listarCarros() {
        carros = new ArrayList<Carro>();
        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. Agora vamos para a página index:

<h:form>
    <p:dataTable id="tabelaCarros" value="#{carroBean.carros}" var="c">
        <p:column>
            <f:facet name="header">Marca</f:facet>
            <h:outputText value="#{c.marca}" />
        </p:column>
        <p:column>
            <f:facet name="header">Modelo</f:facet>
            <h:outputText value="#{c.modelo}" />
        </p:column>
        <p:column>
            <f:facet name="header">Ano</f:facet>
            <h:outputText value="#{c.ano}" />
        </p:column>
        <p:column>
            <f:facet name="header">Cor</f:facet>
            <h:outputText value="#{c.cor}" />
        </p:column>
        <p:column>
            <f:facet name="header">Placa</f:facet>
            <h:outputText value="#{c.placa}" />
        </p:column>
    </p:dataTable>

    <h:commandLink>
        <p:graphicImage value="/imagens/xls.png" />
        <p:dataExporter type="xls" target="tabelaCarros" fileName="carros" />
    </h:commandLink>
    <h:commandLink>
        <p:graphicImage value="/imagens/pdf.png" />
        <p:dataExporter type="pdf" target="tabelaCarros" fileName="carros"/>
    </h:commandLink>
</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.

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<String> cores;

    public PicklistBean() {
        listarCores();
    }

    private void listarCores() {
        List<String> lista = new ArrayList<String>();
        List<String> selecionados = new ArrayList<String>();

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

        cores = new DualListModel<String>(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().

<h:form>
    <p:pickList value="#{picklistBean.cores}" var="cor" iconOnly="true" itemLabel="#{cor}" itemValue="#{cor}">
        <f:facet name="sourceCaption">Lista</f:facet>
        <f:facet name="targetCaption">Selecionadas</f:facet>
    </p:pickList>
    <p:commandButton value="Ver cores selecionadas" actionListener="#{picklistBean.mostrarCoresSelecionadas}" />
</h:form>

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 (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:

<h:outputLink id="lnk" value="#">
    <p:printer target="quebraCabeca" />
    <p:graphicImage value="/imagens/print.png" />
</h:outputLink>

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:

<h:form id="quebraCabeca">
    <p:dashboard model="#{quebraCabecaBean.pecas}">
        <p:panel id="f">
            <p:graphicImage url="/imagens/jogo/f.jpg" />
        </p:panel>
        <p:panel id="c">
            <p:graphicImage url="/imagens/jogo/c.jpg" />
        </p:panel>
        <p:panel id="g">
            <p:graphicImage url="/imagens/jogo/g.jpg" />
        </p:panel>

        <p:panel id="h">
            <p:graphicImage url="/imagens/jogo/h.jpg" />
        </p:panel>
        <p:panel id="a">
            <p:graphicImage url="/imagens/jogo/a.jpg" />
        </p:panel>
        <p:panel id="d">
            <p:graphicImage url="/imagens/jogo/d.jpg" />
        </p:panel>

        <p:panel id="i">
            <p:graphicImage url="/imagens/jogo/i.jpg" />
        </p:panel>
        <p:panel id="e">
            <p:graphicImage url="/imagens/jogo/e.jpg" />
        </p:panel>
        <p:panel id="b">
            <p:graphicImage url="/imagens/jogo/b.jpg" />
        </p:panel>
    </p:dashboard>
</h:form>

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