Arquivo

Archive for the ‘PrimeFaces’ Category

JSF 2 – PRIMEFACES – P:GALLERIA – EXEMPLO DE GALERIA DE FOTOS

Olá pessoal,

Um componente muito interessante para exibição de imagens é o galleria do primefaces. Irei explicar neste post como podemos usar este componente para exibir as imagens enviadas ao servidor e armazenadas no banco de dados.

Para nosso exemplo utilizarei:

Netbeans 7.0.1
Primefaces 3.0M3
Commons-io 2.0.1
Commons-fileupload 1.2.2

Além disso iremos usar a seguinte base de dados:

Iremos armazenar eventos e as fotos dos eventos. Salvaremos o nome do evento e sua data e ainda a imagem, uma descrição, a ordem que ela aparecerá e o evento ao qual esta imagem pertence.

Nosso projeto consistirá de um sistema que cadastraremos o evento e depois poderemos inserir imagens utilizando o fileupload ou visualizar as imagens com o galleria.

Veja a estrutura do projeto no netbeans, inclusive com as libs usadas:



Criamos uma estrutura com pacotes para separar DAO, modelos, fábrica de conexões, os managedbeans, etc. Abaixo irei colocar o código e explicar cada classe. No noss projeto irei utilizar o componente p:fileupload para enviar e gravar e capturar as imagens para que sejam salvas no banco de dados. Como ja vimos em dois posts como configurar este componente, irei falar dele com menos detalhes, afinal, a ênfase deve ser dada ao uso do galleria.

Classe Evento.java

public class Evento {

    private Long id;
    private String nome;
    private Date data;
    private List<Foto> fotos = new ArrayList<Foto>();

    public Date getData() {
        return data;
    }

    public void setData(Date data) {
        this.data = data;
    }

    public Long getId() {
        return id;
    }

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

    public String getNome() {
        return nome;
    }

    public void setNome(String nome) {
        this.nome = nome;
    }

    public List<Foto> getFotos() {
        return fotos;
    }

    public void setFotos(List<Foto> fotos) {
        this.fotos = fotos;
    }
}

Classe Foto.java


public class Foto {

    private Long id;
    private byte[] imagem;
    private int ordem;
    private String descricao;
    private Evento evento = new Evento();

    public Evento getEvento() {
        return evento;
    }

    public void setEvento(Evento evento) {
        this.evento = evento;
    }

    public Long getId() {
        return id;
    }

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

    public byte[] getImagem() {
        return imagem;
    }

    public void setImagem(byte[] imagem) {
        this.imagem = imagem;
    }

    public int getOrdem() {
        return ordem;
    }

    public void setOrdem(int ordem) {
        this.ordem = ordem;
    }

    public String getDescricao() {
        return descricao;
    }

    public void setDescricao(String descricao) {
        this.descricao = descricao;
    }
}

As duas classes acima representam as tabelas Eventos e Fotos respectivamente. Primeiramente iremos abordar a cricação da estrutura para cadastrarmos os eventos, enviarmos e armazenarmos as fotos no banco.

No envio das fotos utilizaremos o componente fileupload, como nosso foco é o componente galleria não irei dar muitos detalhes da configuração do fileupload, para isso visite nosso outro post https://benignosales.wordpress.com/2011/03/17/jsf-2-0-primefaces-2-2-fileupload-com-imagecropper/ . Nele você encontrará todas as informações necessárias para configurar o componente de envio de arquivos.

Com o fileupload configurado, iremos criar nosso managed bean @SessionScoped, ele deve ser deste tipo para funcionar com o componente de envio de arquivos. Abaixo vamos conferir o código do gerenciador, para uma melhor visualização suprimi os getters e setters das variáveis.


@ManagedBean
@SessionScoped
public class GaleriaBean {

    private List<Evento> eventos = new ArrayList<Evento>();
    private Evento evento = new Evento();
    private Evento eventoSelecionado = new Evento();
    private EventoDAO eventoDAO = new EventoDAO();
    private FotoDAO fotoDAO = new FotoDAO();
    private Foto foto = new Foto();
    private StreamedContent imagem = new DefaultStreamedContent();
    private List<Foto> fotos = new ArrayList<Foto>();

    /* getters e setters */

    public void setFoto(Foto foto) {
        this.foto = foto;
    }

    public void salvaEvento() {
        try {
            eventoDAO.salva(evento);
            evento = new Evento();
            eventos = eventoDAO.listaTodos();
            FacesContext.getCurrentInstance().addMessage(null, new FacesMessage(FacesMessage.SEVERITY_INFO, "Evento adicionado", "Evento adicionado"));
        } catch (SQLException ex) {
            Logger.getLogger(GaleriaBean.class.getName()).log(Level.SEVERE, null, ex);
        }
    }

    public void salvaFotos() {
        try {
            fotoDAO.salva(foto);
            foto = new Foto();
            FacesContext.getCurrentInstance().addMessage(null, new FacesMessage(FacesMessage.SEVERITY_INFO, "Foto adicionada", "Foto adicionada"));
        } catch (SQLException ex) {
            Logger.getLogger(GaleriaBean.class.getName()).log(Level.SEVERE, null, ex);
        }

    }

    public void enviaImagem(FileUploadEvent event) {
        try {
            imagem = new DefaultStreamedContent(event.getFile().getInputstream());
            foto.setEvento(eventoSelecionado);
            foto.setImagem(event.getFile().getContents());
        } catch (IOException ex) {
            Logger.getLogger(GaleriaBean.class.getName()).log(Level.SEVERE, null, ex);
        }
    }

    public void criaArquivo(byte[] bytes, String arquivo) {
        FileOutputStream fos;
        try {
            fos = new FileOutputStream(arquivo);
            fos.write(bytes);
            fos.close();
        } catch (FileNotFoundException ex) {
            Logger.getLogger(GaleriaBean.class.getName()).log(Level.SEVERE, null, ex);
        } catch (IOException ex) {
            Logger.getLogger(GaleriaBean.class.getName()).log(Level.SEVERE, null, ex);
        }
    }

    public void listaFotosEvento() {
        try {
            fotos = fotoDAO.buscaPorEvento(eventoSelecionado);
            for (Foto f : fotos) {
                FacesContext facesContext = FacesContext.getCurrentInstance();
                ServletContext scontext = (ServletContext) facesContext.getExternalContext().getContext();
                String nomeArquivo = f.getId().toString() + ".jpg";
                String arquivo = scontext.getRealPath("/temp/" + nomeArquivo);
                criaArquivo(f.getImagem(), arquivo);
            }
        } catch (SQLException ex) {
            Logger.getLogger(GaleriaBean.class.getName()).log(Level.SEVERE, null, ex);
        }
    }

    public GaleriaBean() {
        try {
            eventos = eventoDAO.listaTodos();
        } catch (SQLException ex) {
            Logger.getLogger(GaleriaBean.class.getName()).log(Level.SEVERE, null, ex);
        }
    }
}

Temos uma coleção do tipo Evento na qual iremos jogar todos os eventos cadastrados no banco para exibirmos em um datatable, dois objetos do tipo Evento um para o cadastro e outro para a visualização e envio de imagens, um objeto Foto e uma coleção Foto, bem como um objeto StreamedContent que serve para aualizarmos dinamicamente um p:graphicimage e temos os DAOs.

Outro ponto, não iremos colocar o código dos DAOs, pois você pode trabalhar com o que quiser para a camada de persistencia, no meu caso, usei jdbc puro sem nenhuma framework ORM. Caso alguem queira os DAOs basta postar um comentário que envio.

Nos métodos temos o salvaEvento para persistirmos os eventos no banco e temos o salvaFotos para guardarmos as imagens no banco de dados. Além disso, o enviaImagem que é o listener do componente fileupload, ou seja, sempre que enviarmos um arquivo o sistema chama este método para “tratarmos” o arquivos como quisermos. Aqui, preenchemos o objeto StreamedContent imagem para exibir a imagem enviada na tela e setamos o objeto foto para que possamos salvá-lo depois. Mais abaixo, temos o método criaArquivo que serve para criar o arquivo físico a partir de um array de bytes e um caminho específico e o método listaFotosEvento, com o qual criamos os arquivos a serem exibidos na galeria. O grande lance é justamente esse, os arquivos devem ser criados dinamicamente e jogados dentro de uma pasta para serem exibidos na tela, pois o graphicImage não suporta conteudos dinamicos em listas, como um datatable ou mesmo no galleria.

Com isso, passamos para a nossa view. Veja o código abaixo:

Obs.: Crie uma pasta dentro da pasta web para armazenar temporariamente as imagens. No nossa caso, criei a pasta temp.

    <h:head>
        <title>Exemplo Galleria - Benigno Sales</title>
    </h:head>
    <h:body style="background-color: #CCCCCC">
        <h:form prependId="false" enctype="multipart/form-data">
            <p:panel id="dadosEvento" header="Exemplo Galeria" style="width: 600px;">
                <p:growl/>
                <h:panelGrid columns="2">
                    <h:outputText value="Nome"/>
                    <p:inputText value="#{galeriaBean.evento.nome}" size="40"/>
                    <h:outputText value="Data"/>
                    <p:calendar value="#{galeriaBean.evento.data}"
                                timeZone="GMT-3"
                                navigator="true"
                                pattern="dd/MM/yyyy"
                                locale="pt_BR"/>
                    <p:commandButton value="Salvar" action="#{galeriaBean.salvaEvento()}" update="tabelaEventos dadosEvento"/>
                    <p:commandButton value="Limpar" onclick="form.reset()"/>
                    <p:ajaxStatus>
                        <f:facet name="start">
                            <h:outputText value="aguarde..."/>
                        </f:facet>
                        <f:facet name="complete">
                            <h:outputText value=""/>
                        </f:facet>
                    </p:ajaxStatus>
                </h:panelGrid>
            </p:panel>
            <p:dialog id="dialogFotos" position="top" widgetVar="dialogFotos" modal="true" minWidth="600" minHeight="500">
                <p:fileUpload fileUploadListener="#{galeriaBean.enviaImagem}"
                              update="imagemTmp"
                              cancelLabel="Cancelar"
                              fileLimit="100000"
                              fileLimitMessage="Imagem muito grande"
                              label="Selecionar"
                              invalidFileMessage="Tipo de imagem inválido"
                              invalidSizeMessage="Imagem muito grande"
                              uploadLabel="Enviar"
                              allowTypes="/(\.|\/)(jpe?g|png)$/">

                </p:fileUpload>
                <p:outputPanel id="dadosFoto">
                    <h:panelGrid>
                        <p:graphicImage cache="false" id="imagemTmp" value="#{galeriaBean.imagem}" height="300" style="margin: 0 auto;"/>
                        <h:outputText value="Descrição"/>
                        <p:inputText value="#{galeriaBean.foto.descricao}" size="49"/>
                        <h:outputText value="Ordem"/>
                        <p:inputMask mask="9" value="#{galeriaBean.foto.ordem}" size="5"/>
                    </h:panelGrid>
                </p:outputPanel>
                <p:commandButton value="Adicionar" action="#{galeriaBean.salvaFotos()}" update="dadosFoto dadosEvento"/>
            </p:dialog>
            <p:dialog id="dialogGaleria" widgetVar="dialogGaleria" modal="true" position="top"
                      minWidth="440" minHeight="500">
                <h:outputText value="Nenhuma imagem encontrada" rendered="#{galeriaBean.fotos.size()==0}"/>
                <p:galleria value="#{galeriaBean.fotos}"
                            var="galeria" effect="slide" effectSpeed="2000"
                            panelHeight="300" panelWidth="400"
                            frameHeight="50" frameWidth="50"
                            filmstripPosition="bottom" showOverlays="true">
                    <p:graphicImage value="/temp/#{galeria.id}.jpg" cache="false" width="400" height="300"
                                    title="#{galeria.descricao}" alt="#{galeria.descricao}"/>

                    <p:galleriaOverlay title="#{galeria.descricao}">
                    </p:galleriaOverlay>
                </p:galleria>
            </p:dialog>
            <p:dataTable id="tabelaEventos"
                         value="#{galeriaBean.eventos}" var="evento" style="width: 610px;"
                         emptyMessage="Nenhum evento cadastrado"
                         rows="6"
                         paginator="true"
                         paginatorPosition="bottom"
                         paginatorAlwaysVisible="false">
                <p:column headerText="Id">
                    <h:outputText value="#{evento.id}"/>
                </p:column>
                <p:column headerText="Evento">
                    <h:outputText value="#{evento.nome}"/>
                </p:column>
                <p:column headerText="Data">
                    <h:outputText value="#{evento.data}">
                        <f:convertDateTime pattern="dd/MM/yyyy"/>
                    </h:outputText>
                </p:column>
                <p:column>
                    <p:commandButton image="ui-icon-plus" title="Adicionar Imagem" oncomplete="dialogFotos.show();" update="dadosFoto">
                        <f:setPropertyActionListener target="#{galeriaBean.eventoSelecionado}" value="#{evento}"/>
                    </p:commandButton>
                    <p:commandButton image="ui-icon-search" title="Ver Imagens" action="#{galeriaBean.listaFotosEvento()}" update="dialogGaleria" oncomplete="dialogGaleria.show()">
                        <f:setPropertyActionListener target="#{galeriaBean.eventoSelecionado}" value="#{evento}"/>
                    </p:commandButton>
                </p:column>
            </p:dataTable>
        </h:form>
    </h:body>
</html>

É uma tela simples, mas que da um grande resultado. Uma área para o cadastro dos eventos e um dataTable para listar estes eventos. Em uma coluna do dataTable colocamos dois botões, um para exibirmos as imagens(fotos) e outro para enviarmos as fotos.

O Componente Galleria tem alguns atributos que gostaria de destacar, são eles:

 value  null  String  Coleção que possui os dados das imagens
 var  null  String  Variavel  que vai interagir com a coleção
 panelHeight/panelWidth  –  Integer  Largura e altura do painel
 frameHeight/frameWidth  –  Integer  Largura e altura das miniaturas

style

null

String

 Estilo

styleClass

null

String

 Classe de estilo

effect

fade

String

 Nome da animação

filmstripPosition  top  String  Posição das miniaturas
showOverlays  true  boolean  Exibição das legendas

Abaixo eu criei um vídeo com o projeto em execução:

Ah! O vídeo foi feito com testes no primefaces 2.2.1, nesta versão a galeria era meio feinha. Abaixo vou postar como ficou com a versão 3M3 do prime.

Bom, é isso pessoal. Dúvidas? postem aqui! Abraço a todos e compartilhem suas idéias.

Gráficos com JSF 2 e Primefaces – Linhas

Dando continuidade a nossa série de posts sobre gráficos, mostrarei agora como criar um gráfico de linhas. Nosso exemplo mostrarei a evolução de três times durante cinco rodadas do brasileirão.

Basicamente a diferença entre o gráfico de torta e o de linhas é que no de torta analisamos a representação dos dados de um objeto com relação ao todo e no de linhas iremos analisar evoluções do objeto durante etapas(períodos).

No exemplo utilizamos:

– Netbeans 7.0.1
– Primeface 3.0 M3
– Jsf 2.1

Abaixo uma breve explicação sobre os principais atribudos do componente lineChar:

 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

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 #.

minY/minX

null

Double

Menor valor para a dimensão Y/X.

maxY/maxX

null

Double

Maior valor para a dimensão Y/X.

yaxisLabel

null

String

Rótulo dos dados da dimensão Y

xaxisLabel

null

String

Rótulo dos dados da simensão X

No nosso projeto iremos utilizar apenas beans(modelos) e managedbeans, isso para facilitar o entendimento. Abaixo, como ficou a organização do projeto:

Observe que criamos 3 modelos, um para a Equipe(Time), outro para Rodada e mais um representando o relacionamento entre as duas. Como nosso objetivo é explicar o componente, não coloquei muitos atributos nos modelos, apenas o necessário para conseguir a compreensão. vejam abaixo os modelos:

Rodada.java

public class Rodada {

    private String numero;

    public Rodada(String numero) {
        this.numero = numero;
    }

    public String getNumero() {
        return numero;
    }

    public void setNumero(String numero) {
        this.numero = numero;
    }

    @Override
    public boolean equals(Object obj) {
        if (obj == null) {
            return false;
        }
        if (getClass() != obj.getClass()) {
            return false;
        }
        final Rodada other = (Rodada) obj;
        if ((this.numero == null) ? (other.numero != null) : !this.numero.equals(other.numero)) {
            return false;
        }
        return true;
    }

    @Override
    public int hashCode() {
        int hash = 5;
        hash = 11 * hash + (this.numero != null ? this.numero.hashCode() : 0);
        return hash;
    }
}

Time.java

public class Time {

    private String nome;

    public Time(String nome) {
        this.nome = nome;
    }

    public String getNome() {
        return nome;
    }

    public void setNome(String nome) {
        this.nome = nome;
    }

    @Override
    public boolean equals(Object obj) {
        if (obj == null) {
            return false;
        }
        if (getClass() != obj.getClass()) {
            return false;
        }
        final Time other = (Time) obj;
        if ((this.nome == null) ? (other.nome != null) : !this.nome.equals(other.nome)) {
            return false;
        }
        return true;
    }

    @Override
    public int hashCode() {
        int hash = 5;
        hash = 59 * hash + (this.nome != null ? this.nome.hashCode() : 0);
        return hash;
    }
}

TimeRodada.java

public class TimeRodada {

    private Time time;
    private Rodada rodada;
    private int pontos;

    public int getPontos() {
        return pontos;
    }

    public void setPontos(int pontos) {
        this.pontos = pontos;
    }

    public Rodada getRodada() {
        return rodada;
    }

    public void setRodada(Rodada rodada) {
        this.rodada = rodada;
    }

    public Time getTime() {
        return time;
    }

    public void setTime(Time time) {
        this.time = time;
    }

    @Override
    public boolean equals(Object obj) {
        if (obj == null) {
            return false;
        }
        if (getClass() != obj.getClass()) {
            return false;
        }
        final TimeRodada other = (TimeRodada) obj;
        if (this.time != other.time && (this.time == null || !this.time.equals(other.time))) {
            return false;
        }
        if (this.rodada != other.rodada && (this.rodada == null || !this.rodada.equals(other.rodada))) {
            return false;
        }
        return true;
    }

    @Override
    public int hashCode() {
        int hash = 7;
        hash = 31 * hash + (this.time != null ? this.time.hashCode() : 0);
        hash = 31 * hash + (this.rodada != null ? this.rodada.hashCode() : 0);
        return hash;
    }
}

Abaixo iremos explicar o managed bean GraficoLinhaBean.java

@ManagedBean
@ViewScoped
public class GraficoLinhaBean {

    private List timesRodadas = new ArrayList();
    private List<time> times = new ArrayList<time>();
 private List rodadas = new ArrayList();
 private CartesianChartModel rodadasBrasileirao = new CartesianChartModel();

 public GraficoLinhaBean() {
 criarDados();
 criarModelo();
 }

 public CartesianChartModel getRodadasBrasileirao() {
 return rodadasBrasileirao;
 }

 public void setRodadasBrasileirao(CartesianChartModel rodadasBrasileirao) {
 this.rodadasBrasileirao = rodadasBrasileirao;
 }

 public List getRodadas() {
 return rodadas;
 }

 public void setRodadas(List rodadas) {
 this.rodadas = rodadas;
 }

 public List<time> getTimes() {
 return times;
 }

 public void setTimes(List<time> times) {
 this.times = times;
 }

 public List getTimesRodadas() {
 return timesRodadas;
 }

 public void setTimesRodadas(List timesRodadas) {
 this.timesRodadas = timesRodadas;
 }

 private void criarDados() {
 Rodada r = new Rodada("1");
 rodadas.add(r);
 Rodada r2 = new Rodada("2");
 rodadas.add(r2);
 Rodada r3 = new Rodada("3");
 rodadas.add(r3);
 Rodada r4 = new Rodada("4");
 rodadas.add(r4);
 Rodada r5 = new Rodada("5");
 rodadas.add(r5);
 Time t = new Time("Corinthians");
 times.add(t);
 Time t2 = new Time("São Paulo");
 times.add(t2);
 Time t3 = new Time("Flamengo");
 times.add(t3);
 //Rodada 1
 TimeRodada tr = new TimeRodada();
 tr.setTime(t);
 tr.setRodada(r);
 tr.setPontos(3);
 timesRodadas.add(tr);
 TimeRodada tr2 = new TimeRodada();
 tr2.setTime(t2);
 tr2.setRodada(r);
 tr2.setPontos(1);
 timesRodadas.add(tr2);
 TimeRodada tr3 = new TimeRodada();
 tr3.setTime(t3);
 tr3.setRodada(r);
 tr3.setPontos(1);
 timesRodadas.add(tr3);
 //Rodada 2
 TimeRodada tr4 = new TimeRodada();
 tr4.setTime(t);
 tr4.setRodada(r2);
 tr4.setPontos(6);
 timesRodadas.add(tr4);
 TimeRodada tr5 = new TimeRodada();
 tr5.setTime(t2);
 tr5.setRodada(r2);
 tr5.setPontos(2);
 timesRodadas.add(tr5);
 TimeRodada tr6 = new TimeRodada();
 tr6.setTime(t3);
 tr6.setRodada(r2);
 tr6.setPontos(4);
 timesRodadas.add(tr6);
 //Rodada 3
 TimeRodada tr7 = new TimeRodada();
 tr7.setTime(t);
 tr7.setRodada(r3);
 tr7.setPontos(9);
 timesRodadas.add(tr7);
 TimeRodada tr8 = new TimeRodada();
 tr8.setTime(t2);
 tr8.setRodada(r3);
 tr8.setPontos(5);
 timesRodadas.add(tr8);
 TimeRodada tr9 = new TimeRodada();
 tr9.setTime(t3);
 tr9.setRodada(r3);
 tr9.setPontos(5);
 timesRodadas.add(tr9);
 //Rodada 4
 TimeRodada tr10 = new TimeRodada();
 tr10.setTime(t);
 tr10.setRodada(r4);
 tr10.setPontos(12);
 timesRodadas.add(tr10);
 TimeRodada tr11 = new TimeRodada();
 tr11.setTime(t2);
 tr11.setRodada(r4);
 tr11.setPontos(6);
 timesRodadas.add(tr11);
 TimeRodada tr12 = new TimeRodada();
 tr12.setTime(t3);
 tr12.setRodada(r4);
 tr12.setPontos(8);
 timesRodadas.add(tr12);
 //Rodada 5
 TimeRodada tr13 = new TimeRodada();
 tr13.setTime(t);
 tr13.setRodada(r5);
 tr13.setPontos(15);
 timesRodadas.add(tr13);
 TimeRodada tr14 = new TimeRodada();
 tr14.setTime(t2);
 tr14.setRodada(r5);
 tr14.setPontos(6);
 timesRodadas.add(tr14);
 TimeRodada tr15 = new TimeRodada();
 tr15.setTime(t3);
 tr15.setRodada(r5);
 tr15.setPontos(9);
 timesRodadas.add(tr15);
 }

 private void criarModelo() {
 rodadasBrasileirao = new CartesianChartModel();
 for (Time time : times) {
 ChartSeries cs = new ChartSeries();
 for (Rodada rodada : rodadas) {
 TimeRodada tr = new TimeRodada();
 tr.setRodada(rodada);
 tr.setTime(time);
 for (TimeRodada timeRodada : timesRodadas) {
 if (timeRodada.equals(tr)) {
 cs.setLabel(timeRodada.getTime().getNome());
 cs.set(timeRodada.getRodada().getNumero(), timeRodada.getPontos());
 }
 }
 }
 rodadasBrasileirao.addSeries(cs);
 }
 }
}

Vejamos que no construtor eu chamo o metodo criarDados que cria as rodadas e os times, alem de preencher preencher o relacionamento com os pontos de cada time em cada rodada.

No bean temos um objeto da classe CartesianChartModel, este objeto ira espelhar o componente lineChart no managedBean, ou seja, da forma como montarmos este objeto, ser exibida na view.

Com a classe CartesianChartModel trabalharemos com ChartSeries, para criar as linhas do grafico. Cada linha devera ser um novo objeto que atraves do metodo setLabel definimos o nome que aquela linha representara e atraves do set inserimos os dados da dimensao X e Y nesta sequencia.
Em criarModelo eu percorri todos os Times criando uma linha para representar cada um, depois preenchi os dados dos pontos em cada rodada formando o grafico da evolucao dos time, confira no final do post.

Abaixo voces podem conferir a view index.xhtml:

        Exemplo de Gráficos com Primefaces - Linha

Em value definimos o objeto do bean que representará o gráfico, a posição da legenda, o valor minimo de X e Y e os rotulos de X e Y, um titulo e o estilo(tamanho, margem, etc).

Ah! Tentem clicar sobre o nome de um dos time para ver o resultado,  bem interessante. Bem, e isso! Abraco e espero que gostem do resultado.