Arquivo

Archive for the ‘PRIMEFACES’ Category

Gráficos com JSF 2 e Primefaces – Torta

Olá pessoal, tudo bem?

Espero que me perdoem a demora em postar novo material, mas estou com alguns projetos em adamento e ando um pouco sem tempo.

Neste novo post daremos início a uma série onde mostrarei como criar alguns tipos de gráficos com Primefaces. Como pontapé inicial veremos a criação de um gráfico de torta onde mostraremos a probabilidade de título do Camp. Brasileiro.

Utilizaremos em nosso projeto exemplo:

– Netbeans 7.0.1
– Primefaces 3.0M3

Obs.: Com primefaces, não há a necessidade de adicionar nenhuma lib para a criação de gráficos, a não ser, que você deseje interagir com o JFreeChart.

Para começar crie um projeto, no nosso caso ExGraficoTorta. Neste projeto construa uma estrutura de pacotes conforme exibido abaixo:

Criamos uma classe Time, outra TimeDAO e um managedbean GraficoBean. Todas estas classes serão detalhadas mais abaixo:

Veja a classe Time.java


public class Time {

    private long id;
    private String nomeTime;
    private double probabilidade;

    public long getId() {
        return id;
    }

    public void setId(long id) {
        this.id = id;
    }

    public String getNomeTime() {
        return nomeTime;
    }

    public void setNomeTime(String nomeTime) {
        this.nomeTime = nomeTime;
    }

    public double getProbabilidade() {
        return probabilidade;
    }

    public void setProbabilidade(double probabilidade) {
        this.probabilidade = probabilidade;
    }
}

Utilizaremos este modelo para, através do DAO, buscar os dados que desejamos exibir no gráfico de torta. Vamos agora ver como ficará o managedbean utilizado para gerenciar a página. Abaixo confira o código:

@ManagedBean
public class GraficoBean implements Serializable {

    private PieChartModel modelo;

    public GraficoBean() {
        criarModeloGrafico();
    }

    public PieChartModel getModelo() {
        return modelo;
    }

    public void setModelo(PieChartModel modelo) {
        this.modelo = modelo;
    }

    private void criarModeloGrafico() {
        modelo = new PieChartModel();
        List<time> listaTime = new ArrayList<time>();
 TimeDAO timeDAo = new TimeDAO();
 listaTime = timeDAo.listaTodos();
 for (Time time : listaTime) {
 modelo.set(time.getNomeTime(), time.getProbabilidade());
 }
 }
}

Declaramos um objeto do tipo PieChartModel para espelhar o modelod o gráfico de torta que usaremos na nossa página. Como este é um exemplo simples e prático, decidi simplesmente criar um método para preencher o modelo e chamá-lo no construtor. Provavelmente, em suas apps, você deverá invocar o método através de uma action de um botão, menuitem, etc.

Confira abaixo um pouco sobre os principais atributos da tag pieChart

 Nome

Valor Padão

Tipo

Descrição

id

null

String

Identificador único

rendered

TRUE

Boolean

Indica que o componente deve ou não ser renderizado na tela

binding

null

Object

Uma expression language que faz o mapeamento do componente com um objeto UICOmponente localizado no backingbean.

value

null

Collection

É o modelo do gráfico

diameter

null

Integer

Tamanho do diâmetro da torta.

legendPosition

null

Object

Campo que indica a posição da legenda. Coloque as siglas dos pontos cardeais em inglês. Ex.: w, ne, n, etc.

style

null

String

Define o estilo do painel do gráfico, tamanho, tamanho de fonte, etc.

seriesStyle

null

String

Cores dos items. Coloque as cores em formato RGB sem o #.

Não explicarei todos os atributos, até porque você não os utilizará, mas em caso de dúvida post um comentário. Segue o código da nossa página que exibirá o gráfico:

<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:p="http://primefaces.prime.com.tr/ui"
      xmlns:h="http://java.sun.com/jsf/html">
    <h:head>
        <title>Gráficos com JSF 2.0</title>
    </h:head>
    <h:body>
        <p:pieChart value="#{graficoBean.modelo}"
                    legendPosition="w"
                    title="Probabilidade de Título - Brasileirão 2011"
                    style="width:800px;height:600px;"/>
    </h:body>
</html>

Veja na imagem abaixo como ficou:
Gráfico de Torta

É isso ai, bem simples, qualquer dúvida coloca um comentário. Valeu!