JSF 2.0: Componentes PrimeFaces 2.2.1 - Parte 6

Olá Pessoal!

Depois de mais de um mês aqui estou eu voltando com as postagens do Java sem café.! E para começar bem, nada melhor do que continuar com as postagens sobre o PrimeFaces! Lembrando, a ultima postagem sobre o PrimeFaces foi a Parte 5, nela eu comentei sobre não ter conseguido fazer os gráficos do PrimeFaces, pois bem, com a ajuda do amigo Jamir Luiz, agora eu consegui fazer os gráficos funcionarem, então como vocês podem imaginar, a postagem de hoje é sobre os gráficos do PrimeFaces!

Estrutura do projeto

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

Depois de pronto o projeto fica com essa estrutura:

Vamos começar pelo gráfico em linhas, o lineChart:

Código-fonte:
Para este exemplo vamos precisar de uma classe Nascimentos (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 Nascimentos:

public class Nascimentos {
    private String ano;
    private int qtdMeninos;
    private int qtdMeninas;

    public Nascimentos(String ano, int qtdMeninos, int qtdMeninas) {
        this.ano = ano;
        this.qtdMeninos = qtdMeninos;
        this.qtdMeninas = qtdMeninas;
    }

   //GETTERS e SETTERS
}

Agora vamos criar o nosso bean que vai dar suporte aos nossos gráficos, para isso crie um pacote com o nome de controle, dentro desse pacote crie  uma nova classe Java com o nome de GraficosBean:

@Named
@RequestScoped
public class GraficosBean {

    private List<Nascimentos> nascimentos = new ArrayList();

    public GraficosBean() {
        nascimentos.add(new Nascimentos("2008", 120, 53));
        nascimentos.add(new Nascimentos("2009", 100, 70));
        nascimentos.add(new Nascimentos("2010", 80, 120));
        nascimentos.add(new Nascimentos("2011", 100, 130));   
    }

    //GETTERS E SETTERS

}

Vamos  para a página index, mas antes disso, tem um detalhe importante sobre as legendas dos gráficos (isso serve para os 3 tipos de gráficos que veremos aqui), dentro da tag h:head, precisamos do seguinte código javascript:

<script type="text/javascript">
     var chartStyle = {
           padding:20,
           legend: {
                display:"right",
                spacing:10
           }
     };
</script>

E agora sim vamos ver qual o código da lineChart:

<p:panel header="Gráfico em linhas: Nascimentos anual em uma cidade" style="width: 550px">
      <p:lineChart value="#{graficosBean.nascimentos}" var="nasc"  xfield="#{nasc.ano}"
                   height="300px" width="500px" style="chartStyle">
          <p:chartSeries label="Meninos" value="#{nasc.qtdMeninos}" />
          <p:chartSeries label="Meninas" value="#{nasc.qtdMeninas}" />
     </p:lineChart>
</p:panel>

Veja que na propriedade style da tag p:lineChart é onde eu referencio o código javascript. E são as tags p:chartSeries que definem as linhas do gráfico.

Bom... tudo isso que eu falei acima também vale para o barChart, que é nosso gráfico em barras:

Código-fonte: A única coisa que difere do lineChart é a tag mesmo, então, fica dessa forma:

<p:panel header="Gráfico em barras Nascimentos anual em uma cidade" style="width: 550px">
        <p:barChart value="#{graficosBean.nascimentos}" var="nasc2"  yfield="#{nasc2.ano}"
                height="300px" width="500px" style="chartStyle">
                <p:chartSeries label="Meninos" value="#{nasc2.qtdMeninos}" />
                <p:chartSeries label="Meninas" value="#{nasc2.qtdMeninas}" />
        </p:barChart>
</p:panel>

E pra finalizar vamos ao gráfico do tipo pizza, ou seja o pieChart:

Código-fonte:
Para este tipo de gráfico vamos precisar de mais uma classe (pojo), por isso dentro do pacote model, crie uma nova classe java com o nome de Blog:

public class Blog {

    private String mes;
    private int qtdAcessos;

    public Blog(String mes, int qtdAcessos) {
        this.mes = mes;
        this.qtdAcessos = qtdAcessos;
    }

    //Getters e Setters
}

E o nosso bean GraficosBean, terá o seguinte código:

@Named
@RequestScoped
public class GraficosBean {

    private List<Blog> acessos = new ArrayList<Blog>();

    public GraficosBean() {
        acessos.add(new Blog("Jan/2011", 2129));
        acessos.add(new Blog("Fev/2011", 2380));
        acessos.add(new Blog("Mar/2011", 5221));
        acessos.add(new Blog("Abr/2011", 7723));
        acessos.add(new Blog("Mai/2011", 15327));
        acessos.add(new Blog("Jun/2011", 22302));
        acessos.add(new Blog("Jul/2011", 15908));
        
    }

    //Getters e Setters
}

E o index ficará dessa forma:

<p:panel header="Gráfico tipo pizza: Quantidade de visualizações do blog" style="width: 550px">
      <p:pieChart value="#{graficosBean.acessos}" var="acessos" categoryField="#{acessos.mes}"
               dataField="#{acessos.qtdAcessos}" height="300px" width="500px" style="chartStyle" />
</p:panel>

Veja que para o pieChart não é necessário a tag p:chartSeries. Da mesma forma que os gráficos anteriores o pieChart precisa da propriedade style que se referencia ao código javascript.

E por fim, o código completo da página index.xhtml:

<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:p="http://primefaces.prime.com.tr/ui">
    <h:head>
        <title>PrimeFaces - Parte 6</title>
        <script type="text/javascript">
            var chartStyle = {
                padding:20,
                legend: {
                        display:"right",
                        spacing:10
                        }
            };
        </script>
    </h:head>
    <h:body>
        <p:panel header="Gráfico em linhas: Nascimentos anual em uma cidade" style="width: 550px">
            <p:lineChart value="#{graficosBean.nascimentos}" var="nasc"  xfield="#{nasc.ano}"
                         height="300px" width="500px" style="chartStyle">
                <p:chartSeries label="Meninos" value="#{nasc.qtdMeninos}" />
                <p:chartSeries label="Meninas" value="#{nasc.qtdMeninas}" />
            </p:lineChart>
        </p:panel>

        <br />

        <p:panel header="Gráfico em barras Nascimentos anual em uma cidade" style="width: 550px">
            <p:barChart value="#{graficosBean.nascimentos}" var="nasc2"  yfield="#{nasc2.ano}"
                        height="300px" width="500px" style="chartStyle">
                <p:chartSeries label="Meninos" value="#{nasc2.qtdMeninos}" />
                <p:chartSeries label="Meninas" value="#{nasc2.qtdMeninas}" />
            </p:barChart>
        </p:panel>

        <br />

        <p:panel header="Gráfico tipo pizza: Quantidade de visualizações do blog" style="width: 550px">
            <p:pieChart value="#{graficosBean.acessos}" var="acessos" categoryField="#{acessos.mes}"
                        dataField="#{acessos.qtdAcessos}" height="300px" width="500px" style="chartStyle" />
        </p:panel>


    </h:body>
</html>

E por aqui ficamos com mais uma postagem sobre PrimeFaces!